جزئیات مربوط به سایه‌ها در CSS3
به عنوان یک توسعه‌دهنده وب مشاهده سایت‌هایی که محتوات آن‌ها گوشه‌های منحنی‌شکل دارند خیلی عادی است. با این مورد در CSS آشنا شدیم، اما در طراحی‌ها ویژگی دیگری باقی می‌ماند که سر و کله زدن با آن اندکی سخت است_سایه پایین المان. در برنامه‌های گرافیکی مثل فوتوشاپ افزودن سایه زیرین به تصاویر کار ساده‌ای است، اما استفاده از این افکت در یک صفحه وب همیشه کار مشکلی بوده است.
در گذشته برای افزودن این افکت مجبور بودیم آن را ابتدا به عنوان بخشی از تصویر به آن اعمال کنیم و سپس از عکس جدید در سایت خود استفاده کنیم اما این کار محدودیت‌های خود را داشت. برای مثال با تغییر سایت پنجره مرورگر چه اتفاقی می‌افتد؟ آیا سایه استفاده شده در عکس به بخش‌هایی که دیگر قابل رویت نیست منتقل می‌شود یا خیر؟ خوشبختانه برای رسیدن به این افکت راه مناسبی در CSS وجود دارد که به آن box-shadow می‌گویند.
مناسب‌ترین صفحه برای اعمال این تگ جدید گالری تصاویر سایت است. علاوه بر افکت سایه زیرین می‌توانیم با استفاده از border-radius تعدادی از گوشه‌ها را نیز تغییر می‌دهیم.
کدهای جدید CSS3 به صورت پررنگ در کد زیر مشخص شده‌اند:
figure img {
border: 15px solid white;
border-radius:10px;
box-shadow:2px 2px 5px gray;
margin-bottom:10px; /* added just to give the shadow some
breathing space */
}
تغییرات جدید را در عکس 10.13 به خوبی دیده می‌شوند.
عکس 10.13: خصوصیت box-shadow به خوبی سایه زیرین ما را اعمال کرده است.
اما این کار چگونه انجام گرفت؟ خصوصیت box-shadow به چهار مقدار نیاز دارد:
- میزان سایه در طول محور x
- میزان سایه در طول محور y
- میزان مات بودن سایه
- رنگ سایه استفاده شده
در مثال پیشین سایه ما از 2px سمت راست، 2px سمت چپ، 5px مات بودن و رنگ خاکستری ساخته شده بود. بیایید مقادیر خود را به شکل زیر تغییر دهیم و نتیجه جدید را مشاهده نماییم:
box-shadow:10px 10px 20px black;
که برای ما عکس 10.14 را خواهد ساخت.
عکس 10.14: مقادیر بزرگ‌تر به ما سایه‌ای با افکت پررنگ‌تر خواهند داد.
جالب است بدانید که می‌توان چندین تگ مختلف box-shadows را نیز به تصاویر خود اضافه کنید_به راحتی با افزودن یک کاما بعد از دستور اول می‌توانید دستور دوم را در کد خود وارد نمایید. به عنوان مثال می‌توانید سایه‌ای در بخش راست-پایین و بالا-چپ با استفاده از مقادیر مثبت و منفی مختصات x و y مانند نمونه زیر به تصویر خود اضافه نمایید:
box-shadow:2px 2px 15px black, -2px -2px 15px black;
این افکت به جای سایه زیرین به نواحی بیرونی تصویر شما یک حالت گرمی می‌بخشد و برای استفاده در المان‌هایی چون دکمه‌های فُرم‌ها مناسب است. عکس 10.15 این افکت را در تصاویر گالری به خوبی نشان می‌دهد.
عکس 10.15: استفاده هوشمندانه از تگ box-shadow
در رابطه با vendor prefixes داستان به چه صورت خواهد بود؟
در مثال‌های پیشین از ورژن‌های vendor prefixes حرفی به میان نیامد. در زمان نوشتن این کتاب تنها یکی از مرورگرهای مدرن از به کار بستن درست استایل ما امتناع کرد؛ نسخه 5 مرورگر safari. پس استفاده از WebKit vendor prefix لازم بود:
-webkit-box-shadow:2px 2px 15px black, -2px -2px 15px black;
box-shadow:2px 2px 15px black, -2px -2px 15px black;
آشنایی با خصوصیت text-shadow
دوستان ما در بخش توسعه وب علاوه بر استفاده از سایه زیرین برای پنل‌ها، بلاک‌ها و ...، از یک تکنیک مشابه برای تگ متن نیز استفاده می‌کنند. خوب، همان‌طور که حدس می‌زنید CSS3 این قابلیت را نیز در دسترس ما قرار خواهد داد. به خصوصیت text-shadow سلام کنید!
حالا به عنوان اولین تردستی خود، از این تگ برای زشت کردن یکی از المان‌های متنی خود استفاده می‌کنیم؛ این کار را انجام می‌دهیم تا شما را با یک نکته مهم آشنا کنیم.
کار خود را بر روی عنوان h2 شروع می‌کنیم.
در فایل style1.css خود دستور زیر را قرار دهید(مکان قرارگیری این دستور زیاد مهم نیست):
h2 {
text-shadow:5px 5px 2px gray;
}
تغییرات جدید را ذخیره کرده و نتیجه کار را در مرورگر خود مشاهده کنید. به نظر زشت شد نه؟ خوب است! نکته خوب داستان این است که خصوصیت text-shadow را به درستی اعمال کردیم، اما نکته‌ای که در رابطه با زشت شدن کار وجود دارد این است که بدانید به راحتی با استفاده نامناسب و نابه‌جا از این خصوصیت می‌توانید سایت خود را زشت کنید. به عکس 10.16 توجه کنید.
عکس 10.16: استفاده نامناسب از خصوصیت text-shadow به راحتی می‌تواند ظاهر کلی سایت شما را به هم بریزد.
بهترین کارکرد text-shadow زمانی است که مقادیر x و y کوچک، مقدار blur کم و یک رنگ مکمل برایش در نظر گرفته شود (ترتیب قرارگیری مقادیر text-shadow مانند box-shadow است).
زمانی که از این افکت برای کلید Like و کلید‌های متنی دیگر استفاده کنیم این المان‌ها با اندکی بیرون زدگی نمایش داده خواهند شد.
می‌توانیم یک text-shadow با مقادیر کوچک و مناسب برای بخش navigation سایت در نظر بگیریم تا این آدرس‌ها را از پس‌زمینه آبی‌رنگ آن‌ها جدا کنیم. در style1.css بخش مربوط به استایل‌های navigation را پیدا کنید (به دنبال سلکتور HTML5 nav بگردید) و کد زیر را به آن اضافه کنید:
nav a {
text-shadow:1px 1px 2px white, -1px -1px 2px white;
text-decoration:none;
}
تغییرات را ذخیره کرده و در مرورگر خود نتیجه را بررسی کنید. (توجه کنید که با استفاده از text-decoration خط زیر متن را حذف کردیم): توجه کنید که سایه ما بر روی خط زیر متن نیز عمل خواهد کرد.
نتیجه نهایی باید مشابه با عکس 10.17 شده باشد:
عکس 10.17: گرما بخشیدن به متن با استفاده مناسب و ظریف از text-shadow
باید یک کد CSS دیگر نیز به کار اعمال کنیم؛ زمانی که کلید ماوس بر روی لینک مربوطه قرار می‌گیرد افکت سایه در بخش آبی‌رنگ نشان‌گر ماوس نیز وارد شده و نتیجه کار را بد می‌کند. به عکس 10.18 توجه کنید:
عکس 10.18: به ماتی اطراف متن زیر ماوس توجه کنید.
برای تعمیر این مشکل به صورت زیر عمل می‌کنیم (می‌توانید نتیجه نهایی را در عکس 10.19 بررسی کنید):
nav a {
text-shadow:1px 1px 2px white, -1px -1px 2px white;
text-decoration:none;
}
nav a:hover, nav a:focus {
text-shadow: none;
}
عکس 10.19: افکت مات موجود در اطراف کلمه حذف شده و متن به راحتی خوانده می‌شود.
