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:

HTML példaké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.

Kerekített sarkak

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%;
}

Kerekített sarkú kép

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