CSS-sydän

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.

CSS-sydän

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>

Julkaistu tiistaina 16.2.2016 klo 18:03 CSS-luokassa avainsanoilla askartelu, grafiikka, Internet ja ohjelmointi.

Edellinen
Vedenalainen museo
Seuraava
Lounastilasto
Evästeiden käyttö

Käytän sivustollani evästeitä tarjotakseni parhaimman mahdollisen lukukokemuksen blogini lukijoille. Jos jatkat sivustoni käyttöä, oletan, että hyväksyt evästeiden käytön sivustollani.

Lisätietoja evästeiden käytöstä