Suoraan sisältöön

Box model ja reunaviivat

Tänään huomasin, että selaimet eivät teekään reunaviivoja elementeille aivan kuten kuvittelin. Tässä erästä sivuprojektia olen miettinyt uusiksi ja Ville auttoi ulkoasun suunnittelussa. Tarkoituksena oli tehdä sivun yläosa sellaiseksi, mikä seuraa scrollatessa mukana ja sillä olisi muutaman pikselin tasainen, osittain läpinäkyvä varjo alapuolella. Se varjo olisi kätevintä tehdä ihan vain reunaviivalla, jonka väri määriteltäisiin rgba-arvoilla, jolloin saisi läpinäkyvyyttäkin. Heti, kun latasin sivun, huomasin virheen. Taustaväri jatkuu reunan alla, jolloin se ei kovin läpinäkyvä ollutkaan. Oletin kyllä, että reunaviivat olisivat oikeasti elementin ulkopuolella.

Alla olevasta kuvasta näkee sivuston ongelman, mutta tein vähän paremman esimerkkisivun, toimii vain tuoreimmissa selaimissa.

Vastaa