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

  • 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
  • machodolar : Kodlar üzerinde bir tavsiyem yok fakat menu başlıklarının ve "hakkı cengiz" yazısının fontunu daha az resmi bir şey yapsan sanki daha iyi durur gibi. Ayrıca "kodlarla dövüşen çocuk" yazısı da biraz sağ tarafa kaysa fena olmaz. Sevgiler, FordMemmed.
  • Hakkı Cengiz : merhabaa :) Yapıştırdığında bu dosyalar üzerine yazılsın dedin mi? ve bu dll dosyasını her bir ürünün içine kopyalamalısın. misal photoshop 32 bit versiyonunu kullanmak sana yetiyorsa adobe/photoshop (86x) klasörünün içine attıktan sonra böyle bir dosya mevcut diyecek. üzerine yaz deyip devam etmelisin.
Özlü Söz