در آموزش امروز ما قصد داریم به برخی از اثرات ساده اما فانتزی شناور روی عکسها با استفاده از 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*/
اولین چیزی که در مورد CSS است این که تعریف برخی از خواص CSS پایه ای است و بعد از عکسها ما می توانیم یک عکس کوچک از طریق CSS3 مرز و شعاع دایره برای آن ایجاد کنیم.
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-1px0#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:
opacity0.7sease-out0.3s;
-moz-transition:
opacity0.7sease-out0.3s;
-webkit-transition:
opacity0.7sease-out0.3s;
.imgholder:hoverimg
opacity:1;
بعد، اجازه دهید اولین سبک دکوراسیون عنصر DIV ما است، ما از این عنصر برای ایجاد پس زمینه و مرز برای ریز استفاده می کنیم.
.imgholder.outer1
top:-8px;
left:-8px;
z-index:2;
border:8pxsolid;
border-color:#DEEBFC;
box-shadow:003px#AFD3FF;
-moz-box-shadow:003px#AFD3FF;
-webkit-box-shadow:003px#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-shadow1sease-out,
border-color1s;
-moz-transition:
-moz-box-shadow1sease-out,
border-color1s;
-webkit-transition:
-webkit-box-shadow1sease-out,
border-color1s;
.imgholder:hover.outer1
border-color:#0088EA;
box-shadow:0010px#0285E2;
-moz-box-shadow:0010px#0285E2;
-webkit-box-shadow:0010px#0285E2;
عنصر DIV دکوراسیون بعدی را به مرز های بیرونی برای تصاویر کوچک استفاده خواهد می کنیم.
.imgholder.outer2
top:-18px;
left:-18px;
width:136px;
height:136px;
z-index:1;
border:10pxsolid;
border-color:#9BC8FF;
box-shadow:003px#8EB9FF;
-moz-box-shadow:003px#8EB9FF;
-webkit-box-shadow:003px#8EB9FF;
opacity:0;
transition:
opacity0.7sease-out0.3s,
box-shadow0.7sease-out0.3s;
-moz-transition:
opacity0.7sease-out0.3s,
-moz-box-shadow0.7sease-out0.3s;
-webkit-transition:
opacity0.7sease-out0.3s,
-webkit-box-shadow0.7sease-out0.3s;
.imgholder:hover.outer2
opacity:1;
box-shadow:0020px#8EB9FF;
-moz-box-shadow:0020px#8EB9FF;
-webkit-box-shadow:0020px#8EB9FF;
اکنون شما می توانید DEMO1 و DEMO2 و DEMO3 را ببینید و لذت ببرید
هیچ نظری موجود نیست:
ارسال یک نظر