Od tłumacza

Artykuł został opublikowany dwukrotnie na witrynie Nifty Corners: miglioramenti e nuove funzionalite.

Oryginał artykułu w wersji angielskiej znajdziesz pod adresem Nifty Corners: rounded corners without images. (warto go przejrzeć choćby po to, by zobaczyć działanie NiftyCorners w praktyce - tutaj zilustrowaliśmy go bowiem zrzutami ekranów)

Dziękuję Piotrowi Laskowskiemu (Joshowi) za znaczące wsparcie w przyswojeniu artykułu polskim użytkownikom.

Jak uzyskać Nifty Corners?

Nifty Corners są kombinacją CSS i Javascript, umożliwiającą uzyskiwanie efektu zaokrąglonych narożników bez stosowania obrazków. Technikę tę tworzą cztery istotne elementy:

1. Plik CSS dla ekranu
2. Plik CSS dla drukarki
li>Biblioteka Javascript do tworzenia Nifty Corners
3. Kod Javascript tworzący konkretne zaokrąglone narożniki

Pierwsze trzy składniki nie wymagają żadnych ingerencji, trzeba je tylko zadeklarować w sekcji HEAD dokumentu HTML w następujący sposób:

<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>

Funkcje JavaScript

Zobaczmy pierwszy przykład. W omówieniu, dla uproszczenia i jasności, będą pokazane tylko linie odwołujące się wprost do CSS. Tutaj jest cały kod JavaScript:

<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return; 
    Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); 
    }
   </script>

Funkcja NiftyCheck sprawdza wsparcie DOM [Document Object Model]. Jeśli próba przebiegnie pomyślnie, wywoływana jest tylko jedna tworząca zaokrąglony narożnik funkcja Rounded, w której trzeba ustawić minimum cztery z pięciu parametrów. Te parametry to:

1. Selektor elementu blokowego, który będzie mieć zaokrąglone narożniki
2. Wyszczególnienie narożników, które mają być zaokrąglone
3. Oznaczenie koloru zewnętrznego dopełnienia zaokrąglonych narożników
4. Oznaczenie koloru wewnętrznego dopełnienia zaokrąglonych narożników
5. Kształt zaokrąglonych narożników - parametr fakultatywny.
6. Omówimy je kolejno.

Parametr pierwszy: Selektor CSS

Selektor jest parametrem określającym elementy dokumentu, w których zostaną zastosowane zaokrąglone narożniki. Możesz stosować następujące selektory:

• selektor prosty, wskazujący element dokumentu, np.: p, blockquote czy h2
• selektor identyfikatora (id), wskazujący niepowtarzalny element dokumentu, z wyspecyfikowanym identyfikatorem: np. div#content, p#news czy li#home
• selektor klasy, z wyspecyfikowanym elementem: np. div.entry czy h2.highlight
• selektor potomka (kontekstowy), z pewnym ograniczeniem : możesz skomponować go z dowolnego selektora identyfikatora z następującym po nim selektorem prostym. Oto poprawne przykłady: div#news div lub ul#menu li

Parametr drugi: wskazanie narożników

Spójrz ponownie do przykładowego kodu JavaScript:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Drugi parametr wskazuje tutaj, że należy zaokrąglić wszystkie narożniki. Wyszczególniając naróżniki, które mają być zaokraglone, możesz zastosować następujące słowa kluczowe, oddzielając je spacją:

• all: zaokrąglone będą wszystkie narożniki,
• top: zaokrąglone będą górne narożniki,
• bottom: zaokrąglone będą dolne narożniki,
• tl: zaokrąglony będzie lewy górny narożnik [top-left],
• tr: zaokrąglony będzie prawy górny narożnik [top-right],
• bl: zaokrąglony będzie lewy dolny narożnik [boottom-left],
• br: zaokrąglony będzie prawy dolny narożnik [bottom-right].

Możesz łączyć słowa kluczowe. Na przykład, możesz użyć parametru top br - zaokrągli górne narożniki i prawy dolny. Uwaga: wszystkie narożniki możesz zaokrąglić w trojaki sposób, stosując top bottom albo tl tr bl br lub all. To równoważne rozwiązania

Parametry trzeci i czwarty: deklaracja kolorów

Spójrz znowu do przykładu:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Trzeci i czwarty parametr określają kolejno zewnętrzny i wewnętrzny kolor dopełnienia przestrzeni, jaka powstaje w yniku zaokraglenia. Kolor musi być określony w formacie szesnastkowym z symbolem #, trzema lub sześcioma cyframi. Możesz również skorzystać z wartości transparent (przezroczyste), zarówno dla otoczenia zewnętrznego, jak i wypełnienia wewnętrznego. Z wartości transparent możesz skorzystać tylko w jednym przypadku, nie można uzyskać równocześnie przeźroczystego tła i otoczenia. Przezroczystość wewnątrz, nowa w tej wersji Corners Nifty opcja, może być niezwykle użyteczna - poeksperymentuj, stosując przeźroczyste tło i kolor wewnętrzny oraz odwrotnie.

