CSS3 ile Gölgeli Pencere Yapımı

yazar

Css3 tasarım hayatımızda bir çok kolaylığı getiriyor bizlere. Alttan gölgeli pencere yapımı için ufak bir kod bloğu buldum ve sizlerle paylaşmak istedim. Siteleriniz içerisine kolaylıkla gömebileceğiniz bir yapıdadır. Css kodlarını head etiketleri arasına koyup, sitenizin gövdesinde ilgili div bloğunu kullanarak oluşturabilirsiniz. Pencerenin boyutlarını ve diğer özellikleriyle oynamak isterseniz css kodları kısmından biraz uğraşarak yapabilirsiniz.

<!DOCTYPE html>

<html>
<head>
<style>
.box{
width:200px;
height:100px;

}

.drop-shadow {
position:relative;
float:left;
width:40%; 
padding:1em; 
margin:2em 10px 4em; 
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute; 
z-index:-2;
}

.drop-shadow p {
font-size:16px;
font-weight:bold;
}

.lifted {
-moz-border-radius:4px; 
border-radius:4px;
}

.lifted:before,
.lifted:after { 
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg); 
-moz-transform:rotate(-3deg); 
-ms-transform:rotate(-3deg); 
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}

.lifted:after {
right:10px; 
left:auto;
-webkit-transform:rotate(3deg); 
-moz-transform:rotate(3deg); 
-ms-transform:rotate(3deg); 
-o-transform:rotate(3deg);
transform:rotate(3deg);
}

</style>
</head>
<body>

<div class="box drop-shadow lifted"></div>

</body>
</html>

İşte bu kadar. Güle güle kullanın…

“CSS3 ile Gölgeli Pencere Yapımı” üzerine 2 yorum

  1. Geri izleme: Elektrische Zahnbuerste

  2. Yardımınız için teşekkürler..

    Sayfanın içeriği, anlatılan içeriğin kodlama kısmı yeterince sarih fakat sözel olarak anlatım da dahil olsa – kullanılan sınıfların hangi özelliği etkilediğini veya hangi özelliğin olmazsa olmazı olduğu – sitenizin gerçekten parmakla gösterilen yegane siteler arasında birinciliğe tırmanacağına şüphe yoktur. Çünkü belirttiğim gibi sitenize harcadığınız emek gerçekten göz kamaştırıcı..
    Tekrardan teşekkürler.. Kolay Gelsin…

    Yanıtla

Yorum yapın

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.