سلام به دوستان عزیز! امروز قصد داریم درباره‌ی برخی از ویژگی‌های مختلف و کمتر شناس در CSS صحبت کنیم. این ویژگی‌ها ممکن است در نگاه اول ساده به نظر برسند، اما توانایی ایجاد تغییرات بزرگی در طراحی صفحات وب را دارند.
شاید شما هم به دنبال راهی باشید که طراحی وبسایت خود را به سطح بالاتری ببرید، و البته طبیعی است که برای اینکار باید با برخی از تکنیک‌های و ویژگی‌های پیشرفته CSS آشنا شوید. این ویژگی‌ها به شما اجازه می‌دهند که با ایجاد تغییرات کوچک، نتایج بزرگی به دست آورید.
یکی از این تکنیک‌ها ممکن است استفاده از کلاس‌های CSS متفرقه باشد. این کلاس‌ها می‌توانند به صورت مکمل برای سبک دهی اصلی استفاده شوند و به شما اجازه می‌دهند که به طراحی خود جلوه بیشتری بدهید.
به عنوان مثال، شما می‌توانید برخی از عناصر را زمانی که کاربر روی آنها کلیک می‌کند یا ماوس را روی آنها می‌گیرد، به شکل متفاوتی نشان دهید. این ویژگی‌ها نه تنها به بهبود تجربه کاربری کمک می‌کنند بلکه باعث می‌شوند وبسایت شما حرفه‌ای‌تر به نظر بیاید.
مثال در CSS
<style>
.example {
transition: background-color 0.5s ease;
}
.example:hover {
background-color: lightblue;
}
</style>
<div class="example">
Hover over me!
</div>
توضیح کد:
<style> این خط نشان‌دهنده‌ی شروع یک بلوک سبک CSS است.
.example در اینجا ما یک کلاس CSS برای عناصر با این کلاس تعریف کرده‌ایم.
transitionاین ویژگی تعیین کننده‌ی چگونگی تغییر رنگ پس‌زمینه با سرعت معین است.
:hoverاستایل‌هایی را تعریف می‌کند که وقتی کاربر ماوس را روی عنصر می‌برد اعمال می‌شود.
<div class="example">ایجاد یک div با کلاس تعریف شده برای مشاهده تغییر هنگامی که ماوس روی آن نگه داشته می‌شود.