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…



  • üstad benim sıkıntımda yazdığınız makaleye yakın aslında,
    bende yapmış olduğum tasarımın çalınmasını istemem 2 aydır uğraşıyorum yakında nasipse upload edeceğim sağ tuş ve f12 tuşlarını nasıl kilitlerim yada nasıl kodlarıma ulaşmalarını engellerim..

    • Web sayfanıza kısayol tuşları ekleyin tipinde bir makalemiz vardı. O makale ile F12’ye başka bir işlem atayabilirsiniz. Sağ tuşu da JS ile kilitleyebilirsiniz fakat bunların hiçbiri 100% çözüm değildir. Almak isteyen, her türlü alacaktır.