Tuplareunus kuville CSS:lla

Muuta yksipalstaiseksi (Zoom). Muuta ulkoasu normaaliksi. Siirry sisältöön. Siirry sivupalkkiin.

27.02.2006 klo 18.58 • Aihe: Web

Kuville saa helposti tehtyä tuplareunuksen pelkän CSS:n avulla, ilman ylimääräisiä elementtejä. Homma toimii näin:

img {
	padding: 1px;
	background-color: #333;
	border: 4px solid #ccc;
}

Padding määrää sisemmän reunuksen leveyden ja background-color värin. Ulompi reunus määritetään tavalliseen tapaan border-ominaisuuden avulla.

Tulos:

Div-elementtien ja display-ominaisuuden kanssa painimisen jälkeen ratkaisu löytyi joe’s nyc-valokuvablogista, käytössä myös chromasiassa. (Hienoja kuvia molemmissa!)

Testattu ja toimii: Firefox 1.5, IE 6.0 ja Opera 8.50 (Win XP).

Kommentit

Tätä viestiä ei voi enää kommentoida.