CSS ile Alıntılarınızı Şekillendirin

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.

“Yazılarım onlarca sitede kaynak belirtilmeden alıntılanıyor. AdobeWordPress olarak tüm hırsızlara hukuki savaş açıyoruz. Bu makaleyi oluşturma sebebim ise internet ahlakına sahip, kaynaksız alıntı yapmayan, emeğe saygılı web geliştiricilerine küçük bir stil sunmaktır.”

diyerek sözlerimi sonlandırıyorum. Bir sonraki CSS konulu yazımda görüşmek üzere…