Alıntı fikri ve söylevi kaynak ile birlikte paylaşmaktır.



Çalışmamızda 3 adet stil atayacağız; alıntı işaretleri, metin ve kaynak.

İlk olarak alıntı yani blockquote kodundan bahsedelim. <blockquote> tagını metni içine yazmak için kullanacağınız, cite tagı ile de kaynağımızı belirteceğiz.

Aşağıdaki HTML kodlama yukarıda görüntülediğiniz görsele aittir :

<blockquote>
<p>Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.</p>
<cite>AdobeWordPress.com</cite>
</blockquote>

Gelelim tasarıma. Blockquote için after ve before stillerini kullanacağız. CSS kodlamamız aşağıdaki gibi olacak.

blockquote {
display: block;
padding: 0 60px;
width: 350px;
font-family:Georgia, "Times New Roman", Times, serif;
}

blockquote:before, blockquote:after {
color: #bb5046;
display: block;
font-size: 300%;
width: 50px;
}

blockquote:before {
content: '\201C';
height: 0;
margin-left: -0.55em;
}

blockquote:after {
content: '\201D';
height: 50px;
margin-top: -30px;
margin-left: 360px;
}

blockquote cite{
font-style:italic;
color: #bb5046;
}

Bu iki işlemin ardından görseldekine yakın bir tasarım elde ediyoruz.

Bir sonraki CSS konulu yazımda görüşmek üzere…

Kaynak : http://www.adobewordpress.com/css-il...sekillendirin/

Tarafımızdan hazırlanmıştır. İzinsiz kopyalanamaz.