آموزش CSS – آشنایی با Property های box-shadow و text-shadow در سی اس اس (CSS) (جلسه ۳۶)

در سی اس اس برای افزودن سایه به عناصر قرار گرفته روی صفحه می توان از Property های box-shadow و text-shadow به ترتیب برای باکس ها و متون استفاده نمود. برای آنکه به طور عملی با این Property ها آشنا شویم، کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>asrefonon</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div id="box1"></div>
        <h2>asrefonon</h2>
    </body>
</html>

همانطور که در کد فوق می بینیم یک تگ <div> با id یی تحت عنوان box1 به علاوه یک تگ <h2> حاوای عبارت “asrefonon” قرار داده ایم. در ادامه با استفاده از کدهای سی اس اس (CSS) قصد داریم تا هم به تگ <div> و هم به تگ <h2> سایه اضافه کنیم. ابتدا کدهای مرتبط با تگ <div> را به فایل سی اس اس (CSS) خود اضافه می کنیم:

#box1 {
    width:300px;
    height:200px;
    background-color:red;
    box-shadow:10px 10px 15px 10px black;
}

همانطور که در کد فوق مشاهده می شود اندازه و رنگ پس زمینه قرمز برای این باکس در نظر گرفته شده است. در خط آخر هم با استفاده از Propertyیی تحت عنوان box-shadow سایه ای به رنگ مشکی در نظر گرفته شده است. ابتدا فایل خود را داخل مرورگر اجرا کرده سپس به تفسیر کد فوق می پردازیم:

1-box-shadow_in_css

همانطور که در تصویر فوق می بینیم، سایه ای به رنگ سیاه برای باکس قرمز رنگ در نظر گرفته شده است. اگر نگاهی به Value های در نظر گرفته شده برای box-shadow بیندازیم می بینیم که ابتدا ۱۰px نوشته شده است. این عدد مربوط به قرار گیری سایه در جهت محوری افقی است. ۱۰px دوم مقدار مرتبط با قرارگیری سایه در جهت محور عمودی است. مقدار ۱۵px مرتبط با میزان Blur یا “محوشدگی” سایه است. عدد چهارم که باز هم برابر با ۱۰px است مرتبط با Spread یا میزان “اندازه” سایه است. سپس یک فاصله قرار داده و رنگی را برای سایه در نظر می گیریم که در مثال فوق رنگ black در نظر گرفته شده است (به خاطر داشته باشیم که علاوه بر کلید واژگان از پیش تعریف شده در سی اس اس می توان از مقادیر Hexadecimal  و rgb هم استفاده کرد).
به خاطر داشته باشیم که اگر برای box-shadow دو عدد در نظر بگیریم، این دو عدد برای اندازه سایه مورد استفاده قرار می گیرند و اگر سه عدد در نظر بگیریم، علاوه بر اندازه مقداری هم برای Blur در نظر گرفته خواهد شد. به خاطر داشته باشیم که می توانیم در صورت نیاز مقدار چهارم را حذف کرده و هیچ گونه Spreadیی برای باکس خود در نظر نگیریم (به خاطر داشته باشیم که به غیر از Blur برای دیگر بخش های ایجاد سایه از مقادیر منفی هم می توان استفاده نمود).
برای آنکه بتوان نسخه های قدیمی تر فایرفاکس، گوگل کروم و سافاری اپل را هم پشتیبانی کرد می بایست کد خود را به صورت زیر تکمیل کنیم:

#box1 {
   width:300px;
   height:200px;
   background-color:red;
   -moz-box-shadow:10px 10px 15px 10px black;
   -webkit-box-shadow:10px 10px 15px 10px black;
   box-shadow:10px 10px 15px 10px black;
}

می بینیم که برای پشتیبانی از مرورگر های نسخه قدیمی فایرفاکس از دستور moz-box-shadow- استفاده شده و برای پشتیبانی از مرورگر های قدیمی کروم و سافاری از دستور webkit-box-shadow- استفاده کرده ایم.
حال فرض کنیم قصد داریم از دید زیبایی شناسی هم کمی روی سایه خود کار کنیم. برای این منظور کد فوق را به صورت زیر ویرایش می کنیم:

#box1 {
   width:300px;
   height:200px;
   background-color:red;
   -moz-box-shadow:5px 5px 10px -5px black;
   -webkit-box-shadow:5px 5px 10px -5px black;
   box-shadow:5px 5px 10px -5px black;
}

