This media is not supported in your browser
VIEW IN TELEGRAM
Pico CSS یک چارچوب CSS مینیمالیستی و سبک برای HTML
اصلاً لازم نیست با آن زحمتی بکشید چون تمامی style ها به عناصر html داده شده و اصلا نیازی به تعریف کلاس و style ندارید
می توانید Pico را با بیش از 130 متغیر CSS سفارشی کنید یا از SASS استفاده کنید.
برخلاف فریم ورک‌های حجیم و بارگذاری شده، Pico ماهیت سبک HTML را حفظ می‌کند، با اجتناب از اختصاصی بودن بیش از حد CSS، استفاده از حافظه را کاهش می‌دهد و تعداد فایل‌ها را برای بارگیری کاهش می‌دهد.
🔗https://picocss.com/
#️⃣#npm_module
🆔@IR_javascript
اصلاً لازم نیست با آن زحمتی بکشید چون تمامی style ها به عناصر html داده شده و اصلا نیازی به تعریف کلاس و style ندارید
می توانید Pico را با بیش از 130 متغیر CSS سفارشی کنید یا از SASS استفاده کنید.
برخلاف فریم ورک‌های حجیم و بارگذاری شده، Pico ماهیت سبک HTML را حفظ می‌کند، با اجتناب از اختصاصی بودن بیش از حد CSS، استفاده از حافظه را کاهش می‌دهد و تعداد فایل‌ها را برای بارگیری کاهش می‌دهد.
🔗https://picocss.com/
#️⃣#npm_module
🆔@IR_javascript
👍2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Responsive Portfolio
این یک صفحه نمونه کار کامل است که به سبک macOS با استفاده از HTML و CSS طراحی شده است.
🔗https://codepen.io/ecemgo/pen/WNmWVqb
#️⃣#code
🆔@IR_javascript
این یک صفحه نمونه کار کامل است که به سبک macOS با استفاده از HTML و CSS طراحی شده است.
🔗https://codepen.io/ecemgo/pen/WNmWVqb
#️⃣#code
🆔@IR_javascript
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Portal دارای نمونه های زیادی از CSS / HTML برای کمک به تمام نیازهای طراحی خود پیدا خواهید کرد. صدها ابزارو مولدهایی که می توانید آن را کپی کرده و در پروژه وب خود جایگذاری کنید.
🔗https://www.cssportal.com
#️⃣#tool
🆔@IR_javascript
🔗https://www.cssportal.com
#️⃣#tool
🆔@IR_javascript
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
ویژگی scroll-padding
به شما امکان می دهد در فاصله معینی از لبه ظرف، scroll را متوقف کنید
🔗https://css-tricks.com/almanac/properties/s/scroll-padding/
#️⃣#tip
🆔@IR_javascript
به شما امکان می دهد در فاصله معینی از لبه ظرف، scroll را متوقف کنید
.scroll-container {
scroll-padding: 50px 0 0 50px;
}🔗https://css-tricks.com/almanac/properties/s/scroll-padding/
#️⃣#tip
🆔@IR_javascript
👍4
نظرات پیشرفته
Better Comments یک افزونه برای VSCode است که به شما کمک می کند نظرات را در کد خود ساختار بهتری داشته باشید. این قابلیت دسته بندی نظرات و برجسته کردن آنها در رنگ های مختلف را ارائه می دهد که به شما کمک می کند نکات مهم، وظایف یا نظرات را برجسته کنید.
#️⃣#tool
🆔@IR_javascript
Better Comments یک افزونه برای VSCode است که به شما کمک می کند نظرات را در کد خود ساختار بهتری داشته باشید. این قابلیت دسته بندی نظرات و برجسته کردن آنها در رنگ های مختلف را ارائه می دهد که به شما کمک می کند نکات مهم، وظایف یا نظرات را برجسته کنید.
#️⃣#tool
🆔@IR_javascript
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Navigation with Glass Effect
ناوبری وب سایت با جلوه شیشه ای. با استفاده از جاوا اسکریپت پیاده سازی شده است.
🔗https://codepen.io/codesuey/pen/abPEyjo?editors=1010
#️⃣#code
🆔@IR_javascript
ناوبری وب سایت با جلوه شیشه ای. با استفاده از جاوا اسکریپت پیاده سازی شده است.
🔗https://codepen.io/codesuey/pen/abPEyjo?editors=1010
#️⃣#code
🆔@IR_javascript
👍2
توابع خود فراخوان
این توابع با توابع معمولی متفاوت هستند - آنها در همان مکانی که اعلام شده اند اجرا می شوند.
لازم به ذکر است که این توابع نامی ندارند، به این معنی که نمی توانیم دوباره آنها را فراخوانی کنیم.
#️⃣#tip
🆔@IR_javascript
این توابع با توابع معمولی متفاوت هستند - آنها در همان مکانی که اعلام شده اند اجرا می شوند.
لازم به ذکر است که این توابع نامی ندارند، به این معنی که نمی توانیم دوباره آنها را فراخوانی کنیم.
#️⃣#tip
🆔@IR_javascript
السلام ای صاحب اسم کریم
السلام ای عبدالله الرحیم
من بسوزم از غم و رنج گناه
السلام ای مجتبی! ای عاصیان را تو نسیم
#️⃣#event
🆔@IR_javascript
السلام ای عبدالله الرحیم
من بسوزم از غم و رنج گناه
السلام ای مجتبی! ای عاصیان را تو نسیم
#️⃣#event
🆔@IR_javascript
❤11👎11
This media is not supported in your browser
VIEW IN TELEGRAM
Flash Message (Error/Success)
کارت های متحرک با متن "خطا" و "موفقیت". با استفاده از SCSS پیاده سازی شده است.
🔗https://codepen.io/juliepark/pen/vjMOKQ
#️⃣#code
🆔@IR_javascript
کارت های متحرک با متن "خطا" و "موفقیت". با استفاده از SCSS پیاده سازی شده است.
🔗https://codepen.io/juliepark/pen/vjMOKQ
#️⃣#code
🆔@IR_javascript
👍3
ویژگی capture اجازه می‌دهد تا هنگام آپلود از بتوان سخت‌افزار تلفن همراه (دوربین، میکروفون، و غیره) استفاده نمود
🔗https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
#️⃣#tip
🆔@IR_javascript
<label for="selfie">از صورت خود عکس بگیرید:</label>
<input type="file" id="selfie" name="selfie" accept="image/*" capture="user" />
<label for="picture">با دوربین پشتی عکس بگیرید:</label>
<input type="file" id="picture" name="picture" accept="image/*" capture="environment" />
<label for="soundFile">صدای شما چگونه است؟:</label>
<input type="file" id="soundFile" capture="user" accept="audio/*" />
🔗https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
#️⃣#tip
🆔@IR_javascript
accent-color
رنگ برخی از کنترل های رابط کاربری مثل checkbox radio range تنظیم می کند.
پشتیبانی در حال حاضر برای مرورگرها 93.61٪ است
🔗https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
#️⃣#tip #css
🆔@IR_javascript
رنگ برخی از کنترل های رابط کاربری مثل checkbox radio range تنظیم می کند.
accent-color: red;
پشتیبانی در حال حاضر برای مرورگرها 93.61٪ است
🔗https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
#️⃣#tip #css
🆔@IR_javascript
👍2
ویژگی CSS line-clamp به شما امکان می دهد متن را به تعداد مشخصی از خطوط محدود کنید و سپس بعد از آن ellipsis رخ خواهد داد.
#️⃣#tip #css
🆔@IR_javascript
p {
width: 300px;
display: -webkit-box;
-webkit-line-clamp: 3;
overflow: hidden;
}
#️⃣#tip #css
🆔@IR_javascript
👍5