با استفاده از زبان CSS و خاصیت shadow در آن (به معنی سایه) می توانید به متون و دیگر عناصر سایه اضافه کنید. دو خصوصیت زیر موضوع بحث امروز ما خواهند بود:
text-shadowbox-shadow
خاصیت text-shadow
خاصیت text-shadow به متن ها سایه اضافه می کند و حالت های مختلفی دارد اما در ساده ترین حالت آن باید یک سایه ی افقی و یک سایه ی عمودی تعیین کنید. من این کار را برایتان انجام داده ام و به سایه های افقی و عمودی 2 پیکسل داده ام:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
text-shadow:2px2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<pdir='rtl'><b>هشدار:</b>Internet Explorer9ونسخههایقبلترآنازقابلیتسایهپشتیبانینمیکنند.</p>
</body>
</html>
|
حالا می توانیم کد را کمی پیشرفته تر کنیم و به سایه رنگ بدهیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
text-shadow:2px2pxred;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<pdir='rtl'><b>هشدار:</b>Internet Explorer9ونسخههایقبلترآنازقابلیتسایهپشتیبانینمیکنند.</p>
</body>
</html>
|
همچنین می توانیم یک حالت تار بودن و پخش شدگی به سایه بدهیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
text-shadow:2px2px5pxred;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<pdir='rtl'><b>هشدار:</b>Internet Explorer9ونسخههایقبلترآنازقابلیتسایهپشتیبانینمیکنند.</p>
</body>
</html>
|
میتوان متن را سفید کرد تا سایه ی سیاهی پشت آن ایجاد کرده تا افکت شیشه مانندی به خود بگیرد:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
color:white;
text-shadow:2px2px4px#000000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<pdir='rtl'><b>هشدار:</b>Internet Explorer9ونسخههایقبلترآنازقابلیتسایهپشتیبانینمیکنند.</p>
</body>
</html>
|
و یا اینکه مانند چراغ های نئون یک رنگ را دور و پشت کل متن ایجاد کنیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
text-shadow:003px#FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<pdir='rtl'><b>هشدار:</b>Internet Explorer9ونسخههایقبلترآنازقابلیتسایهپشتیبانینمیکنند.</p>
</body>
</html>
|
سایه های چند لایه
اگر می خواهید چندین سایه را به یک عنصر اضافه کنید، می توانید از علامت ویرگول استفاده کنید. به طور مثال در کد زیر یک رنگ آبی و یک رنگ قرمز را به صورت نئونی به متن خود اضافه کرده ایم که باعث ایجاد رنگ بنفش شده است:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
text-shadow:003px#FF0000,005px#0000FF;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<pdir='rtl'><b>هشدار:</b>Internet Explorer9ونسخههایقبلترآنازقابلیتسایهپشتیبانینمیکنند.</p>
</body>
</html>
|
یا در مثال زیر که متنی سفید داریم و به آن سایه های سیاه، آبی و آبی تیره داده ایم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
color:white;
text-shadow:1px1px2pxblack,0025pxblue,005pxdarkblue;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<pdir='rtl'><b>هشدار:</b>Internet Explorer9ونسخههایقبلترآنازقابلیتسایهپشتیبانینمیکنند.</p>
</body>
</html>
|
همچنین می توانید پخش شدگی سایه را ایجاد نکنید و در عوض آن را آنقدر فشرده کنید که در ظاهر تبدیل به یک border شود:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
color:yellow;
text-shadow:-1px0black,01pxblack,1px0black,0-1pxblack;
}
</style>
</head>
<body>
<h1>Border around text!</h1>
<pdir='rtl'><b>هشدار:</b>Internet Explorer9ونسخههایقبلترآنازقابلیتسایهپشتیبانینمیکنند.</p>
</body>
</html>
|
خصوصیت box-shadow
خصوصیت box-shadow به عناصر (و نه متن ها) سایه اضافه می کند. ساده ترین حالت استفاده از آن این است که سایه های افقی و عمودی را برایش تعیین کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
padding:15px;
background-color:yellow;
box-shadow:10px10px;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>Thisisadiv element withabox-shadow</div>
</body>
</html>
|
حالا می توانیم به سایه رنگ بدهیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
padding:15px;
background-color:yellow;
box-shadow:10px10pxgrey;
}
</style>
</head>
<body>
<div>Thisisadiv element withabox-shadow</div>
</body>
</html>
|
و حالت تار بودن و پخش شدگی را نیز اضافه می کنیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
padding:15px;
background-color:yellow;
box-shadow:10px10px5pxgrey;
}
</style>
</head>
<body>
<div>Thisisadiv element withabox-shadow</div>
</body>
</html>
|
حالا اگر این سایه را با استفاده از شبه عناصر before:: و after:: به عنصری اضافه کنیم، افکت جالبی ایجاد می شود:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#boxshadow {
position:relative;
-moz-box-shadow:1px2px4pxrgba(0,0,0,0.5);
-webkit-box-shadow:1px2px4pxrgba(0,0,0,.5);
box-shadow:1px2px4pxrgba(0,0,0,.5);
padding:10px;
background:white;
}
/* Make the image fit the box */
#boxshadow img {
width:100%;
border:1pxsolid#8a4419;
border-style:inset;
}
#boxshadow::after {
content:'';
position:absolute;
z-index:-1;/* hide shadow behind image */
-webkit-box-shadow:015px20pxrgba(0,0,0,0.3);
-moz-box-shadow:015px20pxrgba(0,0,0,0.3);
box-shadow:015px20pxrgba(0,0,0,0.3);
width:70%;
left:15%;/* one half of the remaining 30% */
height:100px;
bottom:0;
}
</style>
</head>
<body>
<div id="boxshadow">
<img src="https://www.w3schools.com/css/rock600x400.jpg"alt="Norway"width="600"height="400">
</div>
</body>
</html>
|
همچنین قابلیت ایجاد عناصری به شکل کارت را هم داریم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div.polaroid {
width:250px;
box-shadow:04px8px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19);
text-align:center;
}
div.container {
padding:10px;
}
</style>
</head>
<body>
<h2>Polaroid Images/Cards</h2>
<p>The box-shadow propertycan be used tocreate paper-like cards:</p>
<div class="polaroid">
<img src="https://www.w3schools.com/css/rock600x400.jpg"alt="Norway"style="width:100%">
<div class="container">
<p>Hardanger,Norway</p>
</div>
</div>
</body>
</html>
|
ولی زیباترین حالت سایه ها را می توان در دکمه ها (button) پیدا کرد. به کد زیر توجه کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPEhtml>
<html>
<head>
<style>
html, body {
height:100%;
}
.wrap {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
.button {
width:140px;
height:45px;
font-family:'Roboto',sans-serif;
font-size:11px;
text-transform:uppercase;
letter-spacing:2.5px;
font-weight:500;
color:#000;
background-color:#fff;
border:none;
border-radius:45px;
box-shadow:0px8px15pxrgba(0,0,0,0.1);
transition:all0.3sease0s;
cursor:pointer;
outline:none;
}
.button:hover {
background-color:#2EE59D;
box-shadow:0px15px20pxrgba(46,229,157,0.4);
color:#fff;
transform:translateY(-7px);
}
</style>
</head>
<body>
<div class="wrap">
<button class="button">Submit</button>
</div>
</body>
</html>
|
در این مثال علاوه بر بالا بردن دکمه هنگام hover شدن، یک سایه ی سبز نیز به آن اضافه می شود تا به چشم ما اینطور دیده شود که رنگ سبزِ دکمه، محیط اطراف را نیز سبز می کند!
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