اثر تزئینی شناور با CSS3 & html5

[U-host.org]

در آموزش امروز ما قصد داریم به برخی از اثرات ساده اما فانتزی شناور روی عکسها با استفاده از 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

&lt;div class="imgholder"&gt;
&lt;div class="outer1 circle"&gt;&lt;/div&gt;
&lt;div class="outer2 circle"&gt;&lt;/div&gt;
&lt;figure&gt;
&lt;img src="images/img1.jpg" /&gt;
&lt;figcaption class="caption"&gt;Image1&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;div class="imgholder"&gt;
&lt;div class="outer1 circle"&gt;&lt;/div&gt;
&lt;div class="outer2 circle"&gt;&lt;/div&gt;
&lt;figure&gt;
&lt;img src="images/img2.jpg" /&gt;
&lt;figcaption class="caption"&gt;Image2&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
/*other thumbnails*/



The Basic CSS
اولین چیزی که در مورد 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;
}



The Fancy Hover Effects
اکنون ، ما برای اضافه کردن اثر فانتزی در این عکسها در زمانی که آنها 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;
}



بعد، اجازه دهید اولین سبک دکوراسیون عنصر DIV ما است، ما از این عنصر برای ایجاد پس زمینه و مرز برای ریز استفاده می کنیم.
.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;
}



عنصر DIV دکوراسیون بعدی را به مرز های بیرونی برای تصاویر کوچک استفاده خواهد می کنیم.
.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;
}



Enjoy!
اکنون شما می توانید DEMO1 و DEMO2 و DEMO3 را ببینید و لذت ببرید
Download (http://www.itport.ir/wp-content/uploads/2013/03/css3-transitions-fancy-hover-effects.zip) View Demo (http://www.inwebson.com/demo/css3-transitions-fancy-hover-effects/demo3/)