CSS ile Sayfa Yığını

Vatanay Özbeyli CSS3, Tasarım Unsurları

Bugüne kadar CSS ile çok fazla şey yaptık. Fakat bu teknik benim en beğendiklerimden biri.

Son birkaç yazımda olduğu gibi bunda da :after ve :before kodlarıyla objemizin her iki yanına çizimler oluşturuyoruz.Ayrıca bu sefer transform da kullanacağız.

Makalenin tanıtım görseli boyutu dolayısıyla pek açıklayıcı gözükmemekte. O yüzden tavsiyem “Örneği Görüntüle” kutusunu tıklamanız yönünde olacaktır.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl yapılır?

Aşağıdaki kodları CSS dosyanıza ekleyerek başlamalısınız. Bu alanda birkaç hatırlatmam var.

  • .sayfalar classındaki max-width ve max-height değerleriyle sayfanızın boyutunu istediğiniz gibi değiştirebilirsiniz.
  • .sayfalar classındaki background koduyla sayfa rengini değiştirebilirsiniz. Fakat sonrasında diğer classlardaki border renklerini de ona uygun olarak düzenlemelisiniz.
.sayfalar {
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin: 26px auto 0;
max-width: 350px;
min-height: 200px;
padding: 24px;
position: relative;
width: 80%;
}
.sayfalar:before, .sayfalar:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: -1;
}

.sayfalar:before {
background: #fafafa;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
transform: rotate(-2.5deg);
-ms-transform:rotate(-2.5deg);
-moz-transform:rotate(-2.5deg);
-webkit-transform:rotate(-2.5deg);
-o-transform:rotate(-2.5deg);
}

.sayfalar:after {
background: #f6f6f6;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
transform: rotate(1.4deg);
-ms-transform:rotate(1.4deg);
-moz-transform:rotate(1.4deg);
-webkit-transform:rotate(1.4deg);
-o-transform:rotate(1.4deg);
}

HTML Kodları

<div class="sayfalar">
<p>AdobeWordPress.com</p>
<p>Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.</p>
</div>

Notlar

  • Bu yaratıcı CSS kodlamasını ilk Michael Martin’den gördüm. Tarafımdan yazılmamıştır.
  • Örnekteki makale tarafımdan yazılan “Hayatta Kalma” isimli romandan alıntıdır. Tamamını okumak için burayı tıklayabilirsiniz.