Praca grafika, webdesignera, designera, czy fotografa wiąże się z koniecznością znajomości podstaw kompozycji, ekspozycji oraz pracy z kolorem. Wiele stron może mieć wspaniały kod ale przez złe dobranie kolorów może przeganiać odbiorców zrażonych zbyt mocnymi kontrastami, gryzącymi kolorami, nieadekwatnie dobraną kolorystyką do tematu strony. Powstało i powstaje wiele pozycji książkowych na ten temat ale również w sieci można spróbować wyszukać informacji o standardach w pracy z kolorem. Takim miejscem do szukania inspiracji oraz uczenia się jest z pewnością serwis colourlovers.

Można na nim przeglądać prace tysięcy użytkowników z całego świata w postaci kolorów, palet oraz gotowych wzorów teł (pattern) albo też utworzyć własny profil i samemu spróbować własnych sił w tworzeniu ww. Oczywiście nasze prace również zostaną poddane ocenie innych. Zapraszam do obejrzenia prac w moim profilu.

Przy tworzeniu palet i wzorów pomagają mi liczne narzędzia dostępne za darmo w sieci:

Color Sheme Designer
Color Shemer Gallery
Color Palette Generator
Color Palette Generator (from selected file)
Color Palette Creator
Color Jack
Color Toy 2.0
Pozdrawiam!

Komentarze: Brak komentarzy | Opublikowane w kategorii Bez kategorii

Horyzontalne menu w CSS to już nie problem. W wyszukiwarce wpisujemy frazę i w wynikach wyskakują nam adresy generatorów tworzących całkiem przyzwoite rozwijane horyzontalne menu w czystym html/css. Ustawiamy je po swojemu, ściągamy plik z kodem i wklejamy go do kodu własnej strony. Proste. Ale jak działa takie menu? To też jest bardzo proste

Przede wszystkim zacznę od list, ponieważ na nich oparte jest takie menu. Praktycznie każde menu to w rzeczywistości lista osadzona w selektorach
[html]<ul>
<li></li>
<li></li>
…
</ul>[/html]

Tak skonstruowana lista oczywiście wyświetla się w tradycyjny sposób: z góry na dół, z drobnymi oznaczeniami listy.  Jak zrobić z niej horyzontalne menu? Należy danym cechom selektorów „ul” i „li” nadać odpowiednie wartości w css. Tak więc żeby lista wyświetlała się w poziomie, selektory <li> muszą opływać się z lewej strony co stanie się gdy nadamy im cechę „float: left” – ustawią się w poziomie. Ale wciąż będą wyświetlać się z jakimiś kropeczkami domyślnie wyświetlanymi dla list w HTML. Aby usunąć te kropeczki należy dla listy <ul></ul> przypisać cechę  ”list-style: none”  Żeby to wszystko wyglądało lepiej dla <li> nadajemy cechy: wysokość i szerokość za pomocą „width” i „height” oraz „text-align” którym wyrównamy tekst do środka, lewej, prawej czy jak wolimy za pomocą odpowiedniej wartości. Jeśli tekst jest za wysoko albo za nisko równamy go w pionie „padding’iem” Żeby mieć pewność że nasze komórki menu nie będą się rozciągać odkreślamy „display: block;” W ten sposób otrzymaliśmy przyzwoicie wyglądające proste menu.

A teraz rozwijanie… Jak już wcześniej wspomniałem menu to lista. To co zwykle rozwijamy w poziomych menu to też jest lista. Lista w liście.
[html]<ul>
<li>menu główne 1</li>
<ul>
<li>rozwinięcie</li>
<li>rozwinięcie</li>
<li>rozwinięcie</li>
<li>rozwinięcie</li>
</ul>
<li>menu główne 2 komórka</li>
…
</ul>[/html]

Aby edytować w CSS atrybuty takiego selektora-dziecka należy jako cechę podać „li li {}” wtedy wartości przypisane będą  do odpowiedniego selektora. Dlaczego nie widać drugiej listy pod-menu kiedy nie najeżdżamy na menu z którego powinna się rozwinąć? Za sprawą cechy: „display: none” której wartość nakazuje nie wyświetlenie się na stronie.  Teraz już górki. Żeby lista się wyświetliła gdy nad li znajdzie się kursor dla selektora „li:hover ul” należy nadać cechę „display” o wartości „block”  Lista po najechaniu na odpowiedni element menu w którym jest zagnieżdżona wyświetli się. Po zjechaniu kursora zniknie. Kolorystyka tła, typografia, szerokość, wysokość.. to już kwestia potrzeb i gustów..

Życzę powodzenia w samodzielnym tworzeniu rozwijanych poziomych menu dla waszych stron.

Komentarze: Brak komentarzy | Opublikowane w kategorii Bez kategorii