Feng Zhu Design Inc powstał w 1999 roku. Jak sama nazwa wskazuje jego założycielem był Feng Zhu.
Od tamtego czasu Feng współpracował z dużymi klientami do których zaliczamy m.in. Microsoft, Electronic Arts, Industrial Light + Magic, NCSoft, Warner Brothers, Lucasfilm, Bay Films, Epic Games oraz wielu innych.

Na początku 2009 roku powstała kolejna firma – FZD School of Design w Singapurze, w której studenci doskonalą swoje umiejętności z zakresu: Digital Painting, Concept Drawing oraz Dynamic Sketching.

Feng Zhu na swoim profilu na YouTube.com zamieszcza bardzo regularnie, ciekawe i pouczające videotutoriale oraz porady.
Oto niektóre z nich:

Inspiration

Fantasy Landscape

UFO Attacks!

Sketch Painting

Digital Landscape

Pozostałe filmy znajdziecie na oficjalnej stronie FZD (obecnie jest dostępnych 40 darmowych tutoriali).

A oto niektóre z prac Feng Zhu:

źródło: fengzhudesign.blogspot.com

Ostatnio znów zaczęłam troszkę rysować, nie tylko przy pomocy tabletu i programu graficznego, ale również papieru i tradycyjnego ołówka. W związku z tym musiałam poszukać pomocniczych materiałów – tutoriali, książek oraz przykładowych rysunków na których mogłabym się wzorować.
Oto niektóre z tutoriali jakie znalazłam w ostatnim czasie:

Male Anatomy Patterns by ~Snigom on deviantART