همانطور که در کد فوق می بینیم جایگاه قرارگیری سایه را در جهت محور افقی و عمودی معادل با ۵ پیکسل قرار داده سپس میزان محوشدگی سایه را برابر با ۱۰ پیکسل قرار داده ایم و در نهایت هم میزان بزرگی سایه را برابر با منفی ۵ پیکسل در نظر گرفته ایم. در حقیقت با در نظر گرفته یک عدد منفی برای اندازه سایه کاری خواهیم کرد که سایه کمی کوچکتر از باکس اصلی بوده و فقط کمی از محوشدگی آن به خارج از باکس انتقال می یابد. حال پس از ذخیره کردن فایل سی اس اس (CSS)، مرورگر خود را به روز رسانی می کنیم:

2-box-shadow_in_css

می بینیم که به چه سادگی توانستیم افکت سایه جالبی برای چنین باکسی در نظر بگیریم.
به خاطر داشته باشیم که برای هر تگ اچ تی ام ال (HTML) می توان بیش از یک سایه هم در نظر گرفت:

#box1 {
   width: 300px;
   height: 200px;
   background-color: red;
   -moz-box-shadow: 5px 5px 10px -5px black, 15px 15px 10px -5px orange;
   -webkit-box-shadow: 5px 5px 10px -5px black, 15px 15px 10px -5px orange;
   box-shadow: 5px 5px 10px -5px black, 15px 15px 10px -5px orange;
}

همانطور که در کد فوق ملاحظه می شود پس از سایه اول یک کاما قرار داده سپس به همان ترتیب اول یک سایه دیگر اضافه می کنیم. حال  مجدد مرورگر خود را به روز رسانی می کنیم:

3-box-shadow_in_css

همانطور که در تصویر فوق ملاحظه می شود یک سایه نارنجی رنگ که کمی هم از سایه قبل بزرگ تر است روی باکس اعمال شده است. ایجاد سایه داخل تگ های اچ تی ام ال نیز همانند ایجاد سایه معمولی است با این تفاوت که برای ایجاد سایه داخل تگ ها اچ تی ام ال (HTML) می بایست از کلید واژه inset استفاده کرد. برای این منظور کدهای مربوط به باکس قرمز رنگ را به صورت زیر ویرایش می کنیم:

#box1 {
   width: 300px;
   height: 200px;
   background-color: red;
   -moz-box-shadow: inset 5px 5px 10px -5px black;
   -webkit-box-shadow: inset 5px 5px 10px -5px black;
   box-shadow: inset 5px 5px 10px -5px black;
}

همانطور که در کد فوق می بینیم، پیش از مقادیر تعریف شده برای box-shadow از کلید واژه inset استفاده کرده ایم. حال مجدد مرورگر خود را به روز رسانی می کنیم:

5-box-shadow_in_css

می بینیم که برای متن سایه ای در نظر گرفته شده است. با استفاده از این تکنیک به سادگی می توان افکت های جذابی برای عناصر قرار گرفته روی صفحه مثل دکمه ها ایجاد کرد. برای مثال با ویرایش کدهای فوق به صورت زیر می توان این سایه را به چهار گوشه مستطیل اعمال کرد:

#box1 {
   width: 300px;
   height: 200px;
   background-color: red;
   -moz-box-shadow: inset 0 0 12px 1px black;
   -webkit-box-shadow: inset 0 0 12px 1px black;
   box-shadow: inset 0 0 10px 1px black;
}

همانطور که در کد فوق می بینیم برای محل قرارگیری افقی و عمودی سایه عدد صفر را وارد کرده ایم سپس برای میزان محوشدگی عدد ۱۲ پیکسل و برای اندازه سایه هم ۱ پیکسل را در نظر گرفته ایم. مجدد مرورگر فایرفاکس را به روز رسانی می کنیم:

6-box-shadow_in_css

همانطور که در تصویر فوق مشاهده می شود، سایه به هر چهار گوشه باکس قرمز رنگ به طور یکسان اعمال شده است. نحوه اختصاص دادن سایه به متون هم کاملاً شبیه به اختصاص سایه به یک باکس است با این تفاوت که به جای box-shadow می بایست از text-shadow استفاده نموده و همچنین عدد آخر که مربوط به Spread است می بایست حذف شود. برای روشن شدن این مطلب با ویرایش کردن کدهای سی اس اس (CSS) قصد داریم تا به عبارت داخل تگ <h2> یک سایه اضافه کنیم:

h2 {
   text-shadow: 4px 4px 12px black;
}

همانطور که در کد فوق می بینیم مقدار ۴ پیکسل را برای جایگاه افقی و عمودی سایه متن در نظر گرفته و همچنین عدد ۱۲ پیکسل را برای میزان Blur یا محوشدگی سایه در نظر گرفته ایم. پس از ذخیره کردن، فایل را داخل مرورگر به روز رسانی می کنیم:

4-box-shadow_in_css

می بینیم برای متنی که داخل تگ <h2> در نظر گرفته بودیم سایه ای ایجاد شده است.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان