Eğik banner tasarımı

By

text shadow

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.

 

 Kullanım

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

Css :

@import url(http://fonts.googleapis.com/css?family=Oswald:400|Open+Sans:700);
@import url(http://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 :

Hey everyone look at this

Awesome Vintage Title

 



Leave a Comment

Your email address will not be published.

You may also like

Trend