Zaokrąglenie narożników obrazka, DIV z pomocą border-radius [CSS]

Zaokrąglanie rogów dowolnego obiektu HTML (guzika, fotografii, obrazka, DIV) z pomocą CSS3 jest bardzo proste.

Do tego celu nie potrzebujemy żadnych dodatkowych przygotowanych wcześniej elementów graficznych czy biblioteki jQuery, JavaScript. Wystarczy nam jedynie podstawowa znajomość reguł CSS3.

Warto tutaj wspomnieć, że zaokrąglenia nadajemy na ramce / obramowaniu obiektu, w efekcie tworzymy pewnego rodzaju maskę a narożniki dzięki czemu stają się przezroczyste.

Jak działa zaokrąglanie rogów z pomocą border-radius?!

Nie będę się zbytnio rozpisywać pokażę jedynie na przykładach wybrane formy zaokrągleń (dodawania obłości, pływalności obiektom HTML).

Przykładowy kod:

/* zapis z podziałem na narożniki */ 

 border-top-left-radius: 6px;
 border-top-right-radius: 6px;
 border-bottom-left-radius: 6px;
 border-bottom-right-radius: 6px;

/* przykładowy łączny zapis */
 border-radius: 6px;

Być może taki zapis nic wam nie mówi dlatego przygotowałam trochę objaśnień:

• border-top-left-radius – wpłyna na lewy górny róg elemntu
• border-top-right-radius – wpłyna na prawy górny róg elemntu
• border-bottom-left-radius – wpłyna na lewy dolny róg elemntu
• border-bottom-right-radius – wpłyna na prawy dolny róg elemntu
• border-radius: 80px 10px – wszystkie rogi: 80px na X, 10px na Y

Podstawową wartością border-radius jest „0”. Ustawiając tą wartość usuwamy zaokrąglenie z elementu powodując że obiekt jest całkowicie widoczny.

Jak to wygląda w praktyce? Przykłady

Właściwość ta nie jest dziedziczona, nie musimy więc się martwić, że znajdujące się w środku zaokrąglonego „div” elementy również będą zaokrąglone.

Przykład – 4 zaokrąglone boki:

Jak widzicie na poniższym figura w tym wypadku obrazek zyskał równe zaokrąglenia na wszystkich narożnikach. Dzięki czemu stał się bardziej owalny.

Powyższy kwadrat ma wymiary 150px/150px i zaokrąglenia 20 na 10.

border-radius: 20px 10px; 

Przykład 2 – 2 mało zaokrąglone boki i 2 dużo:

Kwadrat z 2 dużymi zaokrągleniami i 2 małymi. Czyli dwa rogi będą posiadały duże zaokrąglenia a pozostałe będą mniejsze – obrazek nabierze dzięki temu nieco eliptycznych kształtów.

W praktyce kod kwadratu wygląda następująco:

border-radius: 80px 10px; 

Oczywiście z użycie tej właściwości można tworzyć również inne kształty takie jak:

-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

Odwrócenie

-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

Elipsa / Okrąg w samym CSS

Dzięki tej właściwości możemy sprawić by np. kwadratowy obrazek wyglądał jak okrąg (koło) lub elipsa.

-moz-border-radius: 50%;
border-radius: 50%;

Jak widać na powyższym przykładzie kwadrat zamienił się w koło. W tym wypadku wystarczyło ustawić zaokrąglenia na 50%. Niestety nie każdy obiekt można tak łatwo przekształcić w idealne koło – istotne są tu bowiem jego pierwotne wymiary. Jeśli bowiem chcemy uzyskać idealnie owalny kształt najlepiej by obiekt był kwadratem.

Dużą zaletą tej metody jest jej prostota oraz fakt, że nie musimy instalować żadnych dodatkowych bibliotek. Istnieje jeszcze kilka innych metod zaokrąglania narożników np. jQuery.corners.

Przydatne generatory do tworzenia zaokrągleń

Jeśli nadal nie czujecie się na sile możecie skorzystać z internetowych generatorów zaokrągleń np:

• http://css3pie.com/
• http://border-radius.com/
• http://www.cssmatic.com/border-radius

Z pomocą tych stron będziecie mogli samodzielnie dobrać odpowiednie parametry by zaokrąglić rogi dowolnego elementu na waszej stronie internetowej. Dodatkową zaletą takiego programiku jest wygenerowanie kodu interpretowanego przez większość dostępnych przeglądarek internetowych.

Dodatkowe tagi:

• Zaokrąglanie narożników bez użycia grafiki
• zaokrąglenie obramowania obiektu
• okrągłe obramowanie kontenera