CSS یا Cascading Style Sheets یک ابزار ضروری برای توسعه دهندگان وب و طراحان است. با CSS، می توانید طرح بندی، تایپوگرافی و ظاهر صفحات وب خود را کنترل کنید. در حالی که بسیاری از توسعه دهندگان با ویژگی های محبوب CSS مانند اندازه فونت و حاشیه آشنا هستند، بسیاری از ویژگی های کمتر شناخته شده CSS وجود دارند که می توانند به شما در ایجاد طراحی های وب زیباتر و کاربردی تر کمک کنند.
در این پست وبلاگ، نگاهی دقیق تر به شش ویژگی CSS خواهیم داشت که احتمالاً از آنها اطلاعی نداشتید.
1. متن-زیر خط افست
ویژگی text-underline-offset به شما این امکان را می دهد که فاصله بین متن خط دار شده و خود متن را کنترل کنید. این می تواند برای برجسته کردن زیر خط های شما یا ایجاد جلوه های متنی منحصر به فرد مفید باشد. مقدار این ویژگی یک طول است که بسته به اینکه چگونه می خواهید افست را تنظیم کنید، می تواند مثبت یا منفی باشد.
h1 {
text-decoration: underline;
text-underline-offset: 5px;
}
2. متن توجیه
ویژگی text-justify به شما این امکان را می دهد که نحوه تراز و فاصله گذاری متن در یک بلوک متن را کنترل کنید. این می تواند به ویژه برای ایجاد ستون هایی به سبک روزنامه یا برای قالب بندی متن در یک بلوک توجیه شده مفید باشد. مقدار این ویژگی را می توان روی auto، inter-word، inter-character یا distribute تنظیم کرد.
p {
text-align: justify;
text-justify: inter-word;
}
3. پس زمینه فیلتر
ویژگی Backdrop-filter به شما این امکان را می دهد که یک جلوه بصری در ناحیه پشت یک عنصر اعمال کنید. این می تواند برای ایجاد جلوه های تاری یا سیاه و سفید بر روی تصاویر یا عناصر دیگر مفید باشد. مقدار این ویژگی را می توان روی blur، grayscale، sepia یا هر تابع فیلتر CSS دیگری تنظیم کرد.
div {
backdrop-filter: blur(5px);
}
4. ستون-قاعده
ویژگی ستون-قاعده به شما امکان می دهد یک قانون عمودی بین ستون های متن در یک طرح چند ستونی اضافه کنید. این می تواند برای ایجاد یک جدایی بصری بین بخش های مختلف صفحه یا برای افزودن یک عنصر تزئینی به طراحی شما مفید باشد. ارزش این ویژگی یک سبک و رنگ حاشیه است.
div {
column-count: 3;
column-rule: 1px solid black;
}
5. متن محوری
ویژگی text-orientation به شما امکان می دهد جهت گیری متن را در یک عنصر بلوک کنترل کنید. این می تواند برای ایجاد طرح بندی متن عمودی یا قالب بندی متن در زبان هایی که به صورت عمودی خوانده می شوند، مانند ژاپنی مفید باشد. مقدار این ویژگی را می توان به صورت مختلط، عمودی یا جانبی تنظیم کرد.
div {
writing-mode: vertical-rl;
text-orientation: upright;
}
6. شکل بیرونی
ویژگی shape-outside به شما امکان می دهد متن را در اطراف یک شکل غیر مستطیلی مانند یک دایره یا چند ضلعی قرار دهید. این می تواند برای ایجاد طرح بندی متن های بصری جالب یا برای تراز کردن متن با تصاویر یا عناصر با شکل نامنظم مفید باشد. مقدار این ویژگی یک تابع شکل یا تصویر است.
img {
float: left;
shape-outside: circle();
width: 200px;
height: 200px;
margin: 20px;
}
در خاتمه، این شش ویژگی CSS تنها تعدادی از راه‌هایی هستند که می‌توانید از CSS برای ایجاد طراحی‌های وب زیبا و کاربردی استفاده کنید. با کاوش در ویژگی های کمتر شناخته شده CSS، می توانید فرصت های خلاقانه جدیدی را باز کنید و طراحی های وب خود را به سطح بعدی ببرید.
