WWW-ohjelmointi

Laatikoiden muotoilut

Koon, reunojen ja tyhjän tilan lisäksi HTML-elementtilaatikoille voidaan määritellä joitain muitakin muotoiluja, kuten kulmien pyöristystä ja laatikon varjoa.

Pyöristetyt kulmat

Aiemmin laatikoiden kulmien pyöristys oli monimutkaista ja pyöreäkulmaiset laatikot tehtiin yleensä asettelemalla sen kulmiin pienet pyöristävät kuvat. CSS3:n myötä käyttöön tuli border-radius-ominaisuus, jolla pyöristäminen on helppoa. Arvoksi tälle ominaisuudelle annetaan pyöristyksen säde jollain yksiköillä (px, em, cm, in, %). Kulmien pyöristyksen arvot voidaan antaa myös kullekin kulmalle erikseen luettelemalla neljä arvoa myötäpäivään alkaen vasemmasta yläkulmasta.

<h1 style="border: 3px solid green; border-radius: 10px;">Laatikoitu Otsikko</h1>
<h1 style="border: 3px solid green; border-radius: 3em;">Laatikoitu Otsikko</h1>
<h1 style="border: 3px solid green; border-radius: 100%;">Laatikoitu Otsikko</h1>
<h1 style="border: 3px solid green; border-radius: 15px 0 15px 0;">Laatikoitu Otsikko</h1>

Laatikoitu Otsikko

Laatikoitu Otsikko

Laatikoitu Otsikko

Laatikoitu Otsikko

Laatikon varjo

Samoin kuin tekstille, myös HTML-elementtilaatikolle voidaan määrätä varjo box-shadow-ominaisuudella. Ominaisuus saa arvoksi:

  • vaakasiirtymän (pakollinen) (px, em, …)
  • pystysiirtymän (pakollinen) (px, em, …)
  • sumennuksen säteen (valinnainen) (px, em, …)
  • levinneisyyden, joka lisää varjon kokoa (valinnainen) (px, em, …)
  • värin (nimi, rgb- tai rgba-arvo)

Lisäksi avainsanalla inset varjo voidaan määrätä asetettavaksi laatikon sisäpuolelle. Tätä voi käyttää esimerkiksi 3-ulotteisen efektin tekemiseen esimerkiksi nappuloihin tai “upotuksiin”. Tarvittaessa varjostus voidaan myös kytkeä pois päältä arvolla none. Varjoja voidaan myös asettaa samalle elementille useampia erottelemalla ne toisistaan pilkulla.

Koska varjoa ei “vie tilaa” elementin asettelussa, voi sillä tehdä elementille yhden tai useamman reunuksen lisäämättä sen kokoa.

<h1 style="box-shadow: 5px 5px 5px gray; background-color: green;">Otsikko</h1>
<h1 style="box-shadow: -5px -10px 0 red; background-color: green;">Otsikko</h1>
<h1 style="box-shadow: 0 0 25px lime, 5px 5px 5px gray; background-color: green;">Otsikko</h1>
<h1 style="box-shadow: 0 0 0 4px blue, 0 0 0 8px red, 0 0 0 12px green; background-color: #ffa; ">Otsikko</h1>
<h1 style="box-shadow: inset 3px 3px 3px rgba(0,0,0,0.5), inset -3px -3px 3px rgba(255,255,255,0.5); background-color: #ff0; ">Otsikko</h1>
<button style="box-shadow: inset 4px 4px 4px rgba(255,255,255,0.5), inset -4px -4px 4px rgba(0,0,0,0.5);
               padding: 1em; border: 1px solid #444;
               border-radius: 10px;
               background-color: #999;
               color: black;">Nappula</button>

Otsikko

Otsikko

Otsikko

Otsikko

Otsikko