Big Guide to Drawing the Body by `Cedarseed on deviantART

Face Patterns Tutorial by ~Snigom on deviantART

Drawing Eyes by =Clap-san on deviantART

Female Anatomy Patterns by ~Snigom on deviantART

Tutorial dragon head profile by ~Smocza-wladczyni on deviantART

Dragonhead Tutorial part two by *alecan on deviantART

Dragonhead Tutorial part one by *alecan on deviantART

Female poses chart by *Aomori on deviantART

Hair tutorial 2 – Dark hair by *akaLilith on deviantART

Basic Pencil Shading by ~Snigom on deviantART

How To Draw Women by ~TArthurSmith on deviantART

Bone Structure of Demon Wings by ~AvrilDC on deviantART

Shading Tutorial by *Tatchit on deviantART

:GENERAL TUT FOR DRAWINGS: by *SilentDeath007 on deviantART

Pencil portrait tutorial by *Aomori on deviantART

Photorealism Tutorial by *markcrilley on deviantART

STEP BY STEP by ~fixart on deviantART

videotutoriale

Oczywiście są to tylko wybrane tutoriale, w sieci można znaleźć ich o wiele więcej, do tego jest też duży wybór książek o tematyce rysunkowej.
Życzę miłej i owocnej w doskonałe rysunki nauki.

źródło zdjęcia: flickr.com

Corel Painter jest jednym z programów służących do tworzenia grafiki rastrowej. Jest doskonałym narzędziem do nauki i praktyki rysunku cyfrowego. Dzięki jego zaawansowanym funkcjom jesteśmy w stanie odwzorować w naszych pracach tradycyjne narzędzia malarskie. Do wyboru mamy m.in. ołówek, węgiel, pastele, pióro, farbę olejną i akrylową, akwarelę, itp.

Dla codziennych użytkowników Adobe Photoshop na pewno dobrą informacją będzie fakt, że Corel ten bardzo dobrze radzi sobie z obsługą plików psd – zachowuje kolory jak i układ warstw dzięki czemu import i eksport plików między tymi programami jest krótszy i o wiele wydajniejszy.

Najbardziej naturalne i realistyczne efekty uzyskamy dzięki współpracy programu z tabletami graficznymi, szczególnie polecane są tablety marki Wacom – tablet pozwala nam na odwzorowanie naturalnej siły nacisku pędzla podobnie jak dzieje się to między farbą a tradycyjnym płótnem.

Pobierz 30 dniową wersję testową Corel Painter 11

Dla osób zainteresowanych nauką i pracą w tym programie polecam następujące tutoriale:

Filmy instruktażowe, których autorem jest Michał Ziemak – na blogu Michała znajdziecie wpisy z pomocnymi videotutorialami

Inne filmy na youtube.com

Cieniowanie w Corel Painter

Jak namalować małego smoka w Corel Painter

Portret Angeliny Jolie

Porady dla fotografów

W tym artykule postaram się przedstawić prosty sposób na zaprojektowanie portfolio w Adobe Photoshop – instruktaż ten szczególnie przydatny może okazać sie dla tych, którzy nie opanowali jeszcze sprawnego posługiwania się tym programem.

Do tego projektu wykorzystałam 960 Grid System, który pozwala na szybkie podzielenie layoutu na równe kolumny (co później ma znaczenie przy kodowaniu szablonu).
Pliki źródłowe z przygotowaną podziałką można pobrać z oficjalnej strony 960 Grid System. Znajdziecie w tym zipie pliki m.in. dla Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Adobe Photoshop, Visio, Exp. Design.

Ja skorzystałam z pliku, który dzieli szablon na 12 kolumn – szerokość całkowita szablonu wynosi 960 pikseli.
Po otwarciu wyglada on tak:

Tło strony

Tło składa się z jednolitego zabawienia, na które następnie został nałożony monochromatychny szum oraz poruszenie:

• Tworzymy nową warstwę, która swoją powierzchnią zakryje całe pole szablonu
• Za pomocą narzędzia Wiadro z farbą / Paint Brucket Tool nadajemy jednolity kolor (np. #161616)
• Wchodzimy w Filtry / Filter i wybieramy Szum / Noise —» Dodaj szum / Add noise… (ja wybrałam wartość 3, gaussian, monochromatic)

  

• Mając juz nałożony szum wybieramy Filtry / Filter —» Rozmycie / Blur —» Poruszenie / Motion Blur (kąt:0, dystans:42)

Uzyskany efekt:

Header

W nagłówku umieściłam logotyp strony oraz menu poziome nawigacyjne.

Logo
Logotyp to Wasza indywidualna inwecja twórcza lub skorzystanie z jednego z wielu serwisów oferujących darmowe znaki firmowe.
Ja dla potrzeb tego artykułu skorzystałam z pliku zamieszczonego na Logo Instant. Zmieniłam jedynie font na bardziej standardowy – Arial (bold italic).

Menu
Pozycje w menu mają dwa stany – przed najechaniem na nie kursorem (ciemno szare) i po (czerwone)
Do stworzenia pojedynczego buttona wykorzystujemy Rounded Rectangle Tool / Prostokąt Zaokrąglony z 3 pikselowym zaokrągleniem krawędzi. Wypełnienie kolorem tego elementu nie jest istotne, ponieważ za chwilę będziemy nakładać na tą warstwę style.

Teraz nadszedł czas na ostylowanie prostokąta. W tym celu przy aktywnej warstwie z kształtem klikamy na Add a layer style / Dodaj styl warstwy

Na pierwszy ogień pójdzie button z czerwonym gradientem – czyli aktywna pozycja w menu.

• Cień / Drop shadow

  
  
  

• Cień wewnętrzny / Inner shadow

  
  
  

• Blask wewnętrzny / Inner glow

  
  
  

• Faza i płaskorzeźba / Bevel and Emboss

  
  
  

• Nałożenie gradientu / Gradient Overlay

  
  
  

• Obrys / Stroke

  
  
  

Niemalże identyczne style stosujemy dla ciemno szarego przycisku, różni się on jedynie kolorami.

• Cień / Drop shadow

  
  
  

• Cień wewnętrzny / Inner shadow

  
  
  

• Blask wewnętrzny / Inner glow

  
  
  

• Faza i płaskorzeźba / Bevel and Emboss

  
  
  

• Nałożenie gradientu / Gradient Overlay

  
  
  

• Obrys / Stroke

  
  
  

Tekst
Tytuły na buttonach w menu napisane sa fontem Arial (krój: bold italic) o wielkości 15 pikseli, kolor #ffffff, dla drobnej wypukłości dodałam lekkie cień pod słowami:

Efekt końcowy samego menu:

Header już prawie cały mamy z głowy, dla urozmaicenia można dodać w tle jakieś delikatne wzorki, gradienty, etc. Ja dla przykładu umieściłam delikatny gradient od przezroczystości do koloru białego – za pomocą Reflected Gradient / Gradient lustrzany i następnie zmniejszyłam jego krycie.

Efekt końcowy headera:

Pojedynczy wpis

Każdy pojedynczy “wpis” znajduje się w przechodzącym przez całą szerokość szablonu białym pasie połączonym z delikatnymi gradientami, zarówno w środku jak i na zewnątrz.
Za pomocą narzędzia Rectangle Tool / Prostokąt tworzymy kształt o odpowiadającej nam wysokości, jako kolor wypełnienia należy wybrać jakiś jasny odcień, ja uzyłam bardzo jasnej szarości #f8f8f8 (na wielu monitorach może wyglądać na biel).
Teraz dodajemy tej warstwie styl: obrys / stroke o kolorze #ffffff i 1 pikselu grubości linii skierowanej do wnętrza kształtu.

Gradient wewnątrz wpisu
Moim zamiarem było stworzenie “blasku wewnętrznego” skierowanego bezpośrednio z góry jak i z dołu kształtu. W tym celu na kolejnej nowej warstwie zaznaczyłam interesujący mnie obszar i w nim na pomocą Gradient Tool / Gradient poprowadziłam gradient od koloru czarnego (#000000) do przezroczystości. Z początku gradient jest bardzo mocno widoczny – dlatego też należy dobrać odpowiednie jego krycie aby był mniej rzucający się w oczy.

Taki sam gradient znajduje się na dole – można poprzednią operację powtórzyć lub po prostu skopiować tamtą warstwę i odwrócić ją w pionie.

Mając obydwa efekty na osobnych warstwach można z łatwością ustawiać im inny poziom krycia lub inny kolor – daje nam to większą swobodę wprowadzania zmian w szablonie.

Gradient pod wpisem
Kolejną warstwę z gradientem tworzymy pod naszym białym polem na wpis – gradient tak jak wcześniej przebiega od koloru czarnego do przezroczystości – tutaj krycie tylko troszkę zmniejszamy tak aby efekt był czytelny na ciemnym tle strony.
Jak w przypadku poprzednich gradientów – ten również można powielić na nowa warstwę, odwrócić i przenieść nad wpis.

Zawartość wpisu
Jako, że jest to portfolio to należy przede wszystkim pokazać wgląd do realizacji – tutaj zastosowałam miniaturę grafiki, jej tytuł oraz krótki opis.
W tym miejscu na pomoc przychodzi nam wyżej wspomniany 960 Grid System. Dzięki wyznaczonym pionowym liniom pomocniczym możemy bez żadnego problemu wyznaczyć kolumny.
W tym przykładowym projekcie lewa kolumna ma 540 pikseli szerokości a prawa 380 pikseli.

Treść
Treść w lewej kolumnie napisana jest fontem Trebuchet MS o wielkości 12 pikseli, kolorze #6d6d6d. Tytuł realizacji to ten sam font – wielkość znaków 28 pikseli, krój pogrubiony, kolor #d9110a.

Przycisk “visit” to kopia pozycji z menu, jedynie zmniejszona.

Miniatura

Miniatura realizacji położona jest w prostokącie o białym wypełnieniu i nadanym cieniu zewnętrznym o odległości 0 i wielkości 6.

Aby idealnie w środku białego prostokąta umieścić miniaturę w równiej odległości od krawędzi polecam zaznaczyć cały prostokąt – klikając na maskę warstwy trzymając ctrl.

Teraz z menu należy wybrać Select / Zaznacz —» Modify / Zmień —» Contract / Zawęź Zaznaczenie i podać 10 pikseli dla zawężenia. Tym sposobem uzyskamy równe zaznaczenie które następnie możemy wykorzystać jako wielkość miniatury realizacji.

Miniatura ma nadane obrysowanie wewnętrzne. Dla późniejszej wygody modyfikacji obrys ten został nadany nieco inaczej niż poprzez style warstwy. Należy utworzyć kolejna nową warstwę, zaznaczyć obszar, w którym znajduje się obrazek realizacji (klikając na miniaturkę warstwy na liście warstw z przytrzymanym ctrlem) i następnie z menu wybrać Edit / Edycja —» Stroke / Obrys, ja wybrałam grubość 3 pikseli, kolor biały (#ffffff) i lokalizację: do środka. Po zmniejszeniu krycia tej warstwy do 17% powstała lekka półprzezroczysta ramka.

Tym oto prostym sposobem utworzyliśmy pierwszy “wpis”. Kolejne wpisy będą jego kopią. Dla wygody podpowiem, że bardzo przydatne są katalogi na liście warstw – dzięki nim można wszystko uporządkować i rozdzielić wszystkie elementy, sprawdza się to szczególnie gdy chcemy skopiować kilka warstw jednocześnie nie gubiąc ich przy okazji. Kopiując za jednym podejściem cały katalog (grupę) warstw na pewno ten problem nam znika.
Tak dla przykładu wyglądu kompletny układ grup dla tego projektu:

Kopiując grupę warstw dla pojedynczego wpisu i umieszczając kolejne pod sobą stworzyliśmy listę trzech wpisów, aktualnie projekt na tym etapie wygląda następująco:

Pozostaje nam dolna część strony podzielona na 3 kolumny oraz stopka.

Trzy boksy w trzech kolumnach

Dolne boksy z niewielką ilością treści również zostały wyznaczone za pomocą 960 Grid System. Każdy z nich na 320 pikseli szerokości z 10 pikselowym marginesem wewnętrznym z każdej strony.
Na tło całego pasa składa się prostokąt o wypełnieniu kolorem #121212 oraz nadanym obrysem:

Warstwa ta ma zmniejszone krycie wypełnienia (Fill) do 71% (opcja ta znajduje się tuż pod suwakiem do regulacji krycia całej warstwy). Zmniejszając poziom Fill możemy zmienić poziom krycia jedynie domyślnym właściwościom warstwy (wypełnieniu), dodatkowe style wtedy nie ulegają ukryciu. Mieszając poziomy krycia całkowitego i krycia wypełnienia można uzyskać ciekawe efekty.

Światło
Każdy z 3 boksów na samej górze ma nadane światło. Efekt ten można uzyskać tworząc nową warstwę, nakreślając na niej nieduży owalny gradient od koloru białego (#ffffff) wewnątrz do przezroczystości na zewnątrz.

Następnie należy tą warstwę odpowiednio ustawić i zmniejszyć jej krycie aby była nieco jaśniejsza od tła.
Należy ją ustawić tak aby jej fragment wystawał poza ciemny pas. Tak jak jest na obrazku:

Teraz aby ta warstwa sprawiała wrażenie uciętej (ale bez jej zaznaczania i usuwania fragmentu – w końcu nie wiadomo czy jeszcze nie przyda nam się w całek okazałości) ukryjemy niepotrzebny fragment za pomocą maski warstwy.
W tym celu musimy zaznaczyć warstwę której ten gradient ma na pewno nie przekraczać czyli ciemno szary poziomy pas (najwygodniej kliknąć na miniaturkę warstwy na liście warstw). Trzeba w tym miejscu uważać aktywną warstwą nadal musi być gradient przy zaznaczonym pasie.

Aktywnej warstwie musimy teraz nadać maskę, która to będzie miała kształt zaznaczonej wcześniej warstwy z pasem. Sprawi ona, że gradient będzie widoczny tylko wewnątrz tego zaznaczenia. Maskę tą nadajemy klikając na ikonkę Add layer mask / Dodaj maskę zaznaczoną na obrazku poniżej:

Kompletny powielony trzykrotnie boks z treścią i ikonami wygląda tak:

Ikony pochodzą z serwisu Iconfinder.net

Stopka

Stopka jest dosłownie kopią pojedynczego wpisu – została jedynie zmniejszona na wysokość oraz zostało do niej przeniesione logo w wersji B&W.

Efekt końcowy

Tym oto sposobem doszliśmy do końca tego tutoriala, efekt końcowy wygląda tak jak poniżej:

Życzymy miłej nauki!

Tutorial napisany dla serwisu Vivee.info

designbump.com

Dzięki tej stronie wyłowiłam kilka bardzo przydatnych stron z materiałami graficznymi, darmowymi paczkami, inspiracjami…

webdesignerdepot.com

djdesignerlab.com

inspectelement.com

smashingbuzz.com

inspiredm.com

smashingmagazine.com

uxbooth.com

d-lists.co.uk

myinkblog.com

designer-daily.com

pelfusion.com

thedesigncubicle.com

designm.ag

threestyles.com

mediamilitia.com

vandelaydesign.com/blog/

grafpedia.com

designinformer.com

instantshift.com

spyrestudios.com

Na sam początek

Podstawową czynnością jeżeli chodzi o wykorzystywanie skryptów opartych o jQuery jest pobranie samej biblioteki.
A następnie wklejenie do sekcji head kodu wywołującego tą bibliotekę.

Dla każdej funkcjonalności z osobna przygotowaliśmy pliki JS o indywidualnych nazwach, w tym celu aby nie myliły się nikomu z ich przeznaczeniem.
preview_img.js – podgląd dla samych obrazków,
preview_text.js – podgląd dla samego tekstu,
preview.js – podgląd dla obrazków na linkach w treści.

Podgląd zastosowany na obrazkach

Galeria (obrazki bez opisu “title”)

W naszym przykładzie kod html wygląda następująco:

W tym przypadku kiedy chcemy aby podgląd większego zdjęcia był na miniaturce należy koniecznie pamiętać o dodaniu klasy preview dla znacznika a oraz dodaniu w kodzie CSS odpowiednich dla tej klasy wartości:

Szczególnie ważnymi pozycjami są position:absolute; oraz display:none; o których nie można zapomnieć.

Galeria (obrazki z opisem “title”)

Na tym przykładzie kod html odrobinę się różni od tego powyżej, pojawił się tutaj opis dużego zdjęcia w title, który podczas wyświetlenia podglądu będzie umieszczony pod obrazkiem:

Znaczniki a posiadają tutaj tą samą klasę co wyżej także, kod CSS wygląda identycznie. Przypisane zostały wartości dla koloru czcionki oraz jej wielkości i są one teraz dziedziczone przez tekst wyświetlany w title.

Podgląd obrazka zastosowany w tekście

Dla tych osób, którym zależy na zaoszczędzeniu miejsca na stronie istnieje także możliwość podpięcia podglądu obrazka na standardowym linku w treści.

Według własnych potrzeb można wstawić dla obrazka tytuł w title lub też nie.
Kod html:

W tym przypadku obrazek, który ma się pojawić po najechaniu na link jest przekazywany za pomocą rel, co jest dość istotne, bo daje nam to możliwość przypisania standardowego linka dla a.
Podobnie jak wcześniej należy pamiętać o dodaniu odpowiedniej klasy dla znacznika a, tym razem nazywa się ona screenshot.
CSS dla tej klasy:

Wszystkie pozycje w CSSie są dowolne do przypisania, najważniejsze jak zawsze jest pozycja position:absolute; i display:none; których nie można pominąć.

Podgląd opisu linka zastosowany w tekście

W tym przypadku po najeździe na link pojawi się jego opis zamieszczony w atrybucie title

Kod html:

Tutaj pojawia się kolejna ważna klasa dla znacznika a – tooltip
Tak samo jak we wcześniejszych przypadkach w kodzie CSS należy zamieścić position:absolute; i display:none;.

Wersje Demo do wszystkich prezentowanych podglądów dostępne są na tej stronie.

Mamy nadzieję, że narzędzie to okaże się dla wielu osób przydatne.

Artykuł napisany dla serwisu Vivee.info

Serwis ten stanowi bardzo wygodne narzędzie do druku interesujących nas zawartości stron www. Jego działanie opiera się głównie na oczyszczeniu artykułu z wszelakich styli narzuconych przez CSS danego serwisu i dopasowanie przez nas elementów, które chcemy widzieć na druku lub tez nie.
Największa zaletą jest oszczędność papieru podczas wydruku, ponieważ korzystając z printfriendly.com mamy pewność, że wydrukowane zostanie tylko najważniejsza treść poza wszystkimi menu strony, komentarzami itp (jak to zwykle bywa przy drukowaniu poprzez przeglądarkę).

Poza standardowym drukowaniem istnieje również zapisu widoku jako pdf, przesłanie mailem oraz dodanie do twittera.

Instrukcja obsługi

W pierwszej kolejności należy skopiować z paska adresu url strony jakiej treści chcemy przefiltrować i nastęonie wydrukować. Następnie klikamy Print preview.

Po wklejeniu linka zostanie wygenerowany podgląd wydruku, w którym możemy za pomocą jednego kliknięcia usunąć wszystkie obrazki remove images. Po najechaniu na dany element pojawi się czerwona obramówka z napisem click to delete – dzięki tej opcji możemy usunąć wszystkie niepotrzebne elementy z wydruku (zawsze istnieje możliwość cofnięcia zmian – klikając na undo).

Aby ułatwić sprawę czytelnikom swojej strony można w bardzo prosty sposób zamieścić button, który automatycznie odsyłać będzie do wygenerowanego podglądu wydruku.

Użytkownicy WordPressa mogą w tym celu skorzystać z wtyczki printfreindly lub sociable, które obsługują printfriendly

PS. Na Vivee.info kolekcjonujemy link do stron / artykułów z zakresu projektowania stron www. Jeżeli znacie jakieś serwisy to możecie je polecić tutaj.

Design a creative unusual layout

Games Layout

Design a clear website layout in Photoshop

How to Elevate Your Website Design Process and Results

Clean Photo Gallery Website Layout

Flower,Ornamental,Agriculture Web Layout

Company/Business/Software Web layout

Create a Business WordPress PSD Layout

Watercolored Design Studio Blog Layout

Create a professional dark web hosting layout

Lawyer layout in photoshop

Making the ‘Clean Grunge’ Blog Design

Creative Design Layout Tutorial

Create a Grungy Web Design

How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

Business Layout

Create professional webpage layouts with this very detailed

Design Studio Layout

Interior Design Layout

Grunge Web Design

Krok 1 – Struktura html naszej rozwijanej listy

Całe menu akordeonowe oparte jest na liście zagnieżdżonej oraz divach, w których zamieszczane są pozycje drugiego zagłębienia menu oraz ewentualna treść nie będąca listą.

Pojedyncza zakładka od strony htmlowej w naszym przykładzie wygląda następująco:

Wygląd:

Pierwsza pozycja w menu (li.kategoria) jest zawsze widoczna. Elementem, który dzięki funkcji javascript będzie chowany, a po kliknieciu na li.kategoria będzie ukazywany jest ul.fade.

Całkowity kod html naszej pokazówki przestawia się tak jak widać to poniżej:

Niektóre dodatkowe klasy w htmlu zostały tutaj wprowadzone celowo w celu upiększeń poszczególnych zakładek pierwszego poziomu. Także na klasy typu "twitter", "vimeo", itp w swoich wersjach menu akordeonowego nie musicie zwracać uwagi (chyba, że tak jak tutaj chcecie aby każda zakładka miała inny kolor, ikonkę, itp).

Upiększanie menu, czyli struktura CSS

Jak łatwo jest się domyślić każdy kod CSS, który decydować będzie o wyglądzie może być inny.

Całkowita szerokość zakładek i zawartości, która się pojawia po kliknięciu na nie uzależiona jest od od diva w jakim się znajduje czyli od diva #page. Ma on nadaną konkretną szerokość i wyśrodkowany jest on względem okna przeglądarki.

Odrobina CSS3

CSS3 niestety na obecną chwilę nie jest jeszcze obsługiwany przez wszystkie przeglądarki internetowe. Te, które radzą sobie z nim całkiem sprawnie to:

• Firefox (od wersji 3 w górę)
• Google Chrome
• Safari
• Opera (wersja 9.64 obsługuje zaledwie kilka możliwości jakie daje nam CSS3)

W menu akordeonowym zostały wykorzystane takie efekty jak:
1. Cień pod napisem

2. Zaokrąglone rogi

Efekt końcowy zabawy htmlowo-cssowej podejrzeć można w wersji Demo

jQuery

Do w pełni działajacych zakładek brakuje nam jeszcze podłączenie odpowiednich skryptów JS.
W sekcji należy zamieścić odnośnik do jQuery:

oraz skrypt, z funkcją dzięki której zakładki zachowują się zgodnie z naszymi założeniami.

Nasz skrypt, który decyduje o pojawianiu się i znikaniu zawartości wygląda następująco:

gdzie:

Po wczytaniu skryptu ukrywa nam wszystkie podtreści zakładek poza pierwszą, która zawsze będzie pokazana i tym samym sugeruje userom, że kliknięcie w następną zakładkę pokaże się jej zawartość.

Zagnieżdżone ul o klasie .fade będzie ukazywane po wcześniejszym kliknięciu na a.link.
Nadanie klasy pojawiającemu się ul dodatkowo zabezpiecza nas przed sytuacją kiedy w treści mamy następne ul i nie chcemy aby one dziedziczyły to zachowanie.

Został również zastosowany efekt fadeIn dla pojawiających się zawartości menu.

Więcej o fade’ach przeczytać możecie w artykule: “FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu”.

Jeżeli chcemy aby zawartość pojawiała się nam po najeździe na zakładkę, a nie dopiero po kliknięciu należy w tym fragmencie js’a

podmienić click na hover:

Hover sprawi, że menu to zachowywać się będzie identycznie jak to zamieszczone na www.apple.com.

Jeszcze jednym efektem dla urozmaicenia wyglądu tego menu jest zwiększenie krycia po najechaniu kursorem na .kategoria a.link.

Tym sposobem tak oto wygląda całkowity kod JS, który przyczynia się do ozywienia menu akordeonowego:

W taki sposób przestawia się tworzenie akoreonowego menu,
mam nadzieje, że artykuł ten okaże się dla Was pomocny.

Artykuł stworzony dla serwisu Vivee.info

Demo: http://www.serie3.info/s3slider/demonstration.html

Instalacja:
1. należy pobrać jQuery ze strony oficjalnej
2. następnie ze strony autora s3Slider jQuery plugin nalezy ściągnąć pliki źródłowe
Pełna wersja (z przykładami zastosowania) (74kb)
Wersja nieskompresowana (4.12kb)
Wersja skompresowana (1.66kb)

Teraz w naszym pliku (przykładowo index.html) określamy w kodzie namiary na najpotrzebniejsze skrypty:

Przykładowy kod htmlowy z zastosowanym efektem s3Slider

Kod CSS

Inne dodatkowe uwagi dostępne na stronie oficjalnej plugina.