این آموزش در تاریخ ۱۳۹۸/۱۰/۱۴ آپدیت شده است.
آموزش کار با سایه ها یا Shadows در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با سایه ها یا Shadows در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با سایه ها یا Shadows در CSS3
سایه یا به انگلیسی Shadow به حالتی گفته می شود که با استفاده از آن میتوان برای عناصر در یک صفحه وب سایه ایجاد کرد، سایه ای که میتونه در ظاهر به عناصر جذابیت خاصی بده.
ما در زبان CSS دو (۲) حالت سایه میتونیم داشته باشیم :
- سایه برای باکس ( خوده عنصر )
- سایه برای متن ( برای متن ها )
که پیشنهاد میکنم در ادامه و تا پایان این جلسه با من همراه باشید تا نحوه کار با این ۲ نمونه سایه رو در CSS بطور کامل یاد بگیرید.
Free-Learn
سایه برای باکس یا Box Shadow در CSS3
در زبان CSS با استفاده از ویژگی box-shadow میتوان به راحتی برای عناصر سایه ایجاد کرد، سایه ای که برای خوده عنصر ( باکس ) باشد.
شکل کلی برای استفاده از این ویژگی در CSS بصورت زیر می باشد :
|
1 |
box-shadow: h-shadow v-shadow blur spread color ; |
توضیح گزینه های موجود در دستور بالا :
- h-shadow : ضروری – سایه افقی را مشخص میکند
- v-shadow : ضروری – سایه عمودی را مشخص میکند
- blur : اختیاری – میزان شفافیت یا تاری سایه را مشخص میکند
- spread : اختیاری – میزان پخش شدن سایه را مشخص میکند
- color : اختیاری – رنگ سایه را مشخص میکند
مثال شماره ۱ : فقط سایه افقی و عمودی
|
1 2 3 4 5 6 7 |
<style> div{ box-shadow:40px 40px; } </style> |
مثال شماره ۲ : سایه افقی و عمودی بهمراه رنگ
|
1 2 3 4 5 6 7 |
<style> div{ box-shadow:40px 40px #607D8B; } </style> |
مثال شماره ۳ : سایه افقی و عمودی ، رنگ و میزان شفافیت یا تاری سایه
|
1 2 3 4 5 6 7 |
<style> div{ box-shadow:40px 40px 40px #607D8B; } </style> |
مثال شماره ۴ : سایه افقی و عمودی ، رنگ و میزان شفافیت و میزان پخش شدن سایه
|
1 2 3 4 5 6 7 |
<style> div{ box-shadow:40px 40px 40px 60px #607D8B; } </style> |
Free-Learn
سایه برای متن یا Text Shadow در CSS3
ویژگی دیگری به اسم text-shadow در CSS داریم که با استفاده از این ویژگی میتوان یک سایه را برای متن ایجاد کرد.
شکل کلی برای استفاده از این ویژگی در CSS بصورت زیر می باشد :
|
1 |
text-shadow: h-shadow v-shadow blur-radius color ; |
توضیح گزینه های موجود در دستور بالا :
- h-shadow : ضروری – سایه افقی را مشخص میکند
- v-shadow : ضروری – سایه عمودی را مشخص میکند
- blur-radius : اختیاری – میزان شفافیت یا تاری سایه را مشخص میکند
- color : اختیاری – رنگ سایه را مشخص میکند
مثال شماره ۱ : سایه افقی و عمودی
|
1 2 3 4 5 6 7 |
<style> h3{ text-shadow:1px 20px; } </style> |
مثال شماره ۲ : سایه افقی و عمودی بهمراه رنگ
|
1 2 3 4 5 6 7 |
<style> h3{ text-shadow:1px 20px #5db616; } </style> |
مثال شماره ۳ : سایه افقی و عمودی بهمراه رنگ و میزان شفافیت
|
1 2 3 4 5 6 7 |
<style> h3{ text-shadow:1px 20px 2px #5db616; } </style> |
Free-Learn
مثال های بیشتر از سایه ها در CSS3
مثال شماره ۱ :
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div{ margin:100px auto; width:300px; height:100px; background-color:#5db616; box-shadow: #BBB 0 0 2px, #888 0 15px 15px -2px; } </style> |
مثال شماره ۲ :
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div{ margin:100px auto; width:300px; height:100px; background-color:#5db616; box-shadow: 0 1px 1px 10px rgba(0,0,0,.05),0 10px 30px 0 rgba(0,0,0,.25); } </style> |
مثال شماره ۳ : سایه با رفتن ماوس بروی یک عنصر بهمراه افکت انتقال ( transition )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> div{ transition:0.4s; box-shadow: 2px 5px 30px rgba(0,0,0,0.4); } div:hover{ box-shadow: 0 1px 2px 1px #D3D2D3; } </style> |
