Eğik banner tasarımı

Banner olarak kullanabileceğiniz güzel bir yazı stili. Css3 gölge efekti kullanılarak hazırlanmış bu yazı örneğinde yazının arkaplanında görünmesi gereken gölgenin sadece sağ ve alt çizgileri göründüğü için ortaya böyle güzel bir çalışma çıkmış. Küçükken kara kalem kullanarak hep buna benzer yazılar hazırlardım. Sadece sağ gölge ve alt gölge göründüğü zaman yazı 3D şeklinde görünürdü. H1 etiketli yazının sağ ve sol tarafında bulunan yıldız ikonu Weloveiconfonts ile eklenmiş. Weloveiconfonts da aynı Fontawesome gibi resim kullanmadan websayfasına ikon eklemenize yarayan bir font hizmetidir.

Download

Demo

Kullanım

Head etiketleri arasına eklemeniz gereken bölüm.

Css :

@import url(https://fonts.googleapis.com/css?family=Oswald:400|Open+Sans:700);
@import url(https://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
 font-family: 'FontAwesome', sans-serif;
}
body {
 background: #e6e6d8 url('bg-retro-noise.jpg');
 color: #121212;
}
section.text {
 position: absolute;
 width: 90%;
 min-width: 800px;
 text-align: center;
 top: 50%;
 margin-top: -70px;
}
h1, h3 {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 transform: matrix(1, -0.20, 0, 1, 0, 0);
 -ms-transform: matrix(1, -0.20, 0, 1, 0, 0);
 -webkit-transform: matrix(1, -0.20, 0, 1, 0, 0);
}
h1 {
 font-family: "Oswald", Sans-serif;
 text-transform: uppercase;
 font-weight: 400;
 font-size: 70px;
 text-shadow: 4px 5px #e6e6d8, 6px 7px #c6a39a;
}
h1 span {
 display: inline-block;
 vertical-align: middle;
}
span.star {
 font-size: 20px;
}
h3 {
 font-family: "Open Sans", Sans-serif;
 text-transform: uppercase;
 font-weight: 700;
 font-size: 20px;
 letter-spacing: 0.1em;
 margin-bottom: 10px; 
 position: relative;
}
h3:before, h3:after {
 content: " ";
 position: absolute;
 width: 100px;
 height: 4px;
 border-top: 2px solid #121212;
 border-bottom: 2px solid #121212;
}
h3:before {
 margin: 5px 0 0 -110px;
}
h3:after {
 margin: 5px 0 0 10px;
}

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<section class="text">
 <h3>Hey everyone look at this</h3>
 <h1><span class="fontawesome-star star"></span> <span>Awesome Vintage Title</span> <span class="fontawesome-star star"></span></h1>
</section>