Szykowne narożniki, czyli Nifty Corners

Pomoc
Szykowne narożniki, czyli Nifty Corners
Zmieniony 26.06.2007.
Chcesz prosto, bez stosowania obrazków, uzyskać efekt zaokrąglonych narożników? Skorzystaj ze skryptu
Alessandro Fulciniti: Nifty Corners. W tłumaczeniu zasadniczej części artykułu A. Fulcinitiego znajdziesz niezbędne
objaśnienia.
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.
{mospagebreak heading=Szykowne narożniki - Nifty Corners&title=Jak uzyskać Nifty Corners?}
Jak uzyskać Nifty Corners?
Nifty Corners są kombinacją CSS i Javascript, umożliwiającą uzyskiwanie efektu zaokrąglonych narożników be
stosowania obrazków. Technikę tę tworzą cztery istotne elementy:
- Plik CSS dla ekranu
- Plik CSS dla drukarki
li>Biblioteka Javascript do tworzenia Nifty Corners
- 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>{mospagebreak title=Funkcje JavaScript}Funkcje JavaScript
Zobaczmy pierwszy przykład. W omówieniu, dla uproszczenia i jasności, będą pokazane tylko linie odwołujące się
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:
- Selektor elementu blokowego, który będzie mieć zaokrąglone narożniki
- Wyszczególnienie narożników, które mają być zaokrąglone
- Oznaczenie koloru zewnętrznego dopełnienia zaokrąglonych narożników
- Oznaczenie koloru wewnętrznego dopełnienia zaokrąglonych narożników
- Kształt zaokrąglonych narożników - parametr fakultatywny.
- 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 liParametr
http://www.pomoc.joomla.pl
Kreator PDF
Utworzono 7 March, 2017, 20:48
Pomoc
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 ma
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 p
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ązaniaParametry 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 yn
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ż
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Ã
- border #xxxxxx: tworzy krawędzie narożników. Możesz więc otrzymać przezroczyste tło zewnątrz i wewnątrz
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 s
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 pro
(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 j
JavaScript, a także unika się nagłego przeskoku w wyglądzie, gdy zaokrąglone narożniki zostaną zastosowane n
już istniejących stronach. Optymalną wartością jest dopełnienie szerokości 5px, jeśli chcesz stosować "normaln
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.{mospagebreak
title=Przykłady}Przykłady
Teraz przyjemniejsza część. Podobnie, jak w pierwszym artykule, przygotowałem przykłady ukazujące możliwości
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ł
w następujący kod:window.onload=function(){
if(!NiftyCheck())
return;
/* tutaj odwolanie do funkcji dodajÄ…cej Nifty Corners - szykowne rogi*/
}
Zaczynamy.{mospagebreak title=Przykład 1: element blokowy - wygładzone narożniki}Przykład pierwszy: element
blokowy (div) - wygładzone narożniki
http://www.pomoc.joomla.pl
Kreator PDF
Utworzono 7 March, 2017, 20:48
Pomoc
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Ã
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 za
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.{mospagebreak title=Przykład 2: dwa bloki}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");{mospagebreak title=Przykład 3: przezroczyste tło
wewnątrz}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ątr
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ź).{mospagebreak title=Przykład 4: z zaokrągleniami i bez}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ą Nif
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
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Ä
więcej elementów potomnych, ponieważ skrypt zajmuje czas procesora na dodanie pionowych linii
obwódki.{mospagebreak title=Przykład 5: eksplozja barw}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");{mospagebreak title=Przykład 6: elastyczność Nifty Corners}Przykład szósty: elastyczność Nif
http://www.pomoc.joomla.pl
Kreator PDF
Utworzono 7 March, 2017, 20:48
Pomoc
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
tradycyjny sposób. Istotą tego przykładu jest, jak w innych, w jaki sposób minimalnym wysiłkiem, niewielką ilością k
osiÄ…gnąć satysfakcjonujÄ…cy efekt. W dolnym bloku wykorzystano grafikÄ™. Zastosowano również przezroczystoÅ›Ä
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.{mospagebreak title=Przykład 7: przezroczyste,
kreskowane menu}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");{mospagebreak title=Przykład 8: poziome menu}
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");{mospagebreak title=Przykład 9: pływająca galeria zdjęć}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 lepszeg
stopniowania, gdy skrypt Java jest wyłączony. Zobaczmy użyty skrypt:Rounded("div#minipics
li","all","#C7C7F2","#FFF","smooth");{mospagebreak title=Przykład 10: Layout z nifty}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ę spra
wiele radości przygotowanie tego przykładu bez użycia obrazków, tylko nifty corners. W tym przypadku nie użyłem
osadzonego CSSa 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");
http://www.pomoc.joomla.pl
Kreator PDF
Utworzono 7 March, 2017, 20:48
Pomoc
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ć ja
zatraca się jej wdzięk. Przygotowując ten przykład, zacząłem włąśnie od takiego projektu.{mospagebreak
title=Zakończenie}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Å
do HTML.it i Alessandro Fulciniti. Artykuł został opublikowany 6 kwietnia 2005 w jezyku włoskim i angielskim. Możesz
skontaktować siÄ™ z autorem [email protected]. 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ąt
dyskusyjny o tym artykule
Tłum: Stefan Wajda [zwiastun]. Współpraca: Piotr Laskowski [josh].
Przedruk tylko za zgodą autora tłumaczenia.
http://www.pomoc.joomla.pl
Kreator PDF
Utworzono 7 March, 2017, 20:48