ایجاد جعبه تصاویر زیبا با CSS3

مفاهیم طراحی وب

تعداد بازدید : 5431

تاریخ و ساعت انتشار : یک شنبه 22 فروردین 1395 12:11

توجه: بهترین حالت نمایش در مرورگر موزیلا فایرفاکس می باشد.

مرحله اول: کد HTML


<div class= "stack rotated"
<img src=image2.jpg />
</div>

بعد از فراخوانی عکس روی صفحه تغییرات روی عکس را با کدهای CSS انجام می دهیم. شما می توانید کدهای CSS را در یک فایل جداگانه ای با پسوند CSS بنویسید و در صفحه HTML ، لینک دهید و یا کد CSS را داخل همان صفحه HTML قرار دهید.

مرحله دوم: کد CSS


/* ایجاد لایه کناره های تصویر*/
.stack
{
float: left;
width: 200 px;
height:100 px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
/*  سبک تصویر از قبیل اندازه ، کادر ، سایه جعبه عکس  */
.stack img
{
max-width: 280 px;
height: 280 px;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
width: 1003px;
}
.stack:last-of-type
{
margin-right: 0;
}
/* تعریف حالت اولیه و ثانویه برای تصویر*/
.stack:before, .stack:after
{
content: "";
border-radius: 3px;
width: 280%;
height: 280%;
position: absolute;
border: 10px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before
{
top: 4px;
z-index: -10;
}
/* (پشت تصویر)stack اولین عنصر در*/
.stack:after
{
top: 8px;
z-index: -20;
}
/* حالت چرش به سمت راست و از بالا به پایین*/
.stack.rotated:before
{
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
.stack.rotated:after
{
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
/* تنظیم مجدد همه حالت ها هنگامی که ماوس را کنار می کشیم.*/
.stack:hover:before, .stack:hover:after
{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
/* برای نمایش در آیفون و موبایل ها*/
@media only screen and (min-width: 320px) and (max-width: 480px)
{
.stack
{
float: none;
width: auto;
margin-bottom: 35px;
}
h1.title
{
margin: 15px 0;
}
}