Çalışmamızda 3 adet stil atayacağız; alıntı işaretleri, metin ve kaynak.
İlk olarak alıntı yani blockquote kodundan bahsedelim.
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 :
Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.
AdobeWordPress.com
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-ile-alintilarinizi-sekillendirin/
Tarafımızdan hazırlanmıştır. İzinsiz kopyalanamaz.
