Merhaba arkadaşlar,

Öncelikle CSS2 de gelen bu kadar güzel bir konuyu bu kadar geç anlattığım için hepinizden özür dilerim.

Bu yazının başlığı IE7’yi öldürelim olmalıydı aslında çünki bu kadar güzel ve kullanım kolaylılığı sağlayan özelliği kullanmamıza tek engel İnternet Explorer 7’dir.

Contentin aldığı değerler:

1 -> none : ezmek için kullanılır,
2 -> normal : ezmek için kullanılır,
3 -> counter : sıralı elementlerin sıra numarasını veriyor (counter-increment özelliği desteğiyle),
4 -> attr : o elementin var olan veya bizim belirlediğimiz attr değerini veriyor.
5 -> open-quote, close-quote, no-open-quote, no-close-quote : Tırnak açmak kapatmak ve ezmek için kullanılır,

Örneklere geçelim;

Örnek 1

İki noktayı “:” content özelliği ile label’e veriyoruz.

“:”yı label:after {content : “:”;} ile ekledik ve “:”nın pozisyonunu float ile belirledik. Bunu label’a position:relative; vererek ve “:” ya position:absolute; right:0px; top:0px diyede tanımlayabiliriz.

/*Ornek 1*/
ul.ornek1 li {
    overflow: hidden;
    counter-increment: sira;
    padding: 0 0 0 15px;
    position: relative;
}

ul.ornek1 li label {
    width: 150px;
    line-height: 25px;
    display: block;
    float: left;
    padding: 0 10px 0 0;
}

ul.ornek1 li label:after {
    content: ":";
    float: right;
}

ul.ornek1 li label.pozisyon {
    position: relative;
}

ul.ornek1 li label.pozisyon:after {
    content: ":";
    position: absolute;
    right: 10px;
    top: 0;
    color: red;
}

/*Ornek 1*/

ul.ornek1 li {

overflow: hidden;

counter-increment: sira;

padding: 0 0 0 15px;

position: relative;

}

ul.ornek1 li label {

width: 150px;

line-height: 25px;

display: block;

float: left;

padding: 0 10px 0 0;

}

ul.ornek1 li label:after {

content: ":";

float: right;

}

ul.ornek1 li label.pozisyon {

position: relative;

}

ul.ornek1 li label.pozisyon:after {

content: ":";

position: absolute;

right: 10px;

top: 0;

color: red;

}

<div class="ornek">
	<h1>Örnek 1</h1>
	<ul class="ornek1">
		<li><label>Adı</label><span>Aycan</span></li>
		<li><label>Soyadı</label><span>BÜLBÜL</span></li>
		<li><label>Mail</label><span>ab [at] aycan.net</span></li>
	</ul>
	<ul class="ornek1">
		<li><label>Adı</label><span>Aycan</span></li>
		<li><label>Soyadı</label><span>BÜLBÜL</span></li>
		<li><label class="pozisyon">Mail</label><span>ab [at] aycan.net</span></li>
	</ul>
</div>
<!-- ornek DIV kapanis -->

<h1>Örnek 1</h1>

<li><label>Adı</label><span>Aycan</span></li>

<li><label>Soyadı</label><span>BÜLBÜL</span></li>

<li><label>Mail</label><span>ab [at] aycan.net</span></li>

</ul>

<li><label>Adı</label><span>Aycan</span></li>

<li><label>Soyadı</label><span>BÜLBÜL</span></li>

<li><label class="pozisyon">Mail</label><span>ab [at] aycan.net</span></li>

</ul>

</div>

Örnek 2

Oluşturduğumuz bir link topluluğuna content ve counter-increment özellikleri ile numara veriyoruz.

/*Ornek 2*/
.ornek2 {
}

.ornek2 a {
    display: block;
    color: blue;
    padding: 10px;
    counter-increment: sira;
}

.ornek2 a:before {
    content: counter(sira);
    color: #cd1821;
    font-size: 20px;
    padding: 0 10px 0 0;
}

/*Ornek 2*/

.ornek2 {

}

.ornek2 a {

display: block;

color: blue;

padding: 10px;

counter-increment: sira;

}

.ornek2 a:before {

content: counter(sira);

color: #cd1821;

font-size: 20px;

padding: 0 10px 0 0;

}

Örnek 2

jQuery :even ve :odd seçicisi Javascript Confirm (Evet-Hayır Butonları) jQuery abOkuyucu uygulaması Cep Telefon Javascript kontrolu jQuery ile tıklama ve tıklamama

Örnek 3

content : (string) özelliği yani content : “Metininiz” yazıyoruz ve o belirttiğimiz elementin başına belirttiğimiz metin geçiyor.

/*Ornek 3*/
.ornek3 {
}

.ornek3 span {
}

.ornek3 span:before {
    content: " Aycan BÜLBÜL diyor ki :";
    padding: 0 10px 0 0;
    color: #cd1821;
}

/*Ornek 3*/

.ornek3 {

}

.ornek3 span {

}

.ornek3 span:before {

content: " Aycan BÜLBÜL diyor ki :";

padding: 0 10px 0 0;

color: #cd1821;

}

<div class="ornek">
    <h1>Örnek 3</h1>
    <div class="ornek3">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>
    <!-- ornek3 DIV kapanis -->
</div>
<!-- ornek DIV kapanis -->

<h1>Örnek 3</h1>

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>

</div>

</div>

Örnek 4

