اثر تزئینی شناور با CSS3 & html5
در آموزش امروز ما قصد داریم به برخی از اثرات ساده اما فانتزی شناور روی عکسها با استفاده از CSS و html5 بپردازیم. تکنیک های که شامل CSS3 گذار به همراه: شناور شبه طبقه، و دیگر خواص CSS برای یک طراحی شیک.
لطفا توجه داشته باشید که نتایج حاصل از این آموزش تنها در مرورگر هایی که از CSS3 پشتیبانی می کنند نمایش داده می شود مانند کروم، فایرفاکس و سافاری.
The Basic Markup
نشانه گذاری اساسی
لطفا توجه داشته باشید که کدهای زیر در DEMO1 خواهد بود.
<div class="imgholder"> <div class="outer1 circle"></div> <div class="outer2 circle"></div> <figure> <img src="images/img1.jpg" /> <figcaption class="caption">Image1</figcaption> </figure> </div> <div class="imgholder"> <div class="outer1 circle"></div> <div class="outer2 circle"></div> <figure> <img src="images/img2.jpg" /> <figcaption class="caption">Image2</figcaption> </figure> </div> /*other thumbnails*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<div class="imgholder">
<div class="outer1 circle"></div>
<div class="outer2 circle"></div>
<figure>
<img src="images/img1.jpg" />
<figcaption class="caption">Image1</figcaption>
</figure>
</div>
<div class="imgholder">
<div class="outer1 circle"></div>
<div class="outer2 circle"></div>
<figure>
<img src="images/img2.jpg" />
<figcaption class="caption">Image2</figcaption>
</figure>
</div>
/*other thumbnails*/ |
اولین چیزی که در مورد CSS است این که تعریف برخی از خواص CSS پایه ای است و بعد از عکسها ما می توانیم یک عکس کوچک از طریق CSS3 مرز و شعاع دایره برای آن ایجاد کنیم.
.imgholder { position: relative; width: 120px; height: 120px; border-radius: 100px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } /* thumbnails css */ .imgholder img { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 100px; -moz-border-radius: 10px; -webkit-border-radius: 10px; z-index: 5; } .imgholder figcaption { position: absolute; left: 0; top: 120%; width: 120px; color: #004E87; text-shadow: -1px -1px 0 #fff; z-index: 4; } /* decoration css */ .imgholder .circle { position: absolute; width:120px; height:120px; border-radius: 100px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
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 |
.imgholder
{
position: relative;
width: 120px;
height: 120px;
border-radius: 100px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
/* thumbnails css */
.imgholder img
{
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 120px;
border-radius: 100px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: 5;
}
.imgholder figcaption
{
position: absolute;
left: 0;
top: 120%;
width: 120px;
color: #004E87;
text-shadow: -1px -1px 0 #fff;
z-index: 4;
}
/* decoration css */
.imgholder .circle
{
position: absolute;
width:120px;
height:120px;
border-radius: 100px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
} |
اکنون ، ما برای اضافه کردن اثر فانتزی در این عکسها در زمانی که آنها hovered می شوند .
.imgholder img { opacity: 0.5; transition: opacity 0.7s ease-out 0.3s; -moz-transition: opacity 0.7s ease-out 0.3s; -webkit-transition: opacity 0.7s ease-out 0.3s; } .imgholder:hover img { opacity: 1; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
.imgholder img
{
opacity: 0.5;
transition:
opacity 0.7s ease-out 0.3s;
-moz-transition:
opacity 0.7s ease-out 0.3s;
-webkit-transition:
opacity 0.7s ease-out 0.3s;
}
.imgholder:hover img
{
opacity: 1;
} |
.imgholder .outer1 { top: -8px; left: -8px; z-index: 2; border: 8px solid; border-color: #DEEBFC; box-shadow: 0 0 3px #AFD3FF; -moz-box-shadow: 0 0 3px #AFD3FF; -webkit-box-shadow: 0 0 3px #AFD3FF; background: #ffffff; background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff)); background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 ); transition: box-shadow 1s ease-out, border-color 1s; -moz-transition: -moz-box-shadow 1s ease-out, border-color 1s; -webkit-transition: -webkit-box-shadow 1s ease-out, border-color 1s; } .imgholder:hover .outer1 { border-color: #0088EA; box-shadow: 0 0 10px #0285E2; -moz-box-shadow: 0 0 10px #0285E2; -webkit-box-shadow: 0 0 10px #0285E2; }
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 |
.imgholder .outer1
{
top: -8px;
left: -8px;
z-index: 2;
border: 8px solid;
border-color: #DEEBFC;
box-shadow: 0 0 3px #AFD3FF;
-moz-box-shadow: 0 0 3px #AFD3FF;
-webkit-box-shadow: 0 0 3px #AFD3FF;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
transition:
box-shadow 1s ease-out,
border-color 1s;
-moz-transition:
-moz-box-shadow 1s ease-out,
border-color 1s;
-webkit-transition:
-webkit-box-shadow 1s ease-out,
border-color 1s;
}
.imgholder:hover .outer1
{
border-color: #0088EA;
box-shadow: 0 0 10px #0285E2;
-moz-box-shadow: 0 0 10px #0285E2;
-webkit-box-shadow: 0 0 10px #0285E2;
} |
.imgholder .outer2 { top: -18px; left: -18px; width: 136px; height: 136px; z-index: 1; border: 10px solid; border-color: #9BC8FF; box-shadow: 0 0 3px #8EB9FF; -moz-box-shadow: 0 0 3px #8EB9FF; -webkit-box-shadow: 0 0 3px #8EB9FF; opacity: 0; transition: opacity 0.7s ease-out 0.3s, box-shadow 0.7s ease-out 0.3s; -moz-transition: opacity 0.7s ease-out 0.3s, -moz-box-shadow 0.7s ease-out 0.3s; -webkit-transition: opacity 0.7s ease-out 0.3s, -webkit-box-shadow 0.7s ease-out 0.3s; } .imgholder:hover .outer2 { opacity: 1; box-shadow: 0 0 20px #8EB9FF; -moz-box-shadow: 0 0 20px #8EB9FF; -webkit-box-shadow: 0 0 20px #8EB9FF; }
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 |
.imgholder .outer2
{
top: -18px;
left: -18px;
width: 136px;
height: 136px;
z-index: 1;
border: 10px solid;
border-color: #9BC8FF;
box-shadow: 0 0 3px #8EB9FF;
-moz-box-shadow: 0 0 3px #8EB9FF;
-webkit-box-shadow: 0 0 3px #8EB9FF;
opacity: 0;
transition:
opacity 0.7s ease-out 0.3s,
box-shadow 0.7s ease-out 0.3s;
-moz-transition:
opacity 0.7s ease-out 0.3s,
-moz-box-shadow 0.7s ease-out 0.3s;
-webkit-transition:
opacity 0.7s ease-out 0.3s,
-webkit-box-shadow 0.7s ease-out 0.3s;
}
.imgholder:hover .outer2
{
opacity: 1;
box-shadow: 0 0 20px #8EB9FF;
-moz-box-shadow: 0 0 20px #8EB9FF;
-webkit-box-shadow: 0 0 20px #8EB9FF;
} |
اکنون شما می توانید DEMO1 و DEMO2 و DEMO3 را ببینید و لذت ببرید
Download View Demo
