Ç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.