Tworzenie stron www

Z racji tego, że powstało już baardzo wiele sposobów na zaokrąglone rogi pomyślałem, że nie będę pisał o niczym nowym. Ten wpis będzie zbiorem tych licznych rozwiązań wykorzystujących zarówno HTML, CSS jak i JavaScript. Na końcu każdej metody pozwoliłem sobie pokazać wady i zalety jej stosowania. Zapraszam do lektury

Sposób pierwszy – CSS3

Jak wiadomo, najnowsza wersja arkuszy stylów pozwala na uzyskanie krągłości na naszej stronie. Aby to zrobić wystarczy nadać danemu elementowi odpowiedni selektor, np. klasę a następnie dodać mu poniższe style:

-khtml-border-radius: 10px / 10px;

-webkit-border-radius: 10px / 10px;

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

border-radius: 10px / 10px;

Dla wyjaśnienia, pierwsza wartość to szerokość zaokrąglenia, z kolei wartość po slash’u “/” definiuje jego wysokość. W tym wypadku godna polecenia jest strona CSS Border Radius Generator dzięki której wpisując odpowiednie wartości w pola przy rogach możemy na bieżąco obserwować kształt boków a następnie skopiować cały kod CSS.

Zalety

• Wymaga niewielkich zmian w kodzie,
• Używa najnowszych rozwiązań.

Wady

• Rozwiązanie obsługiwane tylko przez najnowsze przeglądarki.

Sposób drugi – HTML i CSS

Według mnie to całkiem ciekawe rozwiązanie, z którego korzysta chociażby iGoogle. Na tą metodę natrafiłem na blogu Piotra Nalepy w artykule [CSS] Zaokrąglone rogi bez używania obrazków, tam również dostępne jest demo Nie wdając się w szczegóły powiem tylko, że jest to jedna z najlepszych i najbardziej kompatybilnych metod.

Zalety

• Działa na wszystkich graficznych przeglądarkach www,
• Nie wymaga włączonej obsługi JavaScript.

Wady

• Wymaga ingerencji w strukturę strony.

Sposób trzeci – jQuery Corner

Jak się można łatwo domyślić metoda ta wykorzystuje popularną bibliotekę JavaScript jQuery. Plugin pochodzi od twórcy znanego jQuery Cycle. Jego użycie jest banalnie proste, wystarczy do pliku html dołączyć bibliotekę jQuery, plik z pluginem i wywołać metodę:

$('#kanciasty').corner(rodzaj_rogu);


Gdzie #kanciasty to selektor elementu jakiemu chcemy zmienić rogi a rodzaj_rogu to jeden z typów krawędzi. Masę dem, oraz rodzajów rogów znajdziecie na stronie projektu. Warto również zauważyć, że nie musimy ograniczać się tylko do zaokrągleń, opcji do wyboru jest mnóstwo.

Zalety

• Działa na wszystkich graficznych przeglądarkach www,
• Ogromna ilość wariacji i to dla każdego boku jednocześnie,
• Nie wymaga ingerencji w kod strony.

Wady

• Nie działa przy wyłączonej obsłudze JavaScript,
• Przy bardziej wymyślnych kształtach zaśmieca kod.

Sposób czwarty – DD_roundies

Nie będę się tutaj zbytnio rozpisywał. DD_roundies, jest to biblioteka, która korzysta z VML obsługiwanego przez IE oraz czystego JavaScript. Więcej o tej metodzie możecie przeczytać na blogu batman’a:  Rubensowskie kształty na stronie, czyli o zaokrąglaniu rogów słów kilka. Znajdziecie tam również proste demo.

Zalety

• Działa na wszystkich graficznych przeglądarkach www,
• Nie wymaga jQuery,
• Stosuje rozwiązanie adekwatne do możliwości przeglądarki,
• Nie wymaga ingerencji w kod strony.

Wady

• Nie działa przy wyłączonej obsłudze JavaScript.

To już wszystkie sposoby jakie chciałem wam przedstawić. Oczywiście nie są to wszystkie, brakuje chociażby metody obrazkowej, ale chciałem pokazać te według mnie najlepsze i najefektywniejsze