CSS3 Obrubi
CSS3 omogućava mnogo naprednijih opcija za definiranje obruba (bordura) oko elemenata. Neke od glavnih značajki uključuju:
- Zaobljeni rubovi (border-radius):
border-radiussvojstvo omogućava kreiranje zaobljenih kutova za elemente.- Primjer:
css
div {
border-radius: 15px;
}
- Možete specificirati pojedinačno za svaki kut, npr.
border-top-left-radius,border-top-right-radius, itd.
- Slikovni obrubi (border-image):
border-imagesvojstvo omogućava korištenje slike kao obruba.- Svojstva uključuju:
border-image-source,border-image-slice,border-image-width,border-image-outset, iborder-image-repeat. - Primjer:
css
div {
border-image: url(border.png) 30 30 round;
}
- Sjenčanje kutije (box-shadow):
box-shadowsvojstvo dodaje sjenu elementu, omogućavajući različite efekte sjenčanja.- Parametri uključuju horizontalni i vertikalni pomak, radijus zamagljenja, radijus širenja, te boju sjene.
- Primjer:
css
div {
box-shadow: 10px 10px 5px #888888;
}
- Višestruki obrubi:
- Moguće je stvoriti višestruke obrube pomoću pseudoelemenata
::beforei::after. - Time se omogućava slojevitost i dodatna prilagodba obruba za različite efekte.
- Moguće je stvoriti višestruke obrube pomoću pseudoelemenata
Primjeri i Praksa
Na stranici se nalaze i praktični primjeri te interaktivni dijelovi gdje možete eksperimentirati s kodom i vidjeti rezultate u stvarnom vremenu. Ovo je korisno za učenje i razumijevanje kako različite CSS3 osobine rade zajedno kako bi se postigli željeni dizajnerski efekti.
Ove napredne mogućnosti u CSS3 omogućuju dizajnerima i developerima veću fleksibilnost i kreativnost prilikom izrade web stranica.
4o
CSS Zaobljeni Kutovi (CSS Rounded Corners)
CSS3 uvodi značajku zaobljenih kutova pomoću border-radius svojstva. Ova značajka omogućava jednostavno dodavanje zaobljenih kutova elementima bez potrebe za slikama ili složenim kodom. Svojstvo border-radius može se koristiti na različite načine za postizanje željenih efekata.
Osnovno korištenje border-radius svojstva
Najjednostavniji način korištenja border-radius svojstva je primjena jedne vrijednosti koja će zaobliti sve četiri kuta elementa jednako:
PRIMJER:
div {
border-radius: 15px;
}
U ovom primjeru, svi kutovi elementa će biti zaobljeni s radijusom od 15 piksela.
Pojedinačni zaobljeni kutovi
border-radius svojstvo također omogućava zaobljavanje svakog kuta zasebno:
div {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
Ovim pristupom, svaki kut može imati drugačiji radijus, što pruža veću fleksibilnost u dizajnu.
Eliptični zaobljeni kutovi
Umjesto kružnih kutova, border-radius može kreirati eliptične kutove koristeći dvije vrijednosti. Prva vrijednost se odnosi na horizontalni radijus, a druga na vertikalni radijus:
div {
border-radius: 50px 25px;
}
U ovom slučaju, horizontalni radijus je 50 piksela, a vertikalni radijus je 25 piksela, što stvara eliptični efekt.
Kratki zapis za više vrijednosti
border-radius svojstvo također podržava kratki zapis za definiranje zaobljenih kutova. Na primjer:
div {
border-radius: 10px 20px 30px 40px;
}
Ovaj zapis definira zaobljene kutove u redoslijedu: gornji lijevi, gornji desni, donji desni, donji lijevi kut.
Ako se koriste dvije vrijednosti:
div {
border-radius: 10px 20px;
}
Prva vrijednost zaobljava gornje lijeve i donje desne kutove, dok druga vrijednost zaobljava gornje desne i donje lijeve kutove.
Zaključak
Zaobljeni kutovi su moćna značajka CSS3 koja omogućava kreiranje elegantnih i suvremenih dizajna s minimalnim naporom. Korištenje border-radius svojstva jednostavno je i fleksibilno, omogućavajući dizajnerima da lako prilagode izgled svojih elemenata bez potrebe za dodatnim slikama ili složenim kodom.