site stats
CSS ile 3 Boyutlu Yazı | CSS
Anasayfa  E Ner(E)de ?  Hata Gönder
Loading

CSS ile 3 Boyutlu Yazı

Yazar: Tarih: Ağustos 17, 2010 · Yorum Yap  , Kategori: CSS
Etiketler: , , , ,

CSS Hello

Aklıma gelmişti ama kurcalamamıştım diyebileceğim bir konu rastgele dolaşırken karşıma çıktı. Peki bunu nasıl yapabiliriz?

Margin’leri ile oynadığımız 2 yazının farklı renklerde ve koordinatlarının değişimi bu görüntüyü veriyor.

Elimizde bir div birde h1 tagları var. Div id’si “container”.

CSS :

body { background: #eee; }
#container {
width: 800px; height: 380px; margin: 50px auto; padding: 170px 0 0 0; text-align: center;
background: url(main-bg.jpg) 0 0 no-repeat;
}

h1 {
display: inline;
position: relative;
font: 200px Helvetica, Sans-Serif;
letter-spacing: -5px;
color: rgba(0,0,255,0.5);
}

h1:after {
content: “Hello”;
position: absolute; left: 10px; top: 5px;
color: rgba(255,0,0,0.5);
}

ve HTML :

<div id=“container”>
<h1>Hello</h1>
</div>

Demoyu görmek için tıklayın.