Aikaa on taas kulunut, Vantaassa virrannut vettä ja töitä tehty, niin ettei ole bloggaamaan ehtinyt. Eilen tuli kuitenkin mieleen, että mites CSS:llä saisi aikaiseksi pääsiäismunan? Siinä Riddickin aikakirja leffan alkua odotellessa läppäri sylissä huonoa TV-viihdettä sivusilmällä seuraten päätin tehdä pääsiäistervehdyksen. Ilman kuvia ja pelkästään HTML ja CSS muotoiluja käyttäen. https://corellia.fi/egg.html
Sellainen huomio, että nykyisellä selainten kehitystahdilla eivät kaikki tahdo pysyä mukana. Yhtään vanhemmat IE selaimet eivät ehkä osaa näyttää sivua kuten olen tarkoittanut mutta Google Chrome osaa parhaiten, Safarilla näkyi yhtä hyvin, Firefoxista olen jättänyt yhden blur filtterin efektin pois. Eli IE käyttäjät, ellei näy kuten kuvassa, niin päivittäkää selaimenne tai valitkaa toinen. Kyse on uusien CSS ominaisuuksien demosta, ei muusta.
Tässä on sivun koko html-koodi.
<body> <div id="page" class="clearfix"> <div class="content clearfix"> <div class="head">Corellia Helsinki Toivottaa</div> <div class="shadow"></div> <div class="egg"></div> <div class="egg2"></div> <div class="text">Hauskaa Pääsiäistä!</div> <div class="info">Just CSS :)<br><a href="#">Ja kuinka tämä tehtiin</a></div> </div> </div> </body> Itseasiassa olisin varmaan selvinnyt vähän vähemmälläkin mutta kun kyse oli lähinnä CSS kokeiluista, ei optimoinneille ollut tarvetta sen enempää.
CSS gradientit taustat käyttöön
Pääsiäismuna on vain div, jolla on leveys ja korkeus ja jonka kulmia on pyöristetty siten, että sen muistuttaa muodoltaan kananmunaa. Ainakin vähän.
.egg {
width: 200px;
height: 300px;
float: left;
border-top-left-radius: 50% 65%;
border-top-right-radius: 50% 65%;
border-bottom-left-radius: 50% 35%;
border-bottom-right-radius: 50% 35%;
}
Eli muoto tehtiin noilla border radiusmääreillä. Jokainen kulma on omalla rivillään, niin on helpompi ymmärtäämiten kuvio toimii.
Se varsinainen juttu oli tarkoitus demota CSS gradienttia taustakuvana. Tässä esimerkissä tein pääsiäismunaan ruutumaalauksen. Olisi toki voinut tehdä raitoja ja siksakkia tms. Mutta mun luovaa silmääni nyt miellytti tuo ruutukuvio. Kuvio muodostetaan määrittämällä elementin taustalle koko ja sen lisäksi gradientsääntöjä käyttäen taustalle johonkin suuntaan värin vaihto toiseen (tai transparenttiin). Värien vaihtuminen voi olla jyrkkä, kerrasta poikki tyyppinen. Eli ei kannata ajatella gradienttia ainostaan tasaisina väriliukuina. Toinen pointti on se, että gradientin suunta ja koko voidaan määrätä joustavasti. Kun sitten tällä tavoin muotoiltua taustaa monistetaan elementin sisällä, voi luoda monenlaisia mielenkiintoisia kuvioita raidoista ympyräkuvioihin yms. Ei muuta kuin kokeilemaan. Tässä esimerkissä pääsiäismunan ruutukuvio toteutettiinseuraavin säännöin (edellä olevan .egg luokan loppuun vielä seuraavat määritykset).
background: linear-gradient(135deg, #ed4b10 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ed4b10 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ed4b10 25%, transparent 25%), linear-gradient(45deg, #ed4b10 25%, transparent 25%); background-size: 50px 50px; Tämän ensimmäisen munan päälle tein vielä toisen, jossa käytin radial gradienttia olla loin varjostusta ja enemmän "muotoa" elementille.
Tekstille reunaviivat text-shadow tekniikalla
Text-shadow ominaisuudella voi myös lisätä tekstille reunaviivat. Tässä kannattaa muistaa, että on käytettävä yhteensä neljää reunaviivaa muutoin jää nurkkiin pienet aukot. Häiritsevät ainakin mun silmääni. Alla esimerkki siitä miten sen tein. Säännöissä siis aina kaksi ensimmäistä pikseliarvoa on off set (siirtymä) kirjasimesta ja kolmas pehmennys, mitä en tässä tapauksessa tietenkään käytä. Sääntöä sitten vaan toistetaan sopivasti.
text-shadow: 1px 0px 0px hsla(113, 86%, 40%, 0.9), 0px 1px 0px hsla(113, 86%, 40%, 0.9), -1px 0px 0px hsla(113, 86%, 40%, 0.9), 0px -1px 0px hsla(113, 86%, 40%, 0.9), 3px 3px 3px hsla(0, 0%, 0%, .5); Lopuksi
Koodia ei ole optimoitu sen kummemmin eikä kirjoittamisen jälkeen mietitty mitä tuli tehtyä. Lopputulos oli se mihin tähtäsin tai sinne päin. Eli terveiset kaikille ja ajattelemisen aihetta CSS asioissa.
Ei tällä kertaa muuta. Viivästyneet terveiset Smashing Conferenssista Oxfordista. Konferenssissa oli paljon hyödyllistä asiaa ja tämänkin jutun aihe alkoi siellä kiinnostamaan enemmän. Lisää on kuitenkin tulossa.
Oikein hauskaa Pääsiäistä ja rentoja pyhiä.
-Kari