Rounded corners

Czyli zaokrąglone rogi - fajnie to wygląda, zleceniodawcom się podoba, graficy starają się wcisnąć to wszędzie ;) Niby wszystko ok, a jednak - jest to prawdziwa kara dla web developera.
Pamiętam moje wojny z grafikami jeszcze w firmie w Polsce - ciągle ich błagałem o zaprzestanie wciskania zaokrąglonych rogów i cieni wszędzie gdzie to tylko możliwe. Powód był prosty - wtedy składałem strony na tabelkach ;) i dla jednego boxa z zaokrąglonymi rogami potrzebowałem conajmniej tabelki 3 x 3 pola - brrr....
Człowiek uczy się na błędach, dodatkowo grafik w firmie w której obecnie pracuje także lubuje się w zaokrąglonych rogach - przyszła więc pora na znalezienie innej metody.

Pierwsze z czym musiałem się zmierzyć to coś na styl paneli, ułożone jeden pod drugim, przeplatane kolory między rzędami, dotego podświetlane po najechaniu kursorem.

 

Kiedyś bez wahania użyłbym tabeli i po kłopocie - kodu by było od groma, ale kto się tym przejmował ;)
Jednak tabelki poszły w odstawkę, a zrobić to trzeba było - dotego chciałem użyć jak najmniej kodu + możliwie mało obrazków.
Wybór padł na dwa obrazki - lewy i prawy w kolorze tła z przeżroczystą częścią odsłaniającą zaokrąglenia.
Więc zrobiłem diva, nadałem mu wymiary i ustawiłem kolor tła - otrzymujemy ładny prostokąt o podanych wymiarach i kolorze, tyle że bez zaokrąglonych rogów.
Ok czas na zaokrąglenia - mamy dwa pliki w tylko jeden element, więc wewnątrz tworzymy drugiego diva lub inny element blokowy. Nadrzędnemu divowi dajemi tło
{background: #C3D4E8 url(lewy.gif) no-repeat left;}
, a wewnętrznemu
{background: url(prawy.gif) no-repeat right;}
i po sprawie, kolor paneli możemy zmieniać przez cssa, z podświetlaniem też nie ma problemu, uważam to za rozwiązanie łatwe i ergonomiczne. Jedyny problem może się pojawić jak ktoś będzie chciał zmienić kolor tła całości - wtedy niestety musimy edytować te dwa pliki.

Druga rzecz - załóżmy, że stronę mamy podzieloną na bloki (oczywiście wszystkie z zaokrąglonymi rogami).
Pierwsze co się nasuwa to użycie obrazków dla każdego rogu, nie powinno być z tym problemu jeśli bloki zawsze były by takie same i zawierały conajmniej 3 elementy blokowe wewnątrz. Rozwiązalibyśmy to podobnie jak na przykładzie powyżej - może troszkę więcej kombinowania, ale nie było by to problematyczne. Ale co jeśli te bloki nie są takie same - nawet nie wiemy jakie będą, bo przecież to dopiero jest projekt, który jak to projekt ulega pewnym modyfikacją ? Rozwiązaniem są nifty corners ;) rozwiązanie tak proste, a zarazem tak genialne, że aż żal go nie użyć - nie potrzebujemy to tego żadnego JavaScriptu, tylko dodajemy troszkę HTML + stylujemy to CSSem.
Zalety tego rozwiązania są ogromne - nie mamy żadnych obrazków, jeśli chcemy zmienić kolor jakiegoś boxu to zmieniamy to tylko w CSSie - działa z prawie każdą przeglądarką - niestety nie udało mi się zmusić IE 5.x do działania, ale jako, że ta przeglądarka to tylko margines, można ją pominąć, lub zastosować komentarze warunkowe i wyciąć poprostu dla tych przeglądarek nifty corners ;)

<_![if _!IE 5]>
nifty corners tutaj
<_![endif]>

należy usuńąć "_" podkreślenia przed !
Dzięki temu strona mimo, że nie posiada zaokrąglonych rogów nadal wyświetla się poprawnie i jest w pełni użyteczna nawet dla IE 5.x