جلسه دوازدهم : پر کاربرد ترین کد های CSS – قسمت پنجم

جلسه دوازدهم : پر کاربرد ترین کد های CSS – قسمت پنجم

به جلسه پنجم از سری جلسات آموزشی «ویژگی های کاربردی CSS» خوش آمدید ! اگر قسمتهای قبلی این سری را هنوز مشاهده نکرده اید، پیشنهاد میکنم همین حالا قبل از شروع این جلسه ، سری به قسمت های قبل بزنید و آنها را با دقت یاد بگیرید. دلیلش هم اینه که چینش مطالب به ترتیب اهمیت بوده و دانستن مباحث قبلی کمک زیادی به درک بهتر این جلسه خواهد کرد ، ما در میهن آکادمی سعی داریم تا بیشترین و پرکاربرد ترین کد های CSS استفاده شده در وب سایت ها را برای شما آموزش دهیم.

خب، بریم سراغ اصل مطلب ! در این قسمت میخواهیم در مورد دو ویژگی جذاب و زیبا در CSS صحبت کنیم که میتونن ظاهر وبسایتتون رو کاملا متحول کنن. بله درست حدس زدید؛ میخواهیم با هم خاصیت های سایه (Shadow) آشنا بشیم! آمادهاید؟ پس بزن بریم! 🚀

آموزش اضافه کردن سایه به عناصر با CSS

همانطور که می دانید ما می توانیم در سایت خود با استفاده از کد نویسی های CSS هر تغییری که می خواهید را ایجاد کنید و ما اینجا با استفاده از کد نویسی CSS میتونیم به تمامی عناصر های مختلف سایت خود که با کد نویسی ایجاد کرده ایم مثل باکس ها، متن ها و حتی تصاویر سایه اضافه کنیم تا عمق و زیبایی بیشتری پیدا کنن. دو ویژگی اصلی یا همان دو تگ کاربردی برای این کار وجود داره که در قسمت زیر به شما توضیح می دهیم :

box-shadow برای اضافه کردن سایه به باکس ها و عناصر بلوکی

text-shadow برای اضافه کردن سایه به متن ها

box-shadow

با این ویژگی میتونیم به عناصر بلوکی (مثل divها، دکمه ها، کارت ها و…) سایه اضافه کنیم.

ساختار کلی دستور :

box-shadow: [افست-x] [افست-y] [شعاع-blur] [شعاع-spread] [رنگ];

• افست-x: فاصله سایه در جهت افقی (مثبت به راست، منفی به چپ).
• افست-y: فاصله سایه در جهت عمودی (مثبت به پایین، منفی به بالا).
• شعاع-blur: میزان محو بودن سایه (هرچه بزرگتر، نرمتر).
• شعاع-spread: اندازه گسترش سایه (اختیاری).
• رنگ: رنگ سایه (میتواند با rgba هم برای شفافیت تعریف شود).

🎯 مثال:

div {
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

این کد بالا به تمامی div سایت شما یک باکس شادو رنگی به مشخصات داده شده ایجاد می کند و نمایش می دهد که می تواند با استفاده از این باکس شادو به سایت شما یک تغییر رنگ مشخصی به باکس های سایت شما دهد و سایت شما را کمی بهتر و زیبا تر نمایش دهد.

text-shadow

برای اضافه کردن سایه به متن ها از text Shadow استفاده میشه که کار با این تکیه کد CSS خیلی راحت و آسان است و در زیر به شما این کد را آموزش می دهیم و ساختار کلی به این شکل می باشد :

text-shadow: [افست-x] [افست-y] [شعاع-blur] [رنگ];

• افست-x: فاصله سایه در جهت افقی.
• افست-y: فاصله سایه در جهت عمودی.
• شعاع-blur: میزان محو بودن سایه.
• رنگ: رنگ سایه.

🎯 مثال:

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

این کد بالا برای شما به تگ H1 سایت شما یک تکست شادو رنگی ملایم ایجاد کرده و نمایش می دهد که شما می توانید خیلی راحت با تغییر اعداد این کد مثال شده بالا در سایت خود شادو رنگی مناسبی به متن شما می دهد و باعث هایلایت شادو می شود

نکته پایانی

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