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 dziesiąty: Layout z nifty

Nifty Corners. Przykład 10

Dobrnęliśmy więc do ostatniego przykładu, layoutu używającego zaokrąglonych narożników. Naprawdę sprawiło mi wiele radości przygotowanie tego przykładu bez użycia obrazków, tylko nifty corners. W tym przypadku nie użyłem osadzonego CSS’a lub skryptu Java. Sekcja nagłówka zawiera następujące linie:

<link rel="stylesheet" type="text/css" href="niftylayout.css">
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript" src="layout.js"></script>

Plik layout.js zawiera wszystkie wywołania skryptu Java, zobaczmy zawartość:

 
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#header","bottom","#D6DEEC","#84B7FF","smooth");
Rounded("div#header h1","bottom","#84B7FF","#657DA6","small smooth");
Rounded("div#content","tl bottom","#D6DEEC","#FFF","smooth");
Rounded("div#nav","tr bottom","#D6DEEC","#95B3DE","smooth");
Rounded("div#sidenotes","all","#D6DEEC","#B1C0D5","smooth");
Rounded("form","all","#D6DEEC","#B4CEF7","smooth");
Rounded("blockquote","tr bl","#FFF","#CDFFAA","border #88D84F");
Rounded("div#relax","all","#FFF","transparent");
Rounded("div#footer","all","#D6DEEC","#CCCCCC","small border #fff");
}

Dobrą praktyką jest w rzeczy samej unikanie używania osadzania skryptów Java lub CSS w sekcji nagłówka. Jedna rzecz o ostatnim przykładzie: ciekawostką jest że uzyskaliśmy grube "nifty corners" wokół nagłówka poprzez zaokrągenie jednocześnie nagłówka i h1 wewnątrz nagłówka.

Zanim zakończymy: Spróbuj zobaczyć jak będzie wyświetlana strona z wyłączonym skryptem Java, aby zobaczyć jak zatraca się jej wdzięk. Przygotowując ten przykład, zacząłem włąśnie od takiego projektu.



Zmieniony ( 26.06.2007. )
 
następny artykuł »