Hakkı Cengiz

Not Defteri ve Yığılmış Sayfalar Efekti #CSS

Merhaba gençler 🙂 Kodlara geçmeden önce Codepen'den önizlemesine bakabilirsiniz.  Bakmayanlar için açıklamaya devam edelim. Evet başlıkta da dediğim gibi alttaki kodlarla ilk

0

73

Merhaba gençler 🙂

Kodlara geçmeden önce Codepen'den önizlemesine bakabilirsiniz.  Bakmayanlar için açıklamaya devam edelim. Evet başlıkta da dediğim gibi alttaki kodlarla ilk önce sayfanın arkaplanına çizgili not defterlerinde olduğu gibi çizgiler ekleyeceğiz. Ardından da üst üste yığılmış sayfalar efektini ekleyeceğiz. Kodları da harmanlayıp bir güzel not defteri ortaya çıkarıcaz.


HTML Kodlar:

<div class="paper">
<h1>Merhaba Beyler!</h1>
<p> merhaba</p>
</div>

 

CSS Kodlar:

body{padding: 20px;background: #000}

/* not defteri çizgileri */
.paper {
width: 300px;
height: 600px;
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
}

/* Not Defteri Üst Üste Yığılı Sayfa Efeki */
.paper {
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin: 26px auto 0;
max-width: 900px;
min-height: 300px;
padding: 24px;
position: relative;
width: 80%;
line-height: 200%;
}

.paper h1 {
text-align: center;
}
.paper:before, .paper:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: -1;
}
.paper:before {
background: #fafafa;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
transform: rotate(-2.5deg);
}
.paper:after {
background: #f6f6f6;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
transform: rotate(1.4deg);
}

				
<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        This is some example HTML Code.
    </li>
</ul>
			

				
.example-css {
    padding: 15px;
    margin-top: 5px;
}
			

				
$('.example-css').each(function(){
    $(this).addClass('example-javascript-code');
});
			


Etiketler: ,

Tarih: 4 Nisan 2018

Paylaş:

73

Henüz yorum eklenmemiş bi yorum atmaya ne dersin?

(There isn't a comment yet. Would you like add ?)

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir