Tyylisivujen mahdollisuudet ovat lisääntyneet räjähdysmäisesti viime vuosina. Enää ei tarvitse toteuttaa näyttäviä grafiikoita monimutkaisten JavaScript-kirjastojen ja kuvien avulla. Nykyään haastavimmatkin graafiset toteutukset ja jopa animaatiot syntyvät melko vaivattomasti CSS-tyyleillä. Yksinkertaisista muodoista syntyy myös helposti tuttuja kuvioita, kuten oheinen sydän ensi vuoden ystävänpäivää silmällä pitäen. Loppujen lopuksi maailmanlaajuisesti tunnistettava sydänsymboli koostuu kolmesta peruskuviosta: kahdesta ympyrästä ja yhdestä neliöstä, jota on kierretty 45 astetta.
Tyyleillä vastaava symboli muodostuu minimissään yhdellä HTML-elementillä. Oheisessa esimerkissä käytän span-elementtiä, jolle olen määritellyt perustyylin lisäksi tyylit ennen ja jälkeen. Kahdella jälkimmäisellä piirtyvät ympyrät, joiden halkaisijat ovat tässä esimerkissä 20 pikseliä. Varsinaisessa elementin tyylissä piirtyy niin ikään 20 pikselin korkuinen ja levyinen neliö, jota on kierretty 45 astetta. Ympyrät on sijoitettu kymmenen pikselin etäisyydelle keskikohdasta. Vastaavasti neliö on sijoitettu sekin kymmenen pikselin etäisyydelle, jolloin kaikki kolme kuviota risteävät tai näkökulmasta riippuen menevät päällekkäin muodostaen lopulta tutun symbolin.
I CSS
Alla olevalla CSS-tyylittelyllä syntyy vaivatta yksinkertainen sydän-symboli.
.heart {
background-color: red;
color: inherit;
display: inline-block;
height: 20px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
width: 20px;
}
.heart:before,
.heart:after {
background-color: red;
border-radius: 50%;
content: "";
height: 20px;
position: absolute;
width: 20px;
}
.heart:before {
left: 0;
top: -10px;
}
.heart:after {
left: 10px;
top: 0;
}Oheinen HTML-koodi puolestaan saa aikaiseksi symbolin sivulle.
<p>I <span class="heart"></span> CSS</p>