iWorks Marcin Pietrzak

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

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 się dość burzliwa dyskusja wraz z przykładami jak to zrobić: Semantyka HTML: lista nieuporządkowana i ten wpis prawie rozwiązuje zagadnienie.

Dlaczego prawie?

Są w nim dwa niedociągnięcia: nadmiarowy span oraz „display:none” którego należy unikać, ze względu na „nieczytanie” przez czytniki głosowe. Skoro nie widać, to nie trzeba czytać, prawda?

Jak to poprawić?

Usunąć tag „span”

Jest … niepotrzebny.

<ul>
<li class="d"><a href="#">del.icio.us</a></li>
<li class="t"><a href="#">technorati</a></li>
<li class="w"><a href="#">wykop</a></li>
</ul>

Schować tekst za pomocą tekst indent

<style type="text/css">
li{
background-image:url(socicons.gif);
list-style:none;
margin:0;
float:left;
margin-right:2px
}
a{
display:block;
width:16px;
height:16px;
text-indent:-99em
}
li.t{background-position:-16px}
li.w{background-position:-32px}
</style>

Inne uwagi

• ograniczyć nadmiarowy css
• ograniczyć nadmiarowe identyfikatory

I to by było na tyle.