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

Published by Marcin Pietrzak

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec ante nec lectus laoreet feugiat. Donec aliquet justo in tellus gravida, id elementum magna convallis. Curabitur faucibus mauris sed risus egestas lobortis. Nunc vestibulum elit ac ipsum ultricies, non ultrices lorem ultrices. Nam at dolor id elit lobortis ullamcorper. Fusce commodo turpis nisi, efficitur efficitur libero dictum eget. Morbi viverra dignissim lacus. Vestibulum mi justo, dictum ut iaculis eget, scelerisque et nibh.

One reply on “Lista ikonek – tworzymy podcień”

  1. 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.

Comments are closed.

Więcej w css, lista nieuporządkowana
Lista ikonek pod artykułem

W 8 kroków do zmniejszenia ilości obrazków na stronie Łukasz Sobek rozprawia się z prezentacją odnośników do portali społecznościowych. Wywiązała...

Zamknij