Symbole Spinning w CSS3

Podczas prac nad własnym projektem potrzebowałem specjalnych symboli znanych z programu Spinning®. Świadomy możliwości arkuszy stylów kaskadowych, a dodatkowo zainspirowany przez kształty CSS stworzyłem potrzebne elementy bez angażowania grafiki.

Potrzebne symbole w większości składają się z prostych kształtów, jak trójkąty, koła i linie. Największy problem przy tego typu rozwiązaniach pojawia się w przypadku skalowania strony, co czasami niweczy nasz cały wysiłek.

Download · Live Demo

Prosty element div z obramowaniem to baza każdego symbolu. Kolejne elementy zostały zdefiniowane jako zawartość generowana. Pseudo-elementy :before i :after wstawiają treść przed i po określonym elemencie.

.symbol {
    width: 50px;
    height: 50px;
    border: 4px solid #444;
    margin: 5px;
    float: left;
    position: relative;
}
.symbol:before,
.symbol:after {
    content: '';
    display: block;
    position: absolute;
}

Następne klasy definiują powtarzalne elementy dla konkretnego symbolu. Przewidywany problem to stworzenie symbolu z więcej niż 3 składowych, czyli znacznika i selektorów generated content. Wówczas konieczne jest dodanie nowego znacznika do struktury, który znowu pozwala na określenie nowych części.

Standardowy problem to wynik działania Internet Explorera dla wspomnianych przypadków. Obsługa border-radius sprawia mu kłopoty, a co dopiero przeróżne transformacje. Jeśli jednak potrzebujesz podobnego rozwiązania, jedynie dla własnych potrzeb to prawdopodobnie będzie bardziej elastyczne i użyteczniejsze niż grafika.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *