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 szósty: elastyczność Nifty Corners

Nifty Corners. Przykład 6

Przykład unaocznia, że chociaż możliwe jest uzyskanie szykownych narożników bez wykorzystania drugoplanowgo tła i reguł CSS, to niekiedy - dla osiągnięcia specjalnych efektów - można posłużyć się tłem w tradycyjny sposób. Istotą tego przykładu jest, jak w innych, w jaki sposób minimalnym wysiłkiem, niewielką ilością kodu osiągnąć satysfakcjonujący efekt. W dolnym bloku wykorzystano grafikę. Zastosowano również przezroczystość. Kod JavaScript jest następujący:

Rounded("h3","all","#FFF","#efeadc","small border #999");
Rounded("div#news h3","all","#FFF","transparent");

Uwaga: W tym przypadku obwódka jest dodawana do elementu h3. Skrypt faktycznie może dodawać obwódkę do elementu, który zawiera wewnątrz tekst, przez otoczenie elementu blokowego zgodnie z ustawieniami DOM. Ale - uwaga - Nifty Corners zawiodą, jeżeli otaczany element składa się z wymieszanych składników - elementu blokowego i elementu wewnętrznego (inline) jako bezpośredniego potomka. Rozwiązania są, jak w poprzednim przypadku - dwa: unikanie obwódek lub dodanie specjalnego, zawierającego je wrapera.



Zmieniony ( 26.06.2007. )
 
następny artykuł »