Jeśli jesteś właścicielem tej strony, możesz wyłączyć reklamę poniżej zmieniając pakiet na PRO lub VIP w panelu naszego hostingu już od 4zł!
Strony WWWSerwery VPSDomenyHostingDarmowy Hosting CBA.pl
NIVO Slider i zaokrąglone rogi - Laj.c0.pl
18
Lip
2011
Aktualnie pracuję (a raczej obijam się) nad pewnym projektem. Choć uważam, że z moją wiedzą nie nadaję się do krojenia szablonów na zlecenie, postanowiłem zabrać się za jakiś layout. Wpłynęły na to dwie informacje, mianowicie praca jest wykonywana za free oraz fakt, że w razie mojej porażki są dwie inne osoby które się tym zajmą. Przegrać raczej nie mogę bo zrobiłem już sporo mimo tego, że pojawiło się w trakcie pracy wiele problemów, z drugiej zaś strony wiele jest jeszcze przede mną. Jedyne co może mnie pokonać to fakt niedopasowania zakodowanego szablonu do wszystkich przeglądarek.

Jednym z napotkanych problemów była konieczność zaokrąglenia rogów w NIVO Sliderze. Jest to bardzo funkcjonalny slider posiadający jedną wadę - nie obsługuje plików .png oraz przezroczystości jaką ten format nam daje. Przez co trzeba sporo kombinować aby uzyskać ładnie wyglądające zaokrąglone rogi obrazków. Na polskich stronach nie znalazłem rozwiązania mojego problemu więc postanowiłem przeszukać też zagraniczne.

Od razu rzucił mi się w oczy jeden ze sposobów. Polega on w pełni na CSS3 i własnościach przeglądarek (dla pewności, że zadziała np. na FF2). W specyfikacji CSS3 znajduje się styl border-radius pozwalający zaokrąglić nam rogi diva. Próbowałem wykorzystać ten sposób dodając taki kod: Kod:    -webkit-border-radius: 10px; /* Safari, Chrome */
    -khtml-border-radius: 10px;    /* Konqueror */
    -moz-border-radius: 10px; /* Firefox */
    border-radius: 10px;
w pliku css tworzonej strony, a dokładniej dla diva #slider (o stylach z myślnikami napisałem poniżej).
Teoretycznie powinno działać, jednak  obrazki zaokrąglały się na ułamki sekundy przed ich zmianą, nowe slajdy zaś znów straszyły kanciastością. Jedyne czego brakowało to powtórzenia całej operacji w innym pliku, dla innej klasy.
TUTAJ mamy opisane to rozwiązanie.

Polega ono na wklejeniu podanego już wyżej kodu do jeszcze jednego pliku - nivo-slider.css dla klasy nivo-slice

Ostatecznie powinno wyglądać to tak:
Kod:.nivo-slice {
    -khtml-border-radius: 10px;    /* Konqueror */
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    /*pozostałe style*/
}
To wszystko, teraz możemy cieszyć się zaokrąglonymi rogami bez tak prymitywnych metod jak wklejanie w narożniki slajdów kawałków tła strony. Jedyne co boli to fakt, że nie dostaniemy już w walidatorze obrazka "Poprawny CSS". Winę za to ponoszą style poprzedzony myślnikiem. Teoretycznie można je usunąć, jednak wtedy ograniczymy nasze rozwiązanie tylko do najnowszych przeglądarek obsługujących CSS3

Nick:

Pytanie kontrolne: Który bohater Matrixa ma dużo dzieci?

Komentarz:



Udostępnij na Facebooku Udostępnij na Twitterze