این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
آموزش کار با سایه ها یا Shadows در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با سایه ها یا Shadows در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با سایه ها یا Shadows در CSS3
سایه یا به انگلیسی Shadow به حالتی گفته می شود که با استفاده از آن میتوان برای تگ های موجود در یک صفحه وب سایه ایجاد کرد، سایه ای که میتونه در ظاهر به عناصر جذابیت خاصی بده.
ما در زبان CSS دو حالت سایه میتونیم داشته باشیم :
- سایه برای خوده تگ
- سایه برای متن
Free-Learn
سایه برای خوده تگ با استفاده از box-shadow
در زبان CSS با استفاده از ویژگی box-shadow میتونیم به راحتی برای تگ ها سایه ایجاد کنیم.
شکل کلی برای استفاده از این ویژگی در CSS بصورت زیر می باشد :
|
1 |
box-shadow: H-Shadow V-Shadow blur Spread Color ; |
- H-Shadow : ضروری – سایه افقی
- V-Shadow : ضروری – سایه عمودی
- Blur : اختیاری – میزان شفافیت یا تاری سایه
- Spread : اختیاری – میزان پخش شدن سایه
- Color : اختیاری – رنگ سایه
مثال شماره ۱ : فقط سایه افقی و عمودی
|
1 2 3 |
.MyBox{ box-shadow:5px 10px; } |
مثال شماره ۲ : سایه افقی و عمودی بهمراه رنگ
|
1 2 3 |
.MyBox{ box-shadow:5px 10px yellow; } |
مثال شماره ۳ : سایه افقی و عمودی ، رنگ و میزان تاری سایه
|
1 2 3 |
.MyBox{ box-shadow:5px 10px 20px yellow; } |
مثال شماره ۴ : سایه افقی و عمودی ، رنگ و میزان تاری و میزان پخش شدن سایه
|
1 2 3 |
.MyBox{ box-shadow:5px 10px 40px 20px yellow; } |
Free-Learn
سایه برای متن با استفاده از text-shadow
ویژگی دیگری به اسم text-shadow در CSS داریم که با استفاده از این ویژگی میتوان یک سایه را برای متن ایجاد کرد.
شکل کلی برای استفاده از این ویژگی در CSS بصورت زیر می باشد :
|
1 |
text-shadow: H-Shadow V-Shadow Blur Color ; |
- H-Shadow : ضروری – سایه افقی
- V-Shadow : ضروری – سایه عمودی
- Blur : اختیاری – میزان شفافیت یا تاری سایه
- Color : اختیاری – رنگ سایه
مثال شماره ۱ : سایه افقی و عمودی
|
1 2 3 |
.MyText{ text-shadow:1px 15px; } |
مثال شماره ۲ : سایه افقی و عمودی بهمراه رنگ
|
1 2 3 |
.MyText{ text-shadow:1px 15px #5db616; } |
مثال شماره ۳ : سایه افقی و عمودی بهمراه رنگ و میزان شفافیت
|
1 2 3 |
.MyText{ text-shadow:1px 15px 2px #5db616; } |
Free-Learn
مثال های بیشتر از سایه ها در CSS
مثال شماره ۱ : ایجاد یک Image Card ( کارت عکس )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .MyBox{ width:150px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align:center; overflow:hidden; } .MyBox .MyText{ padding:10px; } </style> |
مثال شماره ۲ : وقتی ماوس میره روی باکس، سایه دار میشه
|
1 2 3 |
.MyBox:hover{ box-shadow: 2px 5px 30px rgba(0,0,0,.1); } |
مثال شماره ۳ : سایه برای متن ها
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> .s1{ color:#fff; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } .s2{ text-shadow: 2px 2px red; } .s3{ text-shadow: 2px 2px 5px red; } .s4{ color:#fff; text-shadow: 2px 2px 4px #000000; } </style> |
