Tamás Ferenc: Weblapkészítés HTML alapokon – 10. rész
CSS alapismeretek 5. rész
24.1. fejezet: CSS alapismeretek – Képek használata
Egy valamirevaló weblap nem képzelhet el képek nélkül. Ehhez vegyünk egy szabadon használható képet példaként, melynek forrása: https://www.hd-wallpapersdownload.com/script/bulk-upload/royalty-free-pictures-images.jpg
Maga a kép:
Ezt többféleképpen is lehet formázni – most nem az átméretezésre gondolok, mert az túl könnyű! Kezdjük például a sarkak lekerekítésével!
img {
border-radius: 10px;
}
Itt például kicsit kerekítjük le a kép sarkait.
Ha ezt teljesen ovális alakúra szeretnénk formázni, akkor a következőre lesz szükségünk:
img {
border-radius: 50%;
}
Lehet a klasszikus tulajdonságokkal is játszani. Itt például egy előtét-képet lehet látni:
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 156px;
}
<img src="/htmlpelda54.jpg" alt="Hegyek">
A tulajdonságok sorban:
- border = keret (vastagás, típus, szín)
- border-radius = kerekítés (mérete)
- padding = helyhagyás (mértéke)
- width = kép szélessége (képpontban; átméretezve)
Végül a szokásos <img> magát a képet jeleníti meg.
A következő példában a kép linkje jelenik meg, így kattintás után nagyítódik a kép.
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="/paris.jpg">
<img src="/htmlpelda54.jpg" alt="Hegyek">
</a>
Vegyük észre, hogy a képhez csatoltunk egy kis háttér-keretet is!
Mivel már sokféle képfelbontás létezik, ezért célszerű a képeinket átméretezhetővé tenni. Ráadásul a legjobb, ha ezt maga a böngésző teszi meg automatikusan. Ez az ún. reszponzív megjelenés egyik feltétele. A kódrészlet a következő:
img {
max-width: 100%;
height: auto;
}
A képet persze lehet középre helyezni, erre a következő kódrészlet szolgál:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Időnként szükség lehet arra is, hogy trükközzünk a képekkel. A következő kódrészletben a képet vízszintesen tükrözzük:
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
A fejezet leghitelesebb forrása: https://tferi.hu/weblapkeszites-html-alapokon-1/css-2
- Előző
- Következő >>