Anfangi CSS:lla

02.12.2004 klo 15.53 • Aihe: Web

Olen viime päivinä tehnyt koristeellista anfangia joulukorttia varten. Anfangia (gif-kuva) voisi käyttää myös verkkosivujen koristuksena vanhaa ja arvokasta tyyliä tavoiteltaessa. Mutta mikä olisi paras menetelmä liittää se sivulle?

1: Kuva img-tagilla, muotoilut CSS:lla

Hyvää joulukuuta! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Habitasse platea dictumst.

.tapa1 {
	float: left;
	margin: -2px 1px -5px -5px;
}

2: Kuva CSS-taustakuvana

Tämä perustuu Shea Enhancement -menetelmään. Kuvan täytyy olla läpinäkymätön, jotta se peittää tekstimuotoisen alkukirjaimen. Testattu ja toimii Firefox 1.0, Opera 7.23 ja IE 6:ssa (Windows XP), mutta ei Netscape 4.x:ssa (yllätys!).

Hyvää joulukuuta! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Habitasse platea dictumst.

.tapa2 {
	float: left;
	margin: -2px 1px -5px -5px;
	display: block;
	position: relative;
	width: 84px;
	height: 90px;
}
.tapa2 span {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(anfangi-h.gif) no-repeat top left;
}

Molemmissa menetelmissä on omat hyvät ja huonot puolensa. Menetelmä 2 on koodiltaan monimutkaisempi eikä toimi vanhemmissa selaimissa. Lisäksi siinä jokainen erikokoinen angfangi tarvitsee oman luokkansa. Toistaalta menetelmässä 2 sisältö ja tyyli on erotettu paremmin toisistaan, jolloin ulkoasua voi paremmin säätää erilaisille päätelaitteille. Molemmat ovat saavutettavia (menetelmä 2 kuitenkin paremmin) ja toimivat myös kun CSS on päällä mutta kuvat eivät.

Lisäys (3.12.): CSS:n sijoittaminen sivun head:iin ei käynytkään näppärästi, joten koodi on lisätty tähän.

Kommentit

1 Josku (02.12.2004 klo 18.09)

Menetelmä 2 lienee parempi hakukonenäkyvyyden kannalta. Lisäksi ensimmäinen vaihtoehto lienee hieman ongelmallinen ruudunlukuohjelman kannalta, koska H ilmoitetaan kuvaksi. Valitsen siis jälkimmäisen vaihtoehdon.

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