Bir kutuya nasıl kıvrılma efekti verildiğini görelim.
Öncelikle sayfamıza id si kutu olan bir div ekliyoruz.
<div id="Kutu">
ultrAslan Bursa
</div>
sonra css dosyamıza bu kodları ekliyoruz.
body{
font-family:Arial;
font-size:3em;
color:#red;
text-align:center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6),
-1px -1px 1px rgba(0, 0, 0, 0.4);
background-color:#ddd;
}
#kutu{
width:300px;
height:300px;
margin:50px auto;
position:relative;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955));
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}
#kutu:after{
z-index:-2;
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
position:absolute;
content:'';
background:transparent;
bottom:10px;
right:9px;
width:70%;
height:70%;
-webkit-transform: rotate(5deg)
skew(10deg);
}
#kutu:before{
z-index:-1;
-webkit-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
position:absolute;
content:'';
background:transparent;
bottom:46px;
right:41px;
width:50%;
height:50%;
-webkit-transform: rotate(20deg)
skew(45deg);
}
ekran çıktısı aşağıdaki gibidir.
Yorum