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.
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.