open-quote ve close-quote özellikleri ile tırnak açıyoruz ve tırnak kapatıyoruz.

/*Ornek 4*/
.ornek4 {
}

.ornek4 span {
}

.ornek4 span: before {
    content: open - quote;
    color: #cd1821;
}

.ornek4 span: after {
    content: close - quote;
    color: #cd1821;
}

/*Ornek 4*/

.ornek4 {

}

.ornek4 span {

}

.ornek4 span: before {

content: open - quote;

color: #cd1821;

}

.ornek4 span: after {

content: close - quote;

color: #cd1821;

}

<div class="ornek">
    <h1>Örnek 4</h1>
    <div class="ornek4">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>
    <!-- ornek4 DIV kapanis -->
</div>
<!-- ornek DIV kapanis -->a

<h1>Örnek 4</h1>

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>

</div>

</div>

a

Örnek 5

content : attr(href) ile belirttiğimiz elementin href attribute’sini alıyoruz. Not : burada sadece href değil bizim oluşturduğumuz bir tagın da değerini alabiliriz.

/*Ornek 5*/
.ornek5 {
}

.ornek5 a {
    display: block;
}

.ornek5 a:after {
    content: attr(href);
    color: #cd1821;
    padding: 0 0 0 10px;
    font-style: italic;
}

.ornek5 span:after {
    content: attr(aycan);
    color: #cd1821;
    padding: 0 0 0 10px;
    font-style: italic;
}

/*Ornek 5*/

.ornek5 {

}

.ornek5 a {

display: block;

}

.ornek5 a:after {

content: attr(href);

color: #cd1821;

padding: 0 0 0 10px;

font-style: italic;

}

.ornek5 span:after {

content: attr(aycan);

color: #cd1821;

padding: 0 0 0 10px;

font-style: italic;

}

<div class="ornek">
    <h1>Örnek 5</h1>
    <div class="ornek5">
        <a href="http://www.aycan.net/">Aycan BÜLBÜL, kişisel bloğu</a>
        <span aycan="BÜLBÜL"> Aycan attr'sinin değerini alıyoruz : </a>
</div><!-- ornek5 DIV kapanis -->
</div><!-- ornek DIV kapanis -->

<h1>Örnek 5</h1>

<a href="http://www.aycan.net/">Aycan BÜLBÜL, kişisel bloğu</a>

<span aycan="BÜLBÜL"> Aycan attr'sinin değerini alıyoruz : </a>

</div>

</div>

Örnek 6

content : url(XX.png); ile belirttiğimiz elemente resim verdik.

/*Ornek 6*/
.ornek6 {
}

.ornek6 a {
    display: block;
}

.ornek6 a:after {
    content: url( http://www.aycan.net/wp-content/jquery-146x146.png);
    color: #cd1821;
    padding: 0 0 0 10px;
    font-style: italic;
}

/*Ornek 6*/

.ornek6 {

}

.ornek6 a {

display: block;

}

.ornek6 a:after {

content: url( http://www.aycan.net/wp-content/jquery-146x146.png);

color: #cd1821;

padding: 0 0 0 10px;

font-style: italic;

}

<div class="ornek">
    <h1>Örnek 6</h1>
    <div class="ornek6">
        <a href="http://www.aycan.net/">Aycan BÜLBÜL, kişisel bloğu</a>
    </div>
    <!-- ornek6 DIV kapanis -->
</div>
<!-- ornek DIV kapanis -->

<h1>Örnek 6</h1>

<a href="http://www.aycan.net/">Aycan BÜLBÜL, kişisel bloğu</a>

</div>

</div>

Kaynak

w3scholls – > http://www.w3schools.com/cssref/pr_gen_content.asp
css-tricks.com – > http://css-tricks.com/css-content/

Uygulamayı indir Uygulama Ön izleme

Post Views: 10.313

“Css content nedir ? nasıl kullanılır ?” üzerine 5 yorum

Ömür Yanıkoğlu dedi ki:

26 Kasım 2012, 18:36

Son projelerden birinde, tasarımdaki okları :before kullanarak yapabilirdin dendi ve araştırıp öğrendiğimde ben de çok şaşırdım; gerçekten faydalı bir metod. IE7 tarihe karışsa da, kurtulsak 🙂

attr kullanımına güzel bir örnek: http://www.zurb.com/playground/css3-polaroids

Burada, resme ilişkin başlıklar a tagının title özniteliğinden çekiliyor…

Yanıtla
Ecem Ulusoy dedi ki:

27 Aralık 2012, 17:35

Çok öğretici ve güzel bir makale olmuş teşekkürler.

Yanıtla
Ibrahim dedi ki:

11 Aralık 2013, 21:39

Süper Sonum Sonsuz Tesekkürler elinize Saglik

Yanıtla
Mustafa Sercan dedi ki:

07 Şubat 2016, 22:05

Aradan bu kadar zaman geçmesine rağmen hala güncel ve faydalı bir bilgi… Çok teşekkür ediyorum. 🙂

Yanıtla
mustafa dedi ki:

25 Mayıs 2016, 17:09

tesekkurler eyvallah

Yanıtla

Örnek 1

Örnek 2

Örnek 2

Örnek 3

Örnek 4

Örnek 5

Örnek 6

Kaynak

“Css content nedir ? nasıl kullanılır ?” üzerine 5 yorum

Bir yanıt yazın Yanıtı iptal et