آموزش روش BEM برای نامگذاری کلاس ها در طراحی صفحات وب

معرفی روش BEM برای نامگذاری کلاس‎ها

نگهداری و گسترش پروژه های بزرگ یکی از مهمترین مراحل توسعه است یکی از مباحثی که در این رابطه همیشه مطرح می شود نامگذاری کلاس ها می باشد که در این مطلب به معرفی روش BEM برای این موضوع می پردازیم.

shape-image-threshold

ویژگی shape-image-threshold مقدار کمینه شفافیت را برای ساخت یک شکل توسط ویژگی shape-outside تعیین می کند.

shape-margin

با استفاد از ویژگی shape-margin می توان یک فاصله بیرونی به عنصری که شکلی توسط ویژگی shape-outside روی آن اعمال شده است، ایجاد کرد.

ویژگی shape-outside در سی اس اس

shape-outside

از ویژگی shape-outside برای تغییر هندسی محیط اطراف یک عنصر شناور (دارای ویژگی float) استفاده می شود.

<basic-shape>

<basic-shape> همانطور که از نامش پیداست یک شکل پایه و ساده است که بوسیله یکی از توابع شکل تعریف می شود و سپس می توان آن شکل را به عنوان یک مقدار برای یکی از ویژگی های clip-path و یا shape-outside تنظیم کرد.

ویژگی clip-path در css

clip-path

با استفاده از ویژگی clip-path می توان قسمتی از یک عنصر HTML و یا SVG را برش داد.

تبدیل صفحه به حالت سیاه و سفید یا خاکستری در css

تبدیل صفحه وب به حالت سیاه و سفید

شاید این موقعیت برای ما بوجود بیاید که نیاز داشته باشیم در یک لحظه صفحه وب سایت را در حالت سیاه و سفید یا همان خاکستری ببینیم. شاید در نگاه اول این کار بسیار سخت باشد چرا که باید تمام رنگ متن ها، پس زمینه ها و خیلی موارد را تغییر دهیم

timing-fucntion های محبوب و پرکاربرد

timing-function های پرکاربرد

برای داشتن انیمیشن و ترنزیشن های واقعی تر و با معنا نیاز داریم تا مقدار timing-function را به خوبی تنظیم کنیم.

ویژگی Stroke در SVG

همانطور که از ویژگی های مربوط به Fill برای رنگ کردن داخل یک شکل استفاده می کنیم، ویژگی های مربوط به Stroke به ما این قابلیت را می دهند تا دور یک عنصر را رنگ کنیم. Stroke یک Outline یا خط بیرونی برای عناصر SVG می باشد.

ویژگی Fill در SVG

در مطالب قبل از ویژگی fill در مثال ها استفاده کردیم در این مطلب این ویژگی را بصورت کامل بررسی می کنیم. ویژگی های fill به ما این قابلیت را می دهند تا داخل یک عنصر SVG را نقاشی کنیم.