CSS ile Yazı Ayıracı

Yazının bulunduğu günden beri kullanılan ayraçlar web tarafında CSS ile kolaylıkla hazırlanabilmekte.

Bu dersimizde CSS3’ün :after odaklı tanımlamalarıyla şık bir yazı ayıracı hazırlayacağız.

CSS3 ile yazı ayıracı nasıl yapılır?

Yapmamız gereken klasik paragraf yapımızın altına çizgi eklemek. Daha sonra da aynı yapıya after tanımıyla birkaç özellik daha ekleyeceğiz. Özetle işin büyük kısmı CSS tarafında. Hazırsanız yazı ayıracı yapımına dair bir örnekle başlayalım.

HTML Kodları

3 adet makalemiz olduğunu varsayalım.

<article>Burada bir makale olsun</article>
<article>Bu da ikinci makale</article>
<article>Bu son olsun.</article>

Şimdi de yazı ayıracını tasarlayalım.

CSS Kodları

İlk olarak yazıların altına border ekleyelim. Ayrıca :not(:last-of-type) tanımı sayesinde de tüm bu tasarımların son makaleye uygulanmasını engelliyoruz. Böylece altında başka yazı olmayan makaleye ayıraç eklemiyoruz.

article:not(:last-of-type) {
    position: relative;
    margin: 4em auto;
    padding-bottom: 4em;
    border-bottom: #ddd 1px solid;
}

Şimdi sırada :after tanımlamamız var. Bu kod sayesinde de yazı ayıracının ortasına daire ekliyoruz.

article:not(:last-of-type):after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #ddd 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #FFF;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    box-shadow: #FFF 0 0 0 10px;
}

Bu kadar!