Kolorowy wielokropek

Dziś bardzo prosty trick, który pozwoli Ci dodać kolorowy wielokropek z trzech (a jak będzie trzeba to i z większej ilości) kółek. Nie potrzebna jest do tego żadna grafika, i żaden element wpisany na stałe do kodu HTML strony.

W ruch idą pseudo-elementy i ich style. Zacznijmy jednak od początku. Załóżmy, że mamy w kodzie strony jakiś nagłówek który chcemy upiększyć.

<article>
    <h2 class="title">Idzie nowe</h2>
</article>

Aby dodać coś, czego nie ma w kodzie html można użyć pseudo-elementów, w naszym przypadku będzie to :after. Dodajemy więc w stylach selektor:

article h2.title:after {
}

Nadajemy mu pewną wielkość wyrażoną w jednostkach em, i definiujemy sposób w jaki ma się wyświetlać:

article h2.title:after {
    display: inline-block;
    vertical-align: middle;
    content: '';
    margin-left: 30px;
    width: 0.6em;
    height: 0.6em;
}

Po zaokrągleniu rogów o 50% i nadaniu koloru mamy piękne zielonkawe kółeczko wyświetlające się tuż za treścią tytułu.

article h2.title:after {
    display: inline-block;
    vertical-align: middle;
    content: '';
    margin-left: 30px;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background-color: #5F7638;
}

No to jedno kółeczko, a gdzie dwa pozostałe? Dwa pozostałe wyczarujemy używając cieni. Wystarczy dodać cień o wybranym kolorze, bez rozmycia za to przesunięty w poziomie o odpowiednią odległość:

article h2.title:after {
    display: inline-block;
    vertical-align: middle;
    content: '';
    margin-left: 30px;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background-color: #5F7638;
    box-shadow: 30px 0 0 #803888, 
                60px 0 0  #FE9950; 
    -webkit-box-shadow: 30px 0 0 #803888, 
                60px 0 0  #FE9950; 
    -moz-box-shadow: 30px 0 0 #803888,
                60px 0 0  #FE9950;
}

I mamy taki efekt:

Kombinując z cieniami (kolorami, położeniem i ilością) można uzyskać naprawdę ciekawe efekty. Zachęcam do eksperymentów.