⁣⁣⁣⁣⁣⁣🔥 تب #coverage در #DevTools مرورگر #کروم، به شما نشان می دهد که چه حجم از کد های #CSS یا #javascript در صفحه شما بلا استفاده اند.

#forntend #UI #chrome #browser

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 بولما (Bulma) یکی از فریم ورک های #CSS مبتنی بر #flexbox و mobile-first است که از هیچ کد #javascript در آن استفاده نشده است. در واقع شما برای استفاده از آن نیاز به الحاق هیچ فایل js ندارید.

🌐https://bulma.io

#UI #frontend

✅ @coderszone

🔥 چالش #10yearschallenge در وسط چین کردن عناصر با #CSS

🌐 https://codepen.io/MartijnCuppens/pen/roXJxe

#UI #frontend

✅@coderszone

🔥 نمونه کاربرد position:sticky در #CSS


🌐 https://goo.gl/hKZttf

#UI #frontend

✅ @coderszone

🔥 روش خلاقانه در استفاده از #clip_path برای پیاده سازی #input های جذاب

Demo:
🌐 https://goo.gl/srLLcY

#frontend #CSS #UI

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 ساختارهای #navigation تو در تو که در sidebar ها قرار می گیرند خیلی زود عمیق و پیچیده می شوند.

یک روش جایگزین عالی این است که طرح خود را به بخش های دیگری تقسیم کرده و در هر بخش navigation خاص خودش را قرار دهید.

#UI #UX #frontend #CSS

✅ @coderszone

🔥 مجموعه ای از انیمیشن های ساخت #همبرگر_منو با #CSS

🌐 https://goo.gl/AXSThW

#frontend #UI

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 وقتی که نقاط ابتدا یا انتهای gradient ها را transparent می کنید مرورگر #safari آن ها را به صورت سیاه و سفید نمایش می دهد. دلیل هم این است که این مرورگر کلا گزینه trasparent را نمی شناسد.

با جایگزینی (0, 0, 0, 0)rgba می توان این مشکل را حل نمود.

.section-hero {
  background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0;
  /*Other styles*/
}

#frontend #UI #CSS #browser

✅ @coderszone

🔥 مقدار خاصیت line-height در #مرورگرها به صورت پیش فرض 1.2 است. بر اساس بررسی ها بهترین اندازه برای این خاصیت حداقل 1.5 است.

استفاده از line-height مناسب نه تنها باعث خوانایی بهتر متون می شود، بلکه از نگاه بصری نیز جلوه بهتری دارد.

#frontend #UI #UX #CSS #HTML

✅ @coderszone

🔥 یکی از قابلیت های جدید در #chrome74 این است که وقتی بر روی یکی از خصوصیات #CSS که بر روی #box_model تاثیر دارند می روید (مانند padding و margin)، #کروم تمامی عناصری که تحت تاثیر آن خاصیت قرار دارند را highlight می کند.

#UI #frontEnd #browser

✅ @coderszone

🔥 نکته ای که احتمالا در زمینه #HTML و #CSS نمی دانید.

کاربرد بسیار جالب تگ های #detail و #summery

#UI #UX #frontend

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 وقتی از دستورات display: inline-block یا display: inline برای چند عنصر کنار هم استفاده می کنید، یک فضای کوچک در بین آن ها ایجاد خواهد شد. دلیل هم این است که مرورگرها اغلب، آن ها را یک "کلمه" تعبیر کرده و در نتیجه یک کاراکتر space بین آن ها ایجاد می کنند.

در مثال زیر و تصویری که می بینید یک فاصله 8 پیکسی در سمت راست هر عنصر تنظیم شده است که به دلیل افزودن فضای مربوط به دستور display: inline-block این فاصله به 12px افزایش پیدا کرده است.

li:not(:last-child) {
  margin-right: 8px;
}

#UI #frontend #CSS

✅ @coderszone

🔥 استفاده خلاقانه از خاصیت clip_path.

همانطور که مشاهده می کنید از تصویر هر #برند جهت پیاده سازی یک طرح ورود زیبا استفاده شده است.

نمونه کد :

🌐 https://bit.ly/2JrT3Gh

#UI #UX #frontend #CSS

✅ @coderszone

🔥 خلاقیت در استفاده از خاصیت clip-path و gradient ها برای ایجاد یک #effect زیبا در حالت #hover

نمونه کد :

🌐 https://codepen.io/ainalem/details/byqBNK

#UI #frontend #CSS

✅ @coderszone

🔥 ابزاری جهت تولید گریدهای #CSS

🌐 cssgrid-generator.netlify.com

#frontend #UI

✅ @coderszone

🔥 اغلب می خواهیم عناصری که دارای #محتوا هستند را استایل دهی کنیم. اما مواقعی نیز وجود دارد که مایلیم عناصر فاقد محتوا را استایل بدهیم. برای این کار می توانید از #گزینشگر empty: استفاده کنید.

#frontend #UI #CSS

✅ @coderszone

🔥 استفاده از خاصیت line-clamp برای مدیریت تعداد خطوط نمایشی در #CSS

#UI #frontend

✅ @coderszone

🔥 با استفاده از خاصیت tab-size در #CSS می توانید مشخص کنید که Tab ها دقیقا چقدر فضای خالی اشغال کنند.

#UI #frontend

✅ @coderszone

🔥 روش وسط چین کردن عناصر به وسیله #flexbox

#CSS #UI #frontend

✅ @coderszone

🔥 کاربردهای گوناگون خاصیت align-items در #CSS

#UI #frontend

✅ @coderszone