ساخت سایه در CSS با box-shadow و text-shadow

توی این جلسه قراره ساخت سایه در CSS رو قدم‌به‌قدم یاد بگیریم. CSS همون زبانیه که ظاهر قسمت‌های مختلف سایت، مثل رنگ‌ها، فاصله‌ها و سایه‌ها رو کنترل می‌کنه. اول با box-shadow برای کادرها سایه می‌سازیم. بعد هم به سراغ text-shadow می‌ریم و روی نوشته‌ها سایه می‌ذاریم.

در طول آموزش، معنی هر مقدار رو ساده و با مثال بررسی می‌کنیم. چند نمونه‌کد قابل‌کپی هم می‌بینید تا بتونید همون لحظه نتیجه رو امتحان کنید. اگه جلسه‌های قبلی رو نخوندید، بهتره اول آموزش خاصیت position در CSS رو ببینید تا دنبال‌کردن ادامه مسیر براتون راحت‌تر باشه.

ساخت سایه برای کادر با box-shadow

خاصیت box-shadow دور کادر یک عنصر HTML سایه می‌سازه. منظور از عنصر HTML هم یکی از بخش‌های صفحه، مثل دکمه، تصویر یا جعبه محتواست.

شکل کامل نوشتن این خاصیت به این صورته:

box-shadow: inset offset-x offset-y blur-radius spread-radius color;

قرار نیست هر بار همه این مقدارها رو بنویسید. فقط offset-x و offset-y اجباری هستن. بقیه رو هر وقت بهشون نیاز داشتید، به کد اضافه می‌کنید.

مقدار inset

با کلمه inset، سایه به‌جای بیرون کادر، داخل اون دیده می‌شه. نوشتن این کلمه اختیاریه. پس اگه حذفش کنید، مرورگر سایه رو بیرون کادر نشون می‌ده.

مقدار offset-x

offset-x جای افقی سایه رو تعیین می‌کنه. عدد مثبت سایه رو به راست می‌بره و عدد منفی اون رو به سمت چپ جابه‌جا می‌کنه.

مقدار offset-y

offset-y جای عمودی سایه رو مشخص می‌کنه. با عدد مثبت، سایه پایین می‌ره و با عدد منفی، بالاتر قرار می‌گیره.

مقدار blur-radius

blur-radius مشخص می‌کنه لبه سایه چقدر محو باشه؛ این مقدار تیرگی سایه رو کنترل نمی‌کنه. هرچقدر عدد بزرگ‌تر بشه، لبه‌ها نرم‌تر و محوتر به نظر میان. عدد منفی برای این قسمت معتبر نیست. اگه این مقدار رو ننویسید، مرورگر صفر رو در نظر می‌گیره.

مقدار spread-radius

spread-radius محدوده سایه رو بزرگ‌تر یا کوچک‌تر می‌کنه. مقدار مثبت باعث گسترش سایه می‌شه و مقدار منفی اون رو جمع‌تر می‌کنه. نوشتن این بخش اختیاریه و مقدار پیش‌فرضش صفره.

.large-shadow {  box-shadow: 0 8px 20px 6px rgba(0, 0, 0, 0.2);}.small-shadow {  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.2);}

مقدار color

color رنگ سایه رو تعیین می‌کنه. اگه اون رو ننویسید، مرورگر از مقدار color همون عنصر کمک می‌گیره؛ بنابراین رنگ پیش‌فرض لزوماً مشکی نیست. بهتره رنگ رو خودتون مشخص کنید تا نتیجه توی مرورگرهای مختلف قابل‌پیش‌بینی بمونه.

.card {  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);}

ساخت چند سایه برای یک کادر

یک کادر می‌تونه چند سایه رو هم‌زمان داشته باشه. برای این کار، سایه‌ها رو با ویرگول انگلیسی از هم جدا کنید. یادتون نره سایه‌ای که اول می‌نویسید، روی سایه‌های بعدی قرار می‌گیره.

.card {  box-shadow:    0 4px 10px rgba(0, 0, 0, 0.18),    0 14px 30px rgba(0, 80, 180, 0.12);}

اگه گوشه‌های عنصر گرد باشن، سایه هم از فرم border-radius پیروی می‌کنه. مثلاً سایه یک دکمه گرد، با همون شکل گرد نمایش داده می‌شه.

ساخت سایه برای متن با text-shadow

خاصیت text-shadow به نوشته‌ها سایه می‌ده. روش نوشتنش به box-shadow شباهت داره، با این تفاوت که خبری از spread-radius و کلمه inset نیست.

text-shadow: offset-x offset-y blur-radius color;

مقدار offset-x

offset-x فاصله افقی سایه از نوشته رو تعیین می‌کنه. مقدار مثبت اون رو به راست می‌بره و مقدار منفی سایه رو سمت چپ قرار می‌ده.

مقدار offset-y

offset-y فاصله عمودی سایه از نوشته رو تنظیم می‌کنه. عدد مثبت سایه رو پایین می‌بره و عدد منفی اون رو بالاتر نشون می‌ده.

مقدار blur-radius

blur-radius محوشدن لبه سایه رو کنترل می‌کنه. وقتی مقدارش صفر باشه، لبه سایه تیز به نظر میاد. با بالابردن این عدد، سایه کم‌کم نرم‌تر و محوتر می‌شه.

مقدار color

color رنگ سایه نوشته رو مشخص می‌کنه. بهتره همیشه این مقدار رو بنویسید تا رنگ نهایی به رنگ متن یا رفتار مرورگر وابسته نمونده باشه.

.title {  text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.35);}

ساخت چند سایه برای متن

روی یک نوشته هم می‌تونید چند سایه بذارید. فقط کافیه مقدارها رو با ویرگول انگلیسی جدا کنید. مثل box-shadow، سایه اول روی موارد بعدی نمایش داده می‌شه.

.title {  text-shadow:    1px 1px 2px rgba(0, 0, 0, 0.4),    0 0 12px rgba(0, 120, 255, 0.45);}

سایه‌های زیاد، خوندن متن‌های طولانی رو سخت می‌کنن. بهتره text-shadow رو بیشتر برای عنوان‌ها یا نوشته‌های کوتاه به کار ببرید و شدت سایه رو پایین نگه دارید.

تفاوت box-shadow و drop-shadow

box-shadow سایه رو با توجه به کادر مستطیلی عنصر می‌سازه. در مقابل، تابع drop-shadow() می‌تونه فرم قسمت‌های قابل‌دیدن یک تصویر شفاف رو دنبال کنه. مثلاً اگه فایل PNG شما پس‌زمینه شفاف داشته باشه، معمولاً با drop-shadow() سایه طبیعی‌تری می‌گیرید.

.transparent-image {  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3));}

سوالات متداول درباره ساخت سایه در CSS

جمع‌بندی

برای کادرها از box-shadow و برای نوشته‌ها از text-shadow استفاده کنید. دو مقدار اول جای سایه رو مشخص می‌کنن. blur-radius میزان محوشدن اون رو کنترل می‌کنه و spread-radius که فقط توی box-shadow هست، محدوده سایه رو بزرگ‌تر یا جمع‌تر می‌کنه.

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

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.