گروه مقاله : CSS3
تاريخ انتشار : 1394/03/04 - 11:54
كد :570
با استفاده از CSS3 می توانید به متن ها و عناصر سایه بدهید.
در این فصل با خصوصیات زیر آشنا خواهید شد :
پشتیبانی مرورگرها
|
Property |
|
|
|
|
|
|
text-shadow |
10.0 |
4.0 |
3.5 |
4.0 |
9.5 |
|
box-shadow |
9.0 |
10.0
4.0 -webkit- |
4.0
3.5 -moz- |
5.1
3.1 -webkit- |
10.5
|
انداختن سایه در متن توسط CSS3
به کمک دستورات سایه در CSS3 شما می توانید به سادگی به متن خود عمق و ابعاد دهید و یا آنها را به شکل برجسته و یا خارج از صفحه نشان دهید .
دستور Text-Shadow و پارامترهای آن
با استفاده از خاصیت text-shadow در CSS3 می توان در متن سایه ایجاد کرد.
text-shadow: X-offset Y- offset Blur Color
مثال :
text-shadow: 2px 2px 4px #000000
X-Offest و Y-Offset برای تعیین موقعیت سایه نسبت به متن در محور افقی و عمودی به کار گرفته می شود . از Blur برای محوکردن سایه استفاده می شود و رنگ سایه توسط Color مشخص می شود. شما میتوانید چندین سایه برای یک متن ایجاد کنید.
در مثال ساده زیر فقط سایه های افقی و عمودی روی متن ایجاد می شوند :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>
</body>
</html>
اکنون یک رنگ به سایه می دهیم :
h1 {
text-shadow: 2px 2px red;
}
سپس از افکت Blur برای محو کردن سایه استفاده می کنیم :
h1 {
text-shadow: 2px 2px 5px red;
}
مثال زیر یک متن سفید را با یک حاشیه مشکی نمایش می دهد :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>
</body>
</html>
ایجاد چندین سایه روی یک متن
می توانید از کاما برای جدا کردن افکت های سایه استفاده کنید :
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
مثال زیر یک متن سفید را با سایه های سیاه ، آبی و آبی تیره نمایش می دهد :
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
خاصیت box-shadow در CSS3
از خاصیت box-shadow در CSS 3 ، برای ایجاد سایه برای عناصر HTML استفاده می شود .
برای سایه مورد نظر خود می توانید فاصله عمودی و افقی از عنصر تعیین کرده و نیز رنگ و اندازه آن را نیز تنظیم کنید .
در ساده ترین حالت فقط سایه عمودی و افقی ایجاد می کنیم :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>
سپس به سایه یک رنگ می دهیم:
div {
box-shadow: 10px 10px grey;
}
سپس از افکت Blur برای محو کردن سایه استفاده می کنیم:
div {
box-shadow: 10px 10px 5px grey;
}
خاصیت های سایه در CSS3
|
خاصیت |
توضیحات |
|
box-shadow |
یک یا چند سایه روی عنصر ایجاد می کند |
|
text-shadow |
یک یا چند سایه روی متن ایجاد می کند |