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');
});
			

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

Bir cevap yazın

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

Dost Siteler

Etiketler

Son Yorumlar

  • Kopye Kağıtları » Hakkı Cengiz : […] WordPress KOD DEPOSU - 1.819 […]
  • Hakkı Cengiz : Güncelleme: - cozumpark.com/blogs/windows_server/archive/2009/02/08/iis-7-uzerinde-phpmyadmin-kurulumu.aspx - eyurtsever.com/index.php/windows-10-iis-kurulumu-resimli-anlatim - renklikodlar.net/DERSLER/Internet_Information_Services_IIS_kurulumu hakkatten çooook uzun yoldan gitmişim.
  • machodolar : I know it's hard to comprehend but there will be days that you DON'T GIVE A SINGLE FUCK about any romantic relationship. Your whole being is more rational than your conscious mind and will do the necessary changes in time. So stop whining and get to work. Cheers. Machodolar
  • Hakkı Cengiz : sağol gardaşım yorumunu dikkate alarak bikaç rütüş attım
  • Hakkı Cengiz : I can walk into a room without you And I don't get drunk and talk about you So I guess I've learned to live without you I just don't know how to love without you
Özlü Söz