CSS ile Sayfa Yığını

CSS ile Sayfa Yığını

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.