haber

Uçak bileti

- Avtor: -primož- 07.09.09

CSS 3 in zaobljeni robovi

Pred temi CSS atributi je bilo potrebno s poljubnim slikarskim programom (npr. Photoshop) narisati zaobljene robove, jih razrezati in, kot slike vstaviti v dizajn. S CSS 3 to ni več potrebno.

*Preden preberete ta vodič Vam priporočam vodič: HTML obrobe.

Te čudovite vrednosti so:

-moz-border-radius: 3px;
-webkit-border-radius: 3px;

-moz je namenjen prikazovanju v Firefoxu.
-webkit je namenjen prikazovanju v Google Chromu.

Zopet Internet Explorer zaostaja za drugimi brskalniki … tega smo že navajeni!

Pa si poglejmo kodo:

HTML in CSS koda:

<html>

<head>

<style type="text/css">

.zaobljeni_robovi {
height: 200px;
width: 200px;
border: 5px solid #dedede;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

</style>

</head>

<body>

<div class="zaobljeni_robovi"></div>

</body>

</html>

Prikaz zaobljenih robov

Ta CSS funkcija pa zelo prav pride tudi pri obrobljanju slik, ki jih prikažemo na internetu. Namesto navadnih oglatih robov lahko zelo popestrimo spletno stran s temi zaobljenimi robovi, poleg tega pa stran ne izgleda tako toga in kvadratasta, kakor bi z navadnimi robovi.

HTML in CSS koda:

.zaobljeni_robovi {
height: inherit;
width: inherit;
border: 4px solid #dedede;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

</style>

</head>

<body>

<img class="zaobljeni_robovi" src="/moje_mesto_logo.png">
<img class="zaobljeni_robovi" src="/ognjena_papiga.png">

</body>

</html>

Prikaz zaobljenih robov pri slikah

*Če želite, da bo obroba odmaknjena od slike dodajte še atribut padding: 5px;.

Da pa ne boste mislili, da je to vse, kar lahko naredite s tem … ne! Posebej lahko določite, kateri kot bo zaobljen in kateri ne. Pozorni morate biti le na pravilen zapis.

Za Firefox se piše tako: -moz-border-radius-topright:
Za Chrome pa takole: -webkit-border-top-right-radius:

Top pomeni zgoraj; right pomeni desno … zgornji desni kot.

HTML in CSS koda:

.zaobljeni_robovi {
height: 300px;
width: 300px;
border: 5px solid #dedede;

-moz-border-radius-topright: 30px;
-moz-border-radius-bottomleft: 15px;

-webkit-border-top-right-radius: 30px;
-webkit-border-bottom-left-radius: 15px;

}
</style>

</head>

<body>

<div class="zaobljeni_robovi"></div>

</body>

</html>

Prikaz naodvisno zaobljenih robov

Zgornji levi kot – topleft – top-left
Spodnji levi kot – bottomleft – bottom-left

Zgornji desni kot – topright – top-right
Spodnji desni kot – bottomright – bottom-right

In vsakega lahko posebej oblikujete!

Upam, da Vam bo vodič pomagal polepšati vašo spletno stran, predvsem pa pohitriti ustvarjanje zaobljenih robov. S CSS 3 smo končno prešli s slik na kodiranje.

*Spremljajoče primere lahko najdete med Prenosi.

Komentiraj:

Max	\|19-02-2010 07:32

Dokler IE ne pozna teh ukazov, je dejansko ta atribut neuporaben.

AJ	\|02-03-2010 21:35

IE nikoli ne bo poznal teh ukazov, ker Microsoft vedno znova uvaja svoja jajca.

-primož-

|02-03-2010 22:48

od IE6 se je IE kar popravil, vsaj meni ne povzroča več takih problemov. Telih ukazov, ki so zelo uporabni pa ne vem zakaj Microsoft, kot eden izmed vodilnih, ne podpira. Mogoče je aroganca prevelika ... ali pa se Gatesu enostavno ne da vložiti nekaj penezov še za te posebnosti. Kdo bi vedel?

Mogoče še humorna slika grafa o izdelavi spletnih strani (začuda največji delež pri IE)

http://ilegala.si/images/stories/primoz/2/zanicevanje_internet_explore rja.png

Sorodni vodiči
Tabele in CSS Z miško označeno besedilo na spletni strani Kurzorji na spletnih straneh CSS galerija 650 Poseben CSS za Internet Explorer	DIV z drsniki Spustni meni a.k.a. Drop down menu Seznam kurzorjev CSS Osnove CSS galerija 650 predelava in nadgradnja

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé, Čokolada

haber

Uçak bileti

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči