CSS style za slike

Zaobljeni rubovi
Za zaobljene rubove koristimo tag border-radius na koji dodajemo
vrijednost za koju želimo zaobliti rub slike:
<style>
img {
border-radius: 50px;
}
</style>

Okvir
Ako želimo dodati okvir našoj slici koristimo border i padding:
<style>
img {
border-radius: 50px;
width: 500px;
border:1px solid #000000;
padding:2px;
}
</style>
Ukoliko želimo da nam slika bude kao link na koji možemo kliknuti koristimo
tag a <href=” “> i img:hover:
img:hover{
box-shadow:0px 0px 2px 1px #000000;
}
Responzivna slika
Responzivne slike su one slike kojima će se automatski promijeniti u skladu
sa promjenom veličine prozora.
Za to koristimo tagove height i width:
img {
max-width: 100%;
height: auto;
}

Centriranje slike
Prije nego što počnemo sa centriranjem slike potrebno je znati razliku
između block i inline elemenata.
Element na razini bloka je HTML element koji započinje novu liniju na web
stranici i proteže cijelu širinu dostupnog horizontalnog prostora. Ona stvara
velike blokove sadržaja poput odlomaka ili odjeljaka stranice.
Za razliku od elementa na razini bloka, inline element može:
 Započeti unutar retka
 Ne započinje novu liniju
 Širina se proteže samo koliko je definirana njezinim oznakama.

Da bi centrirali sliku, moramo lijevu i desnu marginu postaviti na auto i

pretvoriti u block element:
img {
display: block;
margin-left: auto;
margin-right: auto;
}

2
Polaroid
Za kreiranje polaroida potrebna su nam dva nova stila. Potrebni su nam
div.polaroid i div.text.
U div.polaroid dodajemo tagove:
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}

A, u div.text dodajemo:
div.text {
text-align: center;
padding: 10px 20px;
}

Prozirne slike
Za prozirne slike koristimo tag opacity, čija vrijednost može ići od 0 do 1.
img {
opacity: 0.8;
}

3
Obrtanje slike
Za obrtanje slike koristimo tag transform.
img {
transform: scaleX(-1);
}

Filteri
Za korištenje filtera u CSS-u koristimo tag filter.

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale()

| hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Vježba:
Napraviti galeriju od minimalno 5 slika.