UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start
Szykowne narożniki, czyli Nifty Corners - Szykowne narożniki - Nifty Corners Drukuj Email
Spis treści
Szykowne narożniki - Nifty Corners
Jak uzyskać Nifty Corners?
Funkcje JavaScript
Przykłady
Przykład 1: element blokowy - wygładzone narożniki
Przykład 2: dwa bloki
Przykład 3: przezroczyste tło wewnątrz
Przykład 4: z zaokrągleniami i bez
Przykład 5: eksplozja barw
Przykład 6: elastyczność Nifty Corners
Przykład 7: przezroczyste, kreskowane menu
Przykład 8: poziome menu
Przykład 9: pływająca galeria zdjęć
Przykład 10: Layout z nifty
Zakończenie

Przykład czwarty: z zaokrągleniami i bez

Nifty Corners. Przykład 4

W przykładzie dobrałem dwa bloki tej samej klasy. W pierwszym nie ma żadnych dodatkowych reguł CSS. Drugi jest niepowtarzalnym elementem wyróżnionym za pomocą selektora identyfikatora. Przykład pokazuje, jak wyglądają Nifty Corners z krawędziami (obwódkami). Zastosowano dwa odwołania do funkcji Rounded, aby otrzymać różne zaokrąglenia u góry i u dołu.

Rounded("div#nifty","top","transparent","#FFC5FF","border #C0C0C0");
Rounded("div#nifty","bottom","transparent","#F0F0E7","small border #C0C0C0");

Aby nagłówek miał inne tło niż tekst, umieściłem dwa elementy potomne w bloku z małymi zaokrąglonymi narożnikami.

Drobna uwaga dotycząca stosowania obwódki (krawędzi): skrypt akutomatycznie dodaje pionowe linie do elementów potomnych umieszczonych bezpośrednio w elemencie nadrzędnym (z zaokrąglonymi narożnikami), aby uniknąć deklarowania ich w CSS i umożliwić lepszy efekt w przypadku, gdy JavaScript jest wyłączony i realizowane są tylko dyrektywy CSS.

Tak więc, jeśli otrzymujesz nienajlepszy efekt zastosowania obwódki, najprostszą drogą jest umieszczenie elementów w dodatkowym bloku ze wszystkimi zaokrąglonymi narożnikami.

Sugeruję skorzystanie z tego rozwiązania także wówczas, gdy element z zaokrąglonymi narożnikami zawierać będzie więcej elementów potomnych, ponieważ skrypt zajmuje czas procesora na dodanie pionowych linii obwódki.



Zmieniony ( 26.06.2007. )
 
następny artykuł »