CSS Ders-27 Before ve After Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Ders-27 Before ve After Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3920)
RAPOR ET
Css derslerimize kaldığımız yerden devam ediyoruz.Bu derste seçtiğimiz bir objenin arkasına ve önüne bir obje yerleştirmemizi sağlayan before ve after ı anlatacağım.After objenin sonuna Before ise önüne yerleştirir.

Dikkat etmemiz gerek bir kaç husus vardır.Bunlardan ilki content ile içerik girmeliyiz.Bunu gelecek derste detaylı anlatacağım.İçerik girmezsek gözükmeyeceklerdir.İkincisi ise eklediğimiz objeler inlinedir.Bunu blocaka display ile dönüştürüp çeşitli şeyler yapabiliriz.Şimdi kullanımına geçelim.

seçici:after{ //arkası
content:"";
//işlem
}
seçici:before{ //önü
content:"";
//işlem
}

Kalıp bu şekilde.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
.kutu{width:200px;height:200px;background:red;margin:auto;margin-top:50px;position:relative;color:#fff;}
.kutu:after{display:block;content:"Arkası";width:100px;height:100px;background:blue;position:absolute;left:225px;top:50px;}
.kutu:before{display:block;content:"Önü";width:100px;height:100px;background:blue;position:absolute;left:-125px;top:50px;}

p{text-align:center;}
p:after{content:" Arkası";color:red;}
p:before{content:"Önü ";color:red;}
</style>
</head>
<body>

<p>Metin</p>
<div class="kutu"></div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/dfg541fg8e.png

İlk objemizde hiç bir şey yapmadan önüne ve arkasına metin yerleştirdik.Diğerinde ise block element yapıp pozisyonlandırmalar yaptık.Before ve After şuan tüm tarayıcılar tarafından destekleniyor.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol