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
24.2. fejezet: CSS alapismeretek - Elemek kitöltése
A CSS object-fit tulajdonságát akkor kell használni, ha nem a megszokott méretű tartalmazó dobozt (konténert) akarunk kitölteni képpel vagy videóval. Nézzük például az előző fejezetben szereplő képet – ezúttal 156x104-es méretben:
Ha most ettől eltérő arányúakat szeretnénk kihozni, akkor a következő kódrészletre lesz szükségünk:
img {
width: 200px;
height: 400px;
}
Viszont ha használjuk az „object-fit: cover;” tulajdonságot, akkor a képünkből csak egy megfelelő részlet jelenik meg torzítás nélkül.
img {
width: 200px;
height: 400px;
object-fit: cover;
}
Az object-fit lehetséges paraméterei:
.fill: Ez az alapértelmezett.
.contain: A behelyettesített tartalom úgy lesz átméretezve, hogy megtartsa az arányát az elem tartalmi mezőjén belül.
.cover: Az előzőhöz hasonló, de az objektum szélei le vannak vágva a helyes méretezésért.
.none: A tartalom nincs átméretezve.
.scale-down: Kisebb méretű kép létrehozása, ha ez szükséges.
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css3_object-fit.asp
24.3. fejezet: CSS alapismeretek – Nyomógombok
A helyes gombok használata feldobhatja a weblapot. Vegyünk példaként egy alapértelmezett és egy „kizöldült” nyomógombot.
Forráskód: (htmlpelda55.html)
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS Gombok</h2>
<button>Alap gomb</button>
<a href="#" class="button">Link gombja</a>
<button class="button">CSS gomb</button>
<input type="button" class="button" value="Input Button">
</body>
</html>
Nézzük a tulajdonságokat darabonként:
- background-color: a gomb háttérszíne (itt zöld)
- border: keret (itt: 0)
- color: szövegszín (itt: fehér)
- padding: helyhagyás (itt: elég sok lett)
- text-align: szöveg igazítása (itt: középre)
- text-decoration: szöveg díszítése (itt: semmi)
- display: képernyőn való megjelenés (itt: egy sorban)
- font-size: betűméret (itt: 16 képpont)
- margin: margók (itt: 4 és 2 képpont)
- cursor: egérmutató alakja (itt: a megszokott kurzor alakú)
Érdemes játszani például a gombok vagy a feliratok méretével (is), de csak a színek után.
Persze itt is lehetőség nyílik a gombok megfelelő lekerekítésére. (htmlpelda56.html)
És a forráskód:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: green;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>
<h2>Kerek gombok</h2>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body>
</html>
Ha már a színeknél tartunk, akkor megér egy próbát a gombok keretének kiszínezése. Az alábbi kódrészlet például fehér hátterű, fekete szövegű és zöld keretű gombot hoz létre:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
Érdekes ötlet a :hover tulajdonság használata, ugyanis ilyenkor a gomb teljesen átparaméterezhető, amikor az egér föléje ér. A mintaként használható kódrészlet:
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
További lehetőség az árnyékolás. Ezt a box-shadow tulajdonsággal érhetjük el. Érdemes például az alábbi kódrészletet tanulmányozni:
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
Egyes nyomógombokat le is lehet tiltani, így azok nem lesznek kattinthatóak. Példa:
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
(Megjegyzés: ezeket a nem kattintható gombokat érdemes kicsit szürkíteni. Erre van az pl. opacity tulajdonság.)
Több gombot lehet közvetlenül egymás mellé tenni. A megfelelő kódrészlet:
.button {
float: left;
}
Kár, hogy így a gombok nagyon egybefolynak. Érdemes keretet adni minden gombre. Például a következőképpen:
.button {
float: left;
border: 1px solid green;
}
Időnként szükség lehet a függőleges elrendezésre is. Ilyenkor a float: left helyett a display: block tulajdonságot kell használni. Példa:
.button {
display: block;
}
A fejezet leghitelesebb forrása (további ötletekkel): https://www.w3schools.com/css/css3_buttons.asp
24.4. fejezet: Oldalszámozás
Ha több oldalt (vagy a linkjét) szeretnénk egyszerre mutatni, akkor annak legegyszerűbb módja az oldalak számozása. Ezt mutatja az alábbi kép:
Itt az egyes oldalakat külön-külön számozzuk, majd pl. a nyitóoldalra tesszük ezt a lapozható oldalszámlálót. Forráskód: (htmlpelda57.html)
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Oldalak</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</body>
</html>
Ha az előbbi verziót kicsit szépíteni akarjuk, akkor érdemes kiemelni az aktív elemet, azaz más színnel megjelölni a hátterét. Ehhez a .active osztályt érdemes használni. Az aktuális oldal a 2-es számú, míg az egeret bármelyik másik oldal száma fölé az adott oldal héttere szürkére vált. Íme a forráskód: (htmlpelda58.html)
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a class="active" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</body>
</html>
További díszítő elem lehet a sarkak lekerekítése (border-radius: 5px;), illetve az átmeneti idő szabályozása (transition: background-color .3s;). Bár ezekkel óvatosan kell bánni, mivel a túl sok díszítő elem már visszás hatást kelthet!
Viszont érdemes meggondolni az oldalszámok bekeretezését a megszokott módon (border: 1px solid #ddd;), mivel az gyakran nagy segítség lehet a megfelelően gyors navigáláshoz. További jó ötlet a számok közötti üres helyek meghagyása:
.pagination a {
margin: 0 4px; /* 0 a tetejének és az aljának. 4 képpont az oldalsó helynek. */
}
A fejezet leghitelesebb forrása (további ötletekkel): https://www.w3schools.com/css/css3_pagination.asp