Lista ikonek – tworzymy podcień

Wcześniejszy wpis w którym opisane było tworzenie listy ikonek pod tytułem pozwolił na wytworzenie następującej listy ikonek.

Ładnie toto wygląda, jest małe i wygodne. Ale może by tak dodać jeszcze cień pod każdą z graficzek?

Sposoby na uzyskanie czegoś takiego są dwa. Jeden polega na takiej modyfikacji pierwotnego pliku, żeby cienie były w nim obecne. Drugi polega na dołożenia cienia pod każdy z elementów, co niestety wiążę się z dodatkową grafiką. Przedstawię ten drugi.

HTML się nie zmienił: <ul> <li class="d"><a href="#">d</a></li> <li class="t"><a href="#">t</a></li> <li class="w"><a href="#">w</a></li> <li class="a"><a href="#">a</a></li> <li class="b"><a href="#">b</a></li> <li class="c"><a href="#">c</a></li> </ul>

CSS wygląda tak

<style type="text/css"> li { background:red url(shadow.gif); list-style:none; margin:0; float:left; margin-right:3px; padding-bottom:5px; padding-right:4px } a { background-image:url(socicons.gif); display:block; width:16px; height:16px; text-indent:-99em } li.t a{background-position:-16px} li.w a{background-position:-32px} li.a a{background-position:-48px} li.b a{background-position:-64px} li.c a{background-position:-80px} </style>

Jeżeli porównasz do poprzedniego rozwiązania zauważysz że nie ma za dużych zmian.

Jak wytworzyć sam cień w Photoshopie?

1. Utwórz obrazek o wymiarach 22×22.

2. Wypełnij go tym tłem które potrzebujesz.

3. Utwórz nową warstwę.

4. Na nowej warstwie utwórz kwadrat leżący w górnym lewym rogu o wymiarach 16×16.

5. Wypełnij go kolorem tła.

6. Dodaj cień z ustawieniami
   

7. Przezroczystość 50%.

8. Kąt 135.

9. odległość 3px.

10. Zapisz jako obrazek na stronę www.

11. Używaj.

Piliki użyte w przykładzie

Wszystkie użyte pliki możesz pobrać (zawiera plik psd): ikony-podcien.zip

Inne podejścia do tematu list

1. Lista odnośników społecznościowych

2. Semantyka HTML: lista nieuporządkowana

3. 8 kroków do zmniejszenia ilości obrazków na stronie

#css #listanieuporządkowana #poradnikwebmastera