Galerija in oblikovanje slik

S CSS lahko slike oblikujemo na več načinov: izdelamo galerijo s sličicami, določimo okvirje, zaoblitve, poravnavo, filtre in posebne oblike slik. Na tej strani si bomo ogledali nekaj najpogostejših primerov.

Pri oblikovanju slik je pomembno, da poleg videza upoštevamo tudi preglednost, primerno velikost slik, razmerje stranic in smiselno uporabo učinkov. Preveč učinkov lahko hitro zmanjša preglednost strani.

Osnovna pravila

• Slike naj bodo dovolj velike za jasen prikaz, vendar ne večje, kot je potrebno.
• Pri galerijah morajo biti razmiki, poravnava in napisi dosledni.
• Pri spreminjanju oblike slike moramo paziti na razmerje stranic.
• Filtre in druge učinke uporabljamo zmerno in smiselno.
• Pri slikah naj bo besedilo alt jasno in opisno.

Galerija slik s sličicami in učinkom :hover

Prvi primer prikazuje preprosto galerijo s sličicami. Posamezne slike so razporejene druga ob drugi, ob prehodu z miško pa se ozadje sličice obarva. Klik na sličico odpre večjo sliko v novem oknu oziroma zavihku.

<div class="primer1">
   <a href="../../_slike/css/gore/brana.jpg" target="_blank">
      <img src="../../_slike/css/gore/brana_min.jpg" width="133" height="100" alt="Brana" />
      <div class="napis">Brana</div>
   </a>
</div>
<div class="primer1">
   <a href="../../_slike/css/gore/grintovec.jpg" target="_blank">
      <img src="../../_slike/css/gore/grintovec_min.jpg" width="133" height="100" alt="Grintovec" />
      <div class="napis">Grintovec</div>
   </a>
</div>
...

div.primer1 {
   margin: 5px;
   border: 1px solid rgba(249,147,1,1);
   width: 130px;
   float: left;
   text-align: center;
}
div.primer1 img {
   display: block;
   width: 120px;
   height: 90px;
   padding: 5px;
   object-fit: cover;
}
div.primer1 a {
   color: #888;
   text-decoration: none;
   display: block;
}
div.primer1 img:hover {
   background-color: rgba(249,147,1,1);
}

Brana

Grintovec

Jezerska kočna

Kokrska kočna

Planjava

Rinke

Skuta

Turska gora

Primer v novem oknu oziroma zavihku.

Galerija z oznakama figure in figcaption ter lastnostjo visibility

Drugi primer uporablja manjše sličice za predogled. Ob prehodu z miško nad sličico se ob strani prikaže večja slika z napisom. V takem primeru uporabimo oznaki figure in figcaption, večjo sliko pa privzeto skrijemo.

<div id="primer2">
   <ul>
      <li>
         <img src="../../_slike/css/gore/kokrska-kocna.jpg" width="100" height="75" alt="Kokrska kočna"/>
         <figure>
            <img src="../../_slike/css/gore/kokrska-kocna.jpg" width="500" height="375" alt="Kokrska kočna"/>
            <figcaption>Kokrska kočna</figcaption>
         </figure>
      </li>
      ...
   </ul>
</div>

#primer2 { position: relative; width: 110px; }
#primer2 ul { list-style: none; padding-left: 5px; }
#primer2 figure {
   position: absolute;
   visibility: hidden;
   background-color: #F7DFA3;
   border: 1px dotted #FC8E02;
   padding: 5px;
}
#primer2 li:hover figure {
   visibility: visible;
   top: 10px;
   left: 130px;
}

Primer v novem oknu oziroma zavihku.

Zaobljene slike

S pomočjo lastnosti border-radius lahko slike zaoblimo. Če uporabimo vrednost 50%, dobimo krožno sliko, če je slika kvadratna.

img.zaobljena {
   border-radius: 18px;
}

img.krog {
   border-radius: 50%;
   width: 140px;
   height: 140px;
   object-fit: cover;
}

Predogledne sličice

Predogledna sličica oziroma thumbnail je manjša različica slike. Pogosto ji dodamo rob, nekaj notranjega odmika in nežen učinek sence.

img.slicica {
   border: 1px solid #ddd;
   border-radius: 6px;
   padding: 6px;
   width: 180px;
   background: #fff;
}

img.slicica:hover {
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

Centriranje slik

Sliko kot bločni element vodoravno sredinsko poravnamo tako, da ji nastavimo display: block in levega ter desnega zunanjega odmika na auto.

img.sredina {
   display: block;
   margin: 0 auto;
   width: 220px;
}

Filtri slik

Lastnost filter omogoča različne vizualne učinke, kot so sivinsko prikazovanje, zameglitev, sepija, povečana svetlost ali kontrast.

.grayscale { filter: grayscale(100%); }
.blur { filter: blur(2px); }
.sepia { filter: sepia(100%); }
.brightness { filter: brightness(140%); }
.contrast { filter: contrast(160%); }

Sivinska

Zameglitev

Sepia

Svetlost

Kontrast

Oblike slik

Z border-radius in lastnostjo object-fit lahko slike prikažemo v različnih oblikah, na primer kot krog, elipso ali zaobljen kvadrat.

img.elipsa {
   width: 180px;
   height: 120px;
   object-fit: cover;
   border-radius: 50% / 35%;
}

img.krog {
   width: 140px;
   height: 140px;
   object-fit: cover;
   border-radius: 50%;
}

Priporočila

• Pri galerijah uporabi enotne velikosti sličic in jasne napise.
• Za obrezovanje slik v enotne okvire pogosto uporabi object-fit: cover.
• Za krožne ali elipsaste slike premisli, ali izrez ne skrije pomembnega dela motiva.
• Filtre in sence uporabljaj zmerno, da ostane stran pregledna.
• Vedno poskrbi za smiseln nadomestni opis slike z atributom alt.

Pogoste napake

• Slike so raztegnjene ali stisnjene, zato so popačene.
• Galerija nima enotnih mer in deluje nepregledno.
• Pri večjih prikazih slike prekrivajo drugo vsebino.
• Filtri in učinki so uporabljeni pretirano.
• Slike nimajo smiselnega opisa v atributu alt.