A következő leírásban kicsit a képek formázásáról lesz szó. Ha az előző CSS segítségeket is olvastad, akkor már igazán nem lesz nehéz dolgod, hiszen az eddigieket itt is fel tudod használni. Azért most mégis végigvezetlek téged a képek formázásán.

 

A képeket CSS kódban háromféle módszerrel formálhatod, az egyik, hogy egyszerre az összes megjelenő képre hatsz, a második pedig, hogy csak a linkelt képekre hatsz, az utolsó pedig csak bizonyos képekre (csak a kijelöltekre). Most főleg erről lesz szó.

Szerintem, ezek az alapvető stílusok, amiket érdemes megadni egy képnek. Természetesen, ezekről részletesebben olvashatsz a megadott menüpontokban, a képzésről, és a kritériumokról. Most csak megmutatom, miket érdemes megadni:

img {
background: url(háttérkép);
background-position: top left;
background-repeat: repeat;
padding: 10px;
margin: 5px;
border: 1px dashed #ffffff;
}

 

Ha az összes képre hatsz

Ez a módszer hasznos, ha nem akarsz minden képet meglinkelni, vagy megadni a kódban, hogy milyen legyen, viszont hátrányos is, mert lehetnek olyan képek is, amik átváltoznak, de nem szeretnéd (pl fejléc). Előnyök hátrányok nélkül az összes képnek egyszerre az img előtaggal adhatod meg a hatást:

img{
...stílusok...
}

 

Linkes képekre hatva

Ezzel csak a meglinkelt képeid fogják felvetni az adott hatást, melyek mutatnak más oldalra, vagy képre esetleg. Ezt így tudod megadni:

a img{
...stílusok...
}

 

Bizonyos képekre hatva

Ha nem szeretnéd, hogy az összes képed kapjon hatást, akkor a következő módszer lesz a legmegfelelőbb számodra, ugyanis csak az általad kiválasztott képek fogják megkapni az adott hatást. Az img kód mögött meg kell jeleníteni a kategóriát.

img:hatas01{
..stílusok...
}

Ebben az esetben a HTML kódodban meg kell jelenítened a képnél a kategóriát (hatas01) mert csak akkor fog megjelenni a hatás a képnél. Erről részletesebben ITT olvashatsz.

<img src="http://képurlje" class="hatas01">

 

Valamint, több oldalon is láthatod, hogy ha pl ráviszed az egeret az adott képre, akkor megváltozik (háttér elmozdul, keret átváltozik stb.) Ezt is a CSS kódodban kell megadnod, de ebben az esetben azt is meg kell adnod, hogy milyen legyen a kép, mielőtt rávinnéd az egeret. A hover tag jelenti azt a stílust, amikor ráviszed az egeret a képre:

img{
...stílus1...
}

 

img:hover{
..stílus2...
}

A képek a következő kategóriába eshetnek: active (active, ez az alapvető stílus), hover (ha ráviszed az egeret), visited (ha már meglátogattad az adott linket, ami a képhez van csatolva, ez a hatás fog megjelenni)

 

Nagyjából ennyi lenne az alapismereti rész, ezután már csak azt kell értened, milyen is egy teljes linkes kép kód, és utána már te is kombinálhatod a saját kedved szerint:

img.linkes{
background: url(images/linkeskep01.png);
background-position: center left;
padding: 8px;
margin: 5px;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

img.linkes:hover{
background: url(images/linkeskep01.png);
background-position: center bottom;
padding: 8px;
margin: 5px;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
}

Lényegében ennyi lenne az egész. De ha valamit nem értesz, vagy elakadtál, akkor kérdezz! Ha hiányos lenne a leírás, vagy valamit hiányolsz, kérd a bővítését!


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *