prefers-color-scheme
این مدیا کویری به شما امکان می‌دهد تا مشخص کنید که کاربر از تم روشن یا تیره سیستم عامل استفاده می‌کند یا خیر و بر اساس آن، سبک‌های مناسب را در صفحه وب اعمال کنید.
می‌توانید از prefers-color-scheme در پرس‌وجوهای رسانه‌ای CSS برای اعمال سبک‌های مختلف بر اساس ترجیح تم کاربر استفاده کنید. به عنوان مثال:
🔗https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
#️⃣#tip
🆔@IR_javascript
این مدیا کویری به شما امکان می‌دهد تا مشخص کنید که کاربر از تم روشن یا تیره سیستم عامل استفاده می‌کند یا خیر و بر اساس آن، سبک‌های مناسب را در صفحه وب اعمال کنید.
می‌توانید از prefers-color-scheme در پرس‌وجوهای رسانه‌ای CSS برای اعمال سبک‌های مختلف بر اساس ترجیح تم کاربر استفاده کنید. به عنوان مثال:
CSS
@media (prefers-color-scheme: light) {
body {
background-color: #fff;
color: #000;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #fff;
}
}
🔗https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
#️⃣#tip
🆔@IR_javascript
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
kaboom—یک کتابخانه جاوا اسکریپت است که به شما کمک می‌کند تا به سرعت و به راحتی بازی بسازید. این کتابخانه با رابط کاربری ساده و مستندات جامع خود، ساخت بازی‌های دو بعدی را برای توسعه‌دهندگان در هر سطحی آسان می‌کند.
🔗https://kaboomjs.com/
#️⃣#npm_module
🆔@IR_javascript
🔗https://kaboomjs.com/
#️⃣#npm_module
🆔@IR_javascript
👍1
WYSIWYG (از انگلیسی "What You See Is What You Get") اصطلاحی در رابط کاربری گرافیکی تعاملی است که به کاربران امکان می دهد نتایج اعمال خود را به طور مستقیم در حین انجام آنها مشاهده کنند.
به عبارت ساده، آنچه روی صفحه می بینید همان چیزی است که بعد از ذخیره شدن دریافت می کنید.
دو ویرایشگر برتر WYSIWYG که به راحتی قابل ادغام هستند:
CKEditor — به شما امکان می دهد متن را قالب بندی کنید، تصاویر، جداول را وارد کنید، به PDF و Word صادر کنید و کارهای زیادی را انجام دهید. تنظیمات و گزینه های زیادی برای تغییر رفتار و ظاهر وجود دارد. یک نسخه رایگان و همچنین یک نسخه پولی با ویژگی های اضافی در دسترس است.
Quill — دسترسی دقیق به محتوای ویرایشگر. API ساده و در دسترس، منبع باز. رایگان، سبک وزن، با پشتیبانی از تم های سفارشی.
سایر گزینه های جالب: Slate، Draft.js، TipTap.
#️⃣#npm_module
🆔@IR_javascript
به عبارت ساده، آنچه روی صفحه می بینید همان چیزی است که بعد از ذخیره شدن دریافت می کنید.
دو ویرایشگر برتر WYSIWYG که به راحتی قابل ادغام هستند:
CKEditor — به شما امکان می دهد متن را قالب بندی کنید، تصاویر، جداول را وارد کنید، به PDF و Word صادر کنید و کارهای زیادی را انجام دهید. تنظیمات و گزینه های زیادی برای تغییر رفتار و ظاهر وجود دارد. یک نسخه رایگان و همچنین یک نسخه پولی با ویژگی های اضافی در دسترس است.
Quill — دسترسی دقیق به محتوای ویرایشگر. API ساده و در دسترس، منبع باز. رایگان، سبک وزن، با پشتیبانی از تم های سفارشی.
سایر گزینه های جالب: Slate، Draft.js، TipTap.
#️⃣#npm_module
🆔@IR_javascript
👍1
واحد های اندازه گیری CSS (قسمت اول)
px اساسی ترین واحد اندازه گیری است. تعداد پیکسل ها در تنظیمات رزولوشن صفحه نمایش تنظیم می شود، یک پیکسل دقیقاً یک پیکسل روی صفحه نمایش است. برای تعیین دقیق اندازه ها استفاده می شود.
mm, cm, pt و pc واحدهای اندازه گیری مشتق شده از px هستند. مرورگر این مقادیر را به پیکسل تبدیل می کند.
em اندازه را نسبت به فونت والد تنظیم می کند. به عنوان مثال، 1em اندازه فعلی فونت است و 1.5em 1.5 برابر بزرگتر است. می توانید هر تناسبی را از فونت فعلی بگیرید: 2em، 0.5em و غیره.
rem (ترکیبی از px و em) اندازه را نسبت به فونت <html> تنظیم می کند.
% - به طور کلی، درصدی از ابعاد والد خواهد بود (به طور کلی، اما همیشه نه). برای عرض ها، ارتفاعات و غیره استفاده می شود، باید بدانید که بر اساس چه چیزی درصدها را محاسبه می کند.
vw — یک درصد از عرض پنجره دید.
vh — یک درصد از ارتفاع پنجره دید.
vmin — کوچکترین (vw, vh).
vmax — بزرگترین (vw, vh).
#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript
px اساسی ترین واحد اندازه گیری است. تعداد پیکسل ها در تنظیمات رزولوشن صفحه نمایش تنظیم می شود، یک پیکسل دقیقاً یک پیکسل روی صفحه نمایش است. برای تعیین دقیق اندازه ها استفاده می شود.
mm, cm, pt و pc واحدهای اندازه گیری مشتق شده از px هستند. مرورگر این مقادیر را به پیکسل تبدیل می کند.
em اندازه را نسبت به فونت والد تنظیم می کند. به عنوان مثال، 1em اندازه فعلی فونت است و 1.5em 1.5 برابر بزرگتر است. می توانید هر تناسبی را از فونت فعلی بگیرید: 2em، 0.5em و غیره.
rem (ترکیبی از px و em) اندازه را نسبت به فونت <html> تنظیم می کند.
% - به طور کلی، درصدی از ابعاد والد خواهد بود (به طور کلی، اما همیشه نه). برای عرض ها، ارتفاعات و غیره استفاده می شود، باید بدانید که بر اساس چه چیزی درصدها را محاسبه می کند.
vw — یک درصد از عرض پنجره دید.
vh — یک درصد از ارتفاع پنجره دید.
vmin — کوچکترین (vw, vh).
vmax — بزرگترین (vw, vh).
#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript
❤2
واحد های اندازه گیری CSS (قسمت دوم)
svh : کوچکترین ارتفاع ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. این واحد شامل هیچ عنصر رابط کاربری نمی شود.
lvh: بلندترین ارتفاع ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. این واحد شامل تمام عناصر رابط کاربری مانند نوار آدرس می شود.
dvh : ارتفاع فعلی ناحیه دید را نشان می دهد. این واحد بر خلاف واحد vh شامل عناصر رابط کاربری نمی شود و با تغییر ارتفاع ناحیه دید، مقدار آن نیز تغییر می کند.
svw : کوچکترین عرض ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. مقدار این واحد ثابت است و با تغییر عرض ناحیه دید، تغییر نمی کند.
lvw : بلندترین عرض ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. مقدار این واحد نیز مانند svw ثابت است.
dvw : عرض فعلی ناحیه دید را نشان می دهد. این واحد مقدار پویایی دارد و با تغییر عرض ناحیه دید، مقدار آن نیز تغییر می کند.
#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript
svh : کوچکترین ارتفاع ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. این واحد شامل هیچ عنصر رابط کاربری نمی شود.
lvh: بلندترین ارتفاع ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. این واحد شامل تمام عناصر رابط کاربری مانند نوار آدرس می شود.
dvh : ارتفاع فعلی ناحیه دید را نشان می دهد. این واحد بر خلاف واحد vh شامل عناصر رابط کاربری نمی شود و با تغییر ارتفاع ناحیه دید، مقدار آن نیز تغییر می کند.
svw : کوچکترین عرض ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. مقدار این واحد ثابت است و با تغییر عرض ناحیه دید، تغییر نمی کند.
lvw : بلندترین عرض ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. مقدار این واحد نیز مانند svw ثابت است.
dvw : عرض فعلی ناحیه دید را نشان می دهد. این واحد مقدار پویایی دارد و با تغییر عرض ناحیه دید، مقدار آن نیز تغییر می کند.
#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript
👍2
JsBarcode
JsBarcode یک کتابخانه JavaScript برای تولید بارکد در صفحات وب است. این کتابخانه به شما امکان می دهد انواع مختلف بارکد مانند EAN، CODE128، CODE39 و موارد دیگر را ایجاد کنید.
به طور خلاصه، JsBarcode انتخابی عالی برای زمانی است که نیاز به تولید بارکد دارید، زیرا راه حلی ساده و کارآمد در سناریوهای مختلف ارائه می دهد.
نحوه اتصال:
JsBarcode را متصل کنید:
یک بارکد ایجاد کنید:
نکات مهم:
قابل استفاده در: svg، canvas یا img
پشتیبانی از پارامترهای مختلف: برای تنظیم ظاهر بارکد
🔗 https://github.com/lindell/JsBarcode
#️⃣#npm_module
🆔@IR_javascript
JsBarcode یک کتابخانه JavaScript برای تولید بارکد در صفحات وب است. این کتابخانه به شما امکان می دهد انواع مختلف بارکد مانند EAN، CODE128، CODE39 و موارد دیگر را ایجاد کنید.
به طور خلاصه، JsBarcode انتخابی عالی برای زمانی است که نیاز به تولید بارکد دارید، زیرا راه حلی ساده و کارآمد در سناریوهای مختلف ارائه می دهد.
نحوه اتصال:
JsBarcode را متصل کنید:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script>
یک بارکد ایجاد کنید:
JsBarcode("#barcode", "Katerina | PRO Frontend", {
format: "CODE128",
width: 2,
height: 100,
displayValue: true,
font: "Arial",
textAlign: "center",
lineColor: "#d14bd5",
});نکات مهم:
قابل استفاده در: svg، canvas یا img
پشتیبانی از پارامترهای مختلف: برای تنظیم ظاهر بارکد
🔗 https://github.com/lindell/JsBarcode
#️⃣#npm_module
🆔@IR_javascript
❤1👍1
With یک متد جدید که در ECMAScript 2023 معرفی شده است و راهی آسان برای انجام یک کار بسیار خاص ارائه می دهد: اصلاح یک آرایه و ایجاد یک کپی از آن.
بیایید آن را با یک مثال تجزیه و تحلیل کنیم:
روش with دو آرگومان می پذیرد: شاخصی که جایگزینی در آن رخ می دهد و مقدار جدید.
#️⃣#tip
🆔@IR_javascript
بیایید آن را با یک مثال تجزیه و تحلیل کنیم:
const nums = [1, 2, 3, 4];
const newNums = nums.with(1, 'string');
console.log(newNums); // [1, 'string', 3, 4]
روش with دو آرگومان می پذیرد: شاخصی که جایگزینی در آن رخ می دهد و مقدار جدید.
#️⃣#tip
🆔@IR_javascript
🔥2
Microsoft Designer for Web
یک شبکه عصبی رایگان از مایکروسافت طرح ها و تصاویر را بر اساس توضیحات تولید می کند.
🔗https://designer.microsoft.com/
#️⃣#tool
🆔@IR_javascript
یک شبکه عصبی رایگان از مایکروسافت طرح ها و تصاویر را بر اساس توضیحات تولید می کند.
🔗https://designer.microsoft.com/
#️⃣#tool
🆔@IR_javascript
👍1
is() در CSS
به شما امکان می دهد تا چندین انتخاب کننده را در یک انتخاب کننده واحد گروه بندی کنید، که این امر نوشتن CSS را آسان تر می کند.
نحوه استفاده:
در مثال بالا، این کد CSS هر عنصر .cart__number را که روی آن هاور شده یا روی آن ها تمرکز شده است، هدف قرار می دهد و رنگ و outline آن ها را تغییر می دهد.
مزایای استفاده از is():
[1] کد را خواناتر می کند: با گروه بندی چندین selector در یک selector واحد، می توانید کد CSS خود را خواناتر و سازمان یافته تر کنید.
[2] نگهداری را آسان تر می کند: اگر نیاز به تغییر نحوه انتخاب عناصر دارید، فقط باید یک انتخاب کننده را در is() تغییر دهید، به جای اینکه چندین انتخاب کننده را به طور جداگانه تغییر دهید.
[3] پشتیبانی مرورگر: در حال حاضر توسط 97.68٪ از مرورگرها پشتیبانی می شود.
#️⃣#tip #css
🆔@IR_javascript
به شما امکان می دهد تا چندین انتخاب کننده را در یک انتخاب کننده واحد گروه بندی کنید، که این امر نوشتن CSS را آسان تر می کند.
نحوه استفاده:
CSS
.cart__number:is(:hover, :focus) {
outline: 1px solid var(--accent);
color: var(--accent);
}
در مثال بالا، این کد CSS هر عنصر .cart__number را که روی آن هاور شده یا روی آن ها تمرکز شده است، هدف قرار می دهد و رنگ و outline آن ها را تغییر می دهد.
مزایای استفاده از is():
[1] کد را خواناتر می کند: با گروه بندی چندین selector در یک selector واحد، می توانید کد CSS خود را خواناتر و سازمان یافته تر کنید.
[2] نگهداری را آسان تر می کند: اگر نیاز به تغییر نحوه انتخاب عناصر دارید، فقط باید یک انتخاب کننده را در is() تغییر دهید، به جای اینکه چندین انتخاب کننده را به طور جداگانه تغییر دهید.
[3] پشتیبانی مرورگر: در حال حاضر توسط 97.68٪ از مرورگرها پشتیبانی می شود.
#️⃣#tip #css
🆔@IR_javascript
👍2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Theatre.js یک کتابخانه انیمیشن جاوااسکریپت با مجموعه ابزار طراحی حرکت حرفه‌ای است. این کتابخانه به شما کمک می‌کند تا هر نوع انیمیشنی را، از صحنه‌های سینمایی گرفته تا تعاملات دلنشین رابط کاربری، ایجاد کنید.
🔗 https://www.theatrejs.com/
#️⃣#npm_module
🆔@IR_javascript
🔗 https://www.theatrejs.com/
#️⃣#npm_module
🆔@IR_javascript
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
منجا: Fruit Ninja با جاوا اسکریپت
معرفی منجا:
منجا یک بازی جذاب شبیه به Fruit Ninja است که با استفاده از زبان برنامه نویسی جاوا اسکریپت و بدون نیاز به هیچ فریم‌ورک خارجی توسعه یافته است. این بازی به عنوان جانشین معنوی Fruit Ninja شناخته می‌شود و با ارائه ظاهری هندسی و منحصر به فرد، تجربه‌ای جدید و سرگرم‌کننده را به ارمغان می‌آورد.
در منجا، وظیفه‌ی شما برش و نابودی بلوک‌های رنگارنگی است که از جهات مختلف به سمت شما پرتاب می‌شوند. برای انجام این کار، باید از انگشت یا موس خود برای هدایت تیغه و برش دقیق بلوک‌ها استفاده کنید. دقت داشته باشید که نباید اجازه دهید هیچ بلوکی از صفحه بازی خارج شود، در غیر این صورت امتیاز خود را از دست خواهید داد.
🔗https://codepen.io/MillerTime/details/BexBbE
#️⃣#code
🆔@IR_javascript
معرفی منجا:
منجا یک بازی جذاب شبیه به Fruit Ninja است که با استفاده از زبان برنامه نویسی جاوا اسکریپت و بدون نیاز به هیچ فریم‌ورک خارجی توسعه یافته است. این بازی به عنوان جانشین معنوی Fruit Ninja شناخته می‌شود و با ارائه ظاهری هندسی و منحصر به فرد، تجربه‌ای جدید و سرگرم‌کننده را به ارمغان می‌آورد.
در منجا، وظیفه‌ی شما برش و نابودی بلوک‌های رنگارنگی است که از جهات مختلف به سمت شما پرتاب می‌شوند. برای انجام این کار، باید از انگشت یا موس خود برای هدایت تیغه و برش دقیق بلوک‌ها استفاده کنید. دقت داشته باشید که نباید اجازه دهید هیچ بلوکی از صفحه بازی خارج شود، در غیر این صورت امتیاز خود را از دست خواهید داد.
🔗https://codepen.io/MillerTime/details/BexBbE
#️⃣#code
🆔@IR_javascript
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
vscodethemes یک وب‌سایت است که به شما امکان می‌دهد تم‌های مختلفی را برای ویرایشگر کد VS Code خود پیدا کنید. این وب‌سایت شامل طیف گسترده‌ای از تم‌ها در سبک‌ها و رنگ‌های مختلف است، بنابراین مطمئناً تم مورد علاقه خود را پیدا خواهید کرد.
🔗https://vscodethemes.com/
#️⃣#tool
🆔@IR_javascript
🔗https://vscodethemes.com/
#️⃣#tool
🆔@IR_javascript
👍2
استفاده از gap به جای margin
چرا استفاده از gap بهتر از margin است؟
سهولت تغییر کد: در بسیاری از موارد، فاصله بین آیتم‌های لیست یکسان است. با استفاده از gap، می‌توانید این فاصله را فقط در یک مکان تعریف کنید و به جای تغییر margin تک تک آیتم‌ها، آن را به آسانی تغییر دهید.
کد تمیزتر: استفاده از gap به جای margin باعث می‌شود کد شما تمیزتر و خواناتر شود و از تکرار و پراکندگی استایل‌ها جلوگیری می‌کند.
عملکرد بهتر: مرورگرها می‌توانند به طور موثرتری gap را در یک ساختار شبکه‌ای پردازش کنند، در حالی که برای هر عنصر به طور جداگانه margin محاسبه می‌کنند.
مثالی از استفاده از gap:
در این مثال، ازgap برای تعریف فاصله بین آیتم‌های .item در داخل container استفاده شده است. با این کار دیگر نیازی به تعریف margin جداگانه برای هر آیتم نیست.
نکاتی برای استفاده از gap:
از row-gap و column-gap برای تنظیم فاصله در راستای افقی و عمودی به طور جداگانه استفاده کنید.
gap به طور پیش فرض برای هر دو جهت افقی و عمودی اعمال می‌شود.
#️⃣#tip
🆔@IR_javascript
چرا استفاده از gap بهتر از margin است؟
سهولت تغییر کد: در بسیاری از موارد، فاصله بین آیتم‌های لیست یکسان است. با استفاده از gap، می‌توانید این فاصله را فقط در یک مکان تعریف کنید و به جای تغییر margin تک تک آیتم‌ها، آن را به آسانی تغییر دهید.
کد تمیزتر: استفاده از gap به جای margin باعث می‌شود کد شما تمیزتر و خواناتر شود و از تکرار و پراکندگی استایل‌ها جلوگیری می‌کند.
عملکرد بهتر: مرورگرها می‌توانند به طور موثرتری gap را در یک ساختار شبکه‌ای پردازش کنند، در حالی که برای هر عنصر به طور جداگانه margin محاسبه می‌کنند.
مثالی از استفاده از gap:
CSS
.container {
display: grid;
gap: 20px;
}
در این مثال، ازgap برای تعریف فاصله بین آیتم‌های .item در داخل container استفاده شده است. با این کار دیگر نیازی به تعریف margin جداگانه برای هر آیتم نیست.
نکاتی برای استفاده از gap:
از row-gap و column-gap برای تنظیم فاصله در راستای افقی و عمودی به طور جداگانه استفاده کنید.
gap به طور پیش فرض برای هر دو جهت افقی و عمودی اعمال می‌شود.
#️⃣#tip
🆔@IR_javascript
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
NEAT یک ابزار آنلاین و رایگان است که به شما امکان می‌دهد انیمیشن‌های گرادیانتی جذاب و چشم‌نواز برای وب‌سایت خود ایجاد کنید. با استفاده از این ابزار، می‌توانید بدون نیاز به دانش برنامه‌نویسی یا CSS، انیمیشن‌های سفارشی و متحرک بسازید و به وب‌سایت خود ظاهری منحصر به فرد و پویا ببخشید.
🔗https://neat.firecms.co/
#️⃣#tool
🆔@IR_javascript
🔗https://neat.firecms.co/
#️⃣#tool
🆔@IR_javascript
👍3
رازهای بارگذاری سریع‌تر صفحات وب
Prefetch:
با استفاده از این روش، به مرورگر خود می‌گویید که تعدادی از منابع خاص را "از قبل بارگیری" کند. این کار به این معنی است که هنگامی که کاربر به این منابع نیاز پیدا می‌کند، مرورگر آنها را از قبل در حافظه کش خود ذخیره کرده و می‌تواند آنها را به سرعت نمایش دهد، بدون اینکه منتظر بارگیری آنها از سرور بماند.
مزایای Prefetch:
کاهش زمان بارگذاری صفحه
بهبود تجربه کاربری
کاهش بار سرور
Preload شبیه به Prefetch است، اما با یک تفاوت ظریف Preload به طور خاص به مرورگر می‌گوید که منابع مشخص شده "ضروری" هستند و باید "بلافاصله" بارگیری شوند. این روش برای منابعی که برای نمایش اولیه صفحه ضروری هستند، مانند فایل CSS اصلی یا اسکریپت جاوا اسکریپت، بسیار مفید است.
مزایای Preload:
بارگذاری سریع‌تر محتوای اصلی
بهبود زمان اولین محتوای قابل مشاهده
تجربه کاربری روان‌تر
استفاده از Prefetch و Preload با هم:
Prefetch را برای منابعی که احتمالاً در آینده مورد نیاز خواهند بود، اما ضروری نیستند، و Preload را برای منابعی که برای نمایش اولیه صفحه ضروری هستند، استفاده کنید.
#️⃣#tip
🆔@IR_javascript
Prefetch:
با استفاده از این روش، به مرورگر خود می‌گویید که تعدادی از منابع خاص را "از قبل بارگیری" کند. این کار به این معنی است که هنگامی که کاربر به این منابع نیاز پیدا می‌کند، مرورگر آنها را از قبل در حافظه کش خود ذخیره کرده و می‌تواند آنها را به سرعت نمایش دهد، بدون اینکه منتظر بارگیری آنها از سرور بماند.
مزایای Prefetch:
کاهش زمان بارگذاری صفحه
بهبود تجربه کاربری
کاهش بار سرور
Preload شبیه به Prefetch است، اما با یک تفاوت ظریف Preload به طور خاص به مرورگر می‌گوید که منابع مشخص شده "ضروری" هستند و باید "بلافاصله" بارگیری شوند. این روش برای منابعی که برای نمایش اولیه صفحه ضروری هستند، مانند فایل CSS اصلی یا اسکریپت جاوا اسکریپت، بسیار مفید است.
مزایای Preload:
بارگذاری سریع‌تر محتوای اصلی
بهبود زمان اولین محتوای قابل مشاهده
تجربه کاربری روان‌تر
استفاده از Prefetch و Preload با هم:
Prefetch را برای منابعی که احتمالاً در آینده مورد نیاز خواهند بود، اما ضروری نیستند، و Preload را برای منابعی که برای نمایش اولیه صفحه ضروری هستند، استفاده کنید.
#️⃣#tip
🆔@IR_javascript
🔥2❤1👍1
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Shape — ابزاری که می‌توانند برای ایجاد طیف وسیع‌تری از اشکال مورد استفاده قرار بگیرند.
نکات برجسته:
تنوع باورنکردنی اشکال
قابلیت برش و پیکربندی برخی از اشکال
سادگی و ظرافت در طراحی
کاربردها:
ایجاد دکمه‌ها و آیکون‌های جذاب
طراحی جداکننده‌ها و بخش‌های مختلف صفحه
افزودن جزئیات بصری به طرح کلی
🆔https://css-tricks.com/the-shapes-of-css/
#️⃣#tip
🆔@IR_javascript
نکات برجسته:
تنوع باورنکردنی اشکال
قابلیت برش و پیکربندی برخی از اشکال
سادگی و ظرافت در طراحی
کاربردها:
ایجاد دکمه‌ها و آیکون‌های جذاب
طراحی جداکننده‌ها و بخش‌های مختلف صفحه
افزودن جزئیات بصری به طرح کلی
🆔https://css-tricks.com/the-shapes-of-css/
#️⃣#tip
🆔@IR_javascript
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
View transitions (Chrome 115+)
🔗https://codepen.io/joshsanger-the-looper/pen/WNLoaOg
#️⃣#code
🆔@IR_javascript
🔗https://codepen.io/joshsanger-the-looper/pen/WNLoaOg
#️⃣#code
🆔@IR_javascript
👍1