Parametr piąty: opcje narożników

Poniżej jest przykład kodu JavaScript:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Jak widzisz, jest tutaj piąty parametr: smooth. W efekcie otrzymasz lekko złagodzone przejście od koloru narożnika do koloru tła. Piąty parametr jest fakultatywny. Jeśli zostanie zastosowany, otrzymasz różnego rodzaju zaokrąglone narożniki. Możesz skorzystać z opcji wymienionych poniżej, wpisując odpowiednie słowa kluczowe:

• smooth: tworzy zaokrąglone narożniki z łagodnym antyaliasingiem. Biblioteka Javascript dokona autoamatycznego wyliczenia koloru pośredniego między zewnętrznym i wewnętrznym; oczywiście, oba kolory muszą być wyszczególnione
• border #xxxxxx: tworzy krawędzie narożników. Możesz więc otrzymać przezroczyste tło zewnątrz i wewnątrz, ale jedynie w tym przypadku - efektem jest bowiem sama obwódka, zaokrąglona krawędź (pamiętaj, kolory muszą być określone w formacie szesnastkowym wraz ze znakiem #, wyrażonym trzema lub sześcioma cyframi).
• small: tworzy niewielkie zaokrąglenia, które możesz stosować w połączeniu z wymienionymi powyżej, a więc small smooth czy small border #xxxxxx.

Dopełnienie pionowe

Zanim przeanalizujemy przykłady, pozwól mi objaśnić cenną właściwość Nifty Corners, ale ukrytą. Dodałem proste (podstawowe) pionowe dopełnienie (padding) wokół elementów. Skrypt automatycznie usuwa je przed utworzeniem zaokrąglonych narożników. To bardzo użyteczne rozwiązanie z trzech powodów. łatwiej jest zaadaptować zaokrąglone narożniki w istniejących stronach, strony będą wyglądać lepiej w przypadkach, gdy wyłączona jest obsługa JavaScript, a także unika się nagłego przeskoku w wyglądzie, gdy zaokrąglone narożniki zostaną zastosowane na już istniejących stronach. Optymalną wartością jest dopełnienie szerokości 5px, jeśli chcesz stosować "normalne" zaokrąglone narożniki, a 2px, jeśli chcesz uzyskać niewielkie narożniki.

Skoro omówiliśmy wszystkie punkty, możemy rozważyć konkretne przykłady.

Przykłady

Teraz przyjemniejsza część. Podobnie, jak w pierwszym artykule, przygotowałem przykłady ukazujące możliwości Nifty Corners. Jeśli znasz pierwszy artykuł, zauważysz, jak zostały rozwinięte ich właściwości. W każdym przykładzie zostanie podany tylko fragment Javascript wywołujący funkcję Rounded, pamiętaj wszakże, że winien on być włączony w następujący kod:

window.onload=function(){
if(!NiftyCheck())
    return;
/* tutaj odwolanie do funkcji dodającej Nifty Corners - szykowne rogi*/
}

Zaczynamy.

Przykład pierwszy: element blokowy (div) - wygładzone narożniki

To przykład, który widzieliśmy na początku. Odwołanie do Javascript jest następujące:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Przykład przedstawia element blokowy, zawierający nagłówki H1 i H2 oraz elementy P (akapity). Wszystkie narożniki są zaokrąglone z lekkim wygładzeniem (antyaliasingiem).

Ktoś próbował tworzyć rzeczywisty antyaliasing zaokrąglonych narożników bez obrazków, modyfikując mocno mój oryginalny skrypt. Sądze jednak, że przedstawione przeze mnie rozwiązanie jest najlepszym, jakie mogłem znaleźć, aby zewnętrzny kolor tła i wewnętrzny kolor bloku połączyć najłagodniej, bez zbytniego przeciążania strony zarówno dużą ilością CSS, Javascript, a więc i czasem potrzebnym na obliczenia procesora oraz analizę DOM strony.

Nie jestem bezwględnie przeciwny stosowaniu obrazków. Sądzę, że tam, gdzie potrzebny jest rzeczywisty antyaliasing, zastosowanie metody tradycyjnego HTML w połączeniu z CSS-em i obrazkami tła jest najlepszą drogą do uzyskania optymalnych efektów.

Przykład drugi: dwa bloki

Przykład przedstawia dwa "pływające" elementy blokowe. Większy ma zaokraglone wszystkie narożniki, mniejszy tylko dwa - po prawej stronie: górny i dolny. Narożniki są zaokrąglone z lekkim wygładzeniem (antyaliasingiem). Odwołania do funkcji JavaScript są następujące:

