Szykowne narożniki, czyli Nifty Corners |
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łumaczaArtykuł 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:
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 JavaScriptZobaczmy 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
Parametr pierwszy: Selektor CSSSelektor jest parametrem określającym elementy dokumentu, w których zostaną zastosowane zaokrąglone narożniki. Możesz stosować następujące selektory:
Parametr drugi: wskazanie narożnikówSpó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ą:
Możesz łączyć słowa kluczowe. Na przykład, możesz użyć parametru Parametry trzeci i czwarty: deklaracja kolorówSpó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 Parametr piąty: opcje narożnikówPoniżej jest przykład kodu JavaScript: Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); Jak widzisz, jest tutaj piąty parametr:
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ładyTeraz 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żnikiTo 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 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 blokiPrzykł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ątrzNowa 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 bezW 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 barwW 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 CornersPrzykł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 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 menuPrzy 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 niftyDobrnę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 skryptuGdy 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, podyskutujJeś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]. |
|
Zmieniony ( 26.06.2007. ) |