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.

ikony-bez-cienia.png

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

ikony-z-cieniem.png

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
    1. Przezroczystość 50%.
    2. Kąt 135.
    3. odległość 3px.
  7. Zapisz jako obrazek na stronę www.
  8. 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

  • Lista odnośników społecznościowych
  • Semantyka HTML: lista nieuporządkowana
  • 8 kroków do zmniejszenia ilości obrazków na stronie

Poprzedni

Lista ikonek pod artykułem

Następne

501 Not Implemented

1 komentarz

  1. dzieciak

    a nie wystarczy oryginalnego obrazka skopiowac na nową warstwę, tak żeby były dwie z tym samym obrazem? i ten niższy zmienić w brightness/contrast a potem przesunąc kawałek? tzn. piszę z głowy, tylko wydaje mi się prostsze, bo ktoś może mieć jeszcze shopa, gdzie nie było opcji cienia.

Oparte na WordPress & Theme by Anders Norén