⁣⁣⁣⁣⁣⁣🔥 کتابخانه Hover.css مجموعه ای از انیمیشن های مبتنی بر #CSS است که به صورت خاص فقط برای وضعیت hover عناصر ایجاد شده است.

انیمیشن های Hover.css را می توان تقریبا به هر عنصری اعمال کرد. به علاوه امکان سفارشی سازی آن ها در قالب CSS ، #Sass و #LESS نیز فراهم است.

🌐⁣http://ianlunn.github.io/Hover

#UI #frontend

✅ @coderszone

🔥 از #فریمورک #Electron می توان برای ساخت اپلیکیشن های دسکتاپ چند سکویی مناسب برای سیستم عامل های #ویندوز ، #Mac و #Linux با استفاده از #html ، #CSS و #javascript استفاده کرد.

🌐https://electronjs.org

#UI #frontend

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 وقتی متنی در صفحه موبایل نمایش داده میشود که کلمه/لینکی طولانی در آن وجود دارد، ممکن است باعث نمایش اسکرول بار افقی شود.

با استفاده از دستور word-break می توان از این مورد جلوگیری کرد:

.article-content p {
    word-break: break-all;
}   

#UI #frontend #css

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 تب #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