Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Zaobljena slika v HTML s pomočjo CSS

Delite vsebino na Facebooku
Delite vsebino na Twitterju
  V lekciji boste spoznali, kako HTML elementu dodate CSS stil ter se na praktičnem primeru naučili, kako narediti zaobljeno sliko.
 
 
1
 
 

V HTML kodi izberite oz. dodajte nov element za sliko img.

<img src="slika.jpg" />

 
 
2
 
 

Če si stran ogledate v brskalniku, bo slika imela pravokotne robove.

Sedaj bomo robove na tej sliki naredili zaobljene.

 
 
3
 
 

Najprej img elementu za sliko dodajte nov stil oz. razred

class="zaobljeno"


Ime razreda je poljubno. Važno je samo, da kasneje pri definiranju stila uporabite isto ime.

 
 
4
 
 

CSS stile se običajno definira v ločeni datoteki, zato moramo znotraj head značke ustvariti povezavo do datoteke s stilom, ki jo bomo ustvarili kasneje.

V glavo oz. head dodajte kodo

<link href="stil.css" rel="stylesheet" type="text/css" />

 
 
5
 
 

Sedaj odprite nov dokument in ga poimenujte stil.css

V njem definirajte stil zaobljeno:

.zaobljeno {
    border-radius: 12px;
    border-color: #a1a7af;   
    border-style: solid;
    border-width: 1px;
}

Z njim smo določili, da bo radij zaobljenosti 12 pikslov, zraven pa smo določili še barvo, stil in širino obrobe.

 

 
 
6
 
 

Če si sedaj ogledamo stran v brskalniku, vidimo, da je slika lepo zaobljena.


Sedaj se lahko še malo poigrate in spreminjate vrednosti v CSS stilu, tako da dobite zaobljenost, ki vam je všeč.

Ko imate stil narejen, ga lahko dodate ostalim slikam na strani, kot je omenjeno v 3. koraku.

V splošnem pa stil ni omejen samo na slike, saj lahko stil dodate tudi na druge HTML element in tako dosežete zaobljenost tabel, gumbov ali drugih HTML elementov.

 
 
Komentiraj
 
 
 
 
 
21.7.2015, 21:51
Kaj pa narediš, če želiš v en dokument vključiti več datotek s stili?
 
 
 
 
21.7.2015, 23:47
Enostavno jih dodaš več, kot v 4. koraku lekcije.
 
 
 
 
22.7.2015, 17:18
Ni mi delovalo, ker sem pozabil CSS datoteko naložiti na strežnik.
 
 
 
 
24.1.2017, 17:27
Naslovna slika je skoraj ista kot na tej povezavi:
http://zmaga.com/forum_topic.php?id=1957....
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!