​​احتمالا دقت کردید که برای ایجاد گرادینت در CSS باید گرادینت را در راستای شکلی خاص مانند خط (linear) یا دایره (radial) تعریف کنیم.

اما با ترفندی که در تصویر می‌بینید می‌توانیم با ترکیب چند گرادینت و blend-mode گرادینتی بدون شکل واضح درست کنیم‌ (مثل گرادینتی که احتمالا در صفحه ورود اینستاگرام دیدید)

#quicktip #css #trick

@ProGraphs

​احتمالا شما هم با این مشکل مواجه شده‌اید که یک متن را روی یک تصویر قرار دهید و تشابه رنگ متن و تصویر باعث ناخوانا شدن متن در بعضی نقاط شود.

برای حل این مشکل با استفاده از mix-blend-mode می‌توانیم خیلی ساده و فقط با CSS، در همه‌ی نقاط بین متن و تصویر contrast ایجاد کنیم.

#quicktip #css #trick

@ProGraphs

در گوگل کروم می‌توانیم داخل یک پنجره‌ی devtools، یک devtools دیگر باز کنیم (یعنی devtools برای devtools)!

در این ویدیو با استفاده از این قابلیت فریم‌های کند برنامه را پیدا می‌کنیم.

#quicktip #devtools #trick

@ProGraphs

یک کاربرد جالب spread operator برای اضافه کردن یک آیتم به آرایه/آبجکت به صورت شرطی.

#quicktip #js #trick

@ProGraphs

فرض کنید بر روی یک عنصر هم translate، هم scale و هم rotate اعمال کرده‌ایم.

حالا می‌خواهیم در حالت hover، فقط مقدار rotate را تغییر دهیم.
متاسفانه برای این کار مجبوریم تمام مقادیر قبلی را هم تکرار کنیم!

با استفاده از متغیرهای CSS می‌توانیم این مشکل را حل کنیم (ویدیو را ببینید).

#quicktip #css #trick

@ProGraphs

​پراپرتی transform-style در CSS مشخص می‌کند که فرزندان یک عنصر در یک سطح صاف هستند، یا باید در یک فضای سه بعدی نمایش داده شوند.

به این ترتیب با استفاده از transform: rotate و transform-style می‌توانیم یک عنصر را دور یک عنصر دیگر قرار دهیم!

codepen.io/prographs/pen/Rwwgwmo

#quicktip #css #trick

@ProGraphs

​احتمالا دقت کرده‌اید که وقتی می‌خوایم یه پراپرتی CSS رو تو حالت hover یا ... تغییر بدیم، مجبوریم اون پراپرتی رو دوباره با مقادیر جدید تکرار کنیم.

اما حالا با متغیرهای CSS و تابع calc میتونیم بدون تکرار کردن دوباره‌ی پراپرتی‌ها، بین دو مقدار switch کنیم. به عنوان مثال:

transform: rotate(calc(var(--i) * 45deg));
top: calc(var(--i) * 10px);

توی این کد اگر متغیر i = 0 باشه، عنصرمون rotate و top نداره.
حالا برای اینکه عنصر رو 45deg بچرخونیم و top 10px بهش بدیم، فقط کافیه مقدار متغیر i رو 1 کنیم!

دقت کنید که تو این ترفند داریم از ویژگی live بودن متغیرهای CSS استفاده می‌کنیم. پس با متغیرهای SASS نمیتونیم این کار رو انجام بدیم.

برای مقایسه‌ی بهتر، توی ویدیو پراپرتی‌های transform و background رو با استفاده از این ترفند (بدون تکرار کردن کردن پراپرتی‌ها) تغییر میدیم.

#quicktip #css #trick #dry

@ProGraphs

​میدونیم که تغییر پراپرتی box-shadow با CSS جزو انیمیشن‌های نسبتا سنگین محسوب میشه و میتونه باعث کند شدن انیمیشن بشه.

اما با یه ترفند جالب میتونیم box-shadow یه عنصر رو خیلی روان‌تر animate کنیم.
به این صورت که یه pseudo element به اندازه‌ی خود عنصر تعریف میکنیم و box-shadow رو به این pseudo element میدیم. حالا کافیه opacity این pseudo element رو تغییر بدیم (به کد داخل عکس دقت کنید).

در واقع با این ترفند به جای پراپرتی box-shadow، پراپرتی opacity رو تغییر دادیم (animate کردن پراپرتی opacity برای مرورگر ساده‌تره)

کد کامل این ترفند رو میتونید اینجا ببینید.

ترفندهای مشابه برای تغییر بهینه‌تر طول و عرض عنصر هم وجود داره که در مطالب بعدی بررسی میکنیم :)

#quicktip #css #performance #trick

@ProGraphs