اثر تزئینی شناور با 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*/

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;

}

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;

}

بعد، اجازه دهید اولین سبک دکوراسیون عنصر 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;

}

عنصر 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;

}

Enjoy!

اکنون شما می توانید DEMO1 و  DEMO2 و DEMO3 را ببینید و لذت ببرید

Download View Demo