https://shoelace.style

#tool #CSS_Library

@CSSTricks

مقایسه معروفترین فریمورک های سی اس اس

sitepoint.com/most-popular-frontend-frameworks-compared

#framework #css

@CSSTricks

اشتباهاتی که نویسندگان استانداردهای سی اس اس اعتراف میکنند ک انجام دادند:


https://wiki.csswg.org/ideas/mistakes

#article #css

@CSSTricks

https://bcrikko.github.io/NES.css


#tool #css #framework

@CSSTricks

باور میکنید ک این عکس نباشه؟ 😐


https://codepen.io/ivorjetski/details/xMJoYO


#css #pure_css

@CSSTricks

#css #library

اینطور کتابخونه‌ها برای سریع پروتوتایپ کردن خیلی خوبن و ...

https://andybrewer.github.io/mvp

@CSSTricks

#css #library #windows

https://jdan.github.io/98.css


https://github.com/jdan/98.css

@CSSTricks

🎉🎉🎉🎉📣
پست جدید:

کامپوننت جدول قیمت (آماده برای استفاده)

Download: css-tricks.ir/?p=8500

Github: github.com/seyedi/pricing-table


#css #pricingtable

@CSSTricks

گپ اول با گرید اومد، بعدا فهمیدن عه! این خیلی خوبه برای همه چی داشته باشیم در نتیجه پیشوندش حذف شد.

در شرایط فعلی که همه مرورگرها بدون پیشوند گپ رو برای گرید پشتیبانی می‌کنند دیگه نیازی به نوشتنش نیست ولی اگر هم پروژه ای دارید که پیشوند داره، مشکلی نیست و کار میکنه فعلا.


پست گرید در سایت هم آپدیت شد چند وقت پیش، که اونایی که تازه گرید رو یاد میگیرن گیج نزنن و بجاش گپ بزنن:

https://css-tricks.ir/reference/grid/

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

اینم پست فلکس باکس در سایت محض احتیاط:

https://css-tricks.ir/reference/flexbox

#css #grid #flexbox #gap


@CSSTricks

#article #css

https://ishadeed.com/article/unusual-use-cases-pseudo-elements


آشنایی با شبه عناصر در سی‌اس‌اس:

https://css-tricks.ir/?p=107


@CSSTricks

غیر از اولی که من نوشتم اینا بهترین مقالات در مورد متغیرها در css هستند، حتما سر فرصت با دقت و بترتیب زیر بخونید نکته‌های ریزی دارند ک در پروژه‌های بزرگ خیلی اهمیت پیدا میکنن.


✅ css-tricks.ir/reference/css-variables


✅ ishadeed.com/article/css-vars-101


✅ increment.com/frontend/a-users-guide-to-css-variables


✅ css-tricks.com/using-custom-property-stacks-to-tame-the-cascade


اون 101 رو من نخوندم ولی مطمئنم از نویسندش. نکته های ریز تو دوتای آخر هستش.


#article #css #variable

@CSSTricks

#demo #css

https://codepen.io/amitsheen/pen/WNweryv


@CSSTricks

#tool #converter #syntax #css

تبدیل برعکسش یکم سختره و شاید این بدربخور باشه

https://css2js.dotenv.dev


@CSSTricks

#challenge #css


📣 سی‌اس‌اس کاران عزیز توجه فرمایید.

❓شما این باکس رو چطوری میسازین؟


می‌تونید یک پن توی کدپن بسازید و لینکش رو کامنت همین پست کنین، از روی دست هم نیز نگاه کنید چون حال میده 😄


@CSSTricks

#demo #css #transition #hover

https://codepen.io/saranya-mohan/pen/WNGjWWd


@CSSTricks

#video #css #position

https://css-tricks.ir/?p=8485


@CSSTricks


نکته: الان متوجه شدم یک سوتی دادم توی ویدئو در مورد z-index فوتر، اصلا اونجا z-index نیاز نیست دیگه چون به main دارم z-index رو میدم. پس مال فوتر اضافه ست در این مثال.
شاید شما نیاز داشته باشین توی مورد خودتون.

404 DIV NOT FOUND

Works only on Chrome 85+ , Edge 85+ and Opera 71+

https://codepen.io/abxlfazl/full/xxRqVXa
https://twitter.com/abxlfazl1/status/1361626571803561986

#tool #css #syntax

خیلی باحاله این

http://apps.workflower.fi/vocabs/css/en

آخر این پست هم گذاشتم:


https://css-tricks.ir/?p=4309


بهتر دارین بیارین


@CSSTricks