Rounded("div#content","all","#FFF","#9DD4FF","smooth");
Rounded("div#nav","tr br","#FFF","#FFC79D","smooth");

Przykład trzeci: przezroczyste tło wewnątrz

Nowa udoskonalona wersja Nifty Corners umożliwia zdefiniowanie zewnętrznego koloru dopełnienia narożników i wewnętrzne przezroczyste tło. To jedno z najbardziej znaczących udoskonaleń Nifty Corners. W przykładzie wewnątrz bloku umieszczona została grafika przedstawiająca naturę. Kod JavaScript jest następujacy:

Rounded("div#box","all","#6385D8","transparent");

Uwaga o przezroczystości wewnątrz. Kiedy zmieniasz narożniki na zaokrąglone i używasz opcji "small" oraz "transparent" wewnątrz, to uzyskujesz efekt wygładzenia wewnątrz. Nie jest to możliwe, gdy stosujesz obwódkę (krawędź).

Przykład czwarty: z zaokrągleniami i bez

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.

Przykład piąty : eksplozja barw

W tym przykładzie zastosowałem selektor potomka (kontekstowy) i przezroczystość wewnątrz w jednej linii kodu, ale dla dwóch przeciwleglych narożników. Tutaj jest odwołanie do Javascript:

Rounded("div#news div","tr bl","#FFF","transparent");

Przykład szósty: elastyczność Nifty Corners

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.

Przykład siódmy: przezroczyste, kreskowane menu, tym razem z obwódkami.

Ten przykład pokazuje siłę selektora potomka (kontekstowego) i przezroczystości. Za pomocą jednej linii kodu odwołującego się do JavaScript uzyskujemy przyjemne menu:

Rounded("div#nav li","top","transparent","#BEFF9A","border #508F0F");

Przykład ósmy: poziome menu

Przy pomocy poprzedniego przykładu możemy także uzyskać całkiem niezwykłe i przyjemne menu z obwódkami. Potrzebujemy tylko następujący wywołanie skryptu Java:

Rounded("div#nav li","tr bl","transparent","#9ABEFF","border #3562B1");

Przykład dziewiąty: "pływająca" galeria zdjęć

Przykład ten jest bardzo podobny prezentowanego w pierwszym artykule, ale dużo lepszy z dwóch powodów. Po pierwsze, ze względu na wygładzanie. Po drugie i ważniejsze, pionowe odstępy domyślnie ustawiane w CSS-ie są automatycznie usuwane przez skrypt. Pozwala to uniknąć efektu przeskoku miniaturek podczas, gdy strona jest całkowicie przeładowywana i wykonuje się skrypt Java.

Przejście teraz jest, jak widzisz, całkiem podobne do wczytywania obrazków tła w tradycyjny sposób. Zauważ, że w CSS strony, pionowe odstępy 5px na górze i dole dodawane do listy pozycji są usuwane przez skrypt "nifty corners". Użycie pionowych odstępów w CSS i automatyczne ich usuwanie przez skrypt jest wysoce polecane szczególnie na stronach, gdzie użyte są "nifty corners" lub gdy obrazki są zaokrąglane przez "nifty corners", także nawet dla lepszego stopniowania, gdy skrypt Java jest wyłączony. Zobaczmy użyty skrypt:

Rounded("div#minipics li","all","#C7C7F2","#FFF","smooth");

Przykład dziesiąty: Layout z nifty

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.

Zakończenie. Prawa autorskie. Kontakt. Pobieranie skryptu

Gdy został opublikowany pierwszy artykuł, wiedziałem, że wiele rzeczy wymaga poprawienia> Myślę, że ta wersja jest ostateczna i stabilna. Nifty Corners są darmowe, zarówno do użytku prywatnego, jak i komercyjnego, ale żadne modyfikacje skryptu i/lub CSS nie są dozwolone. Prawa własności do tego artykułu i Nifty Corners przynależą w pełni do HTML.it i Alessandro Fulciniti. Artykuł został opublikowany 6 kwietnia 2005 w jezyku włoskim i angielskim. Możesz skontaktować się z autorem Ten adres email jest ukrywany przed spamerami, włącz obsługę JavaScript w przeglądarce, by go zobaczyć Skrypt możesz pobrać TUTAJ. Miłej zabawy!

Zgłoś uwagi, podyskutuj

Jeśli chcesz skomentować ten artykuł, zgłosić uwagi, pytania, sugestie, przejdź na nasze FORUM.JOOMLA.PL - Wątek dyskusyjny o tym artykule

Tłum: Stefan Wajda [zwiastun]. Współpraca: Piotr Laskowski [josh].
Przedruk tylko za zgodą autora tłumaczenia.