После прочтения нескольких книг, брожению по форумам и тд и тп, начал активно практиковаться в верстке, на данном этапе я качаю готовые шаблоны, у которых есть исходный код, сам нарезаю с макета все что надо, верстаю, а потом проверяю как его сделал "гуру". Так вот, у меня в макете вот такое меню:
И сделал его так:
jsfiddle.net/f1n1b1y8/3 (элементы: ручка, блокнот с карандашом, мышка и часы не загрузились на этот ресурс, хз можно ли это вообще делать).
Долбался сначала с градиентом для каждого блока(ссылки), потом с внутренней тенью которая есть лишь снизу (на скрине может быть не видно, но на макете есть), потом вырезал все эти элементы (ручку, карандаш, мышку, часы) их кстати пришлось еще выделять и переносить на отдельный(прозрачный) слой, ибо в psd макете фон и элемент составляли одно целое! После всего этого оказалось, что у первых слов используется шрифт Haettenschweiler, который ко всему прочему нету в Google Fonts, его пришлось искать вручную, добавлять через медиа-запрос и потом только подключать, я уже молчу про отступы и высоту строки! Более детально подгонять шрифт буду позже.
В итоге, я глянул исходник... Знаете что я там увидел? Все это сделано через 4 ссылки, у которых в бэкграунде стоят цельные картинки, а при наведении мыши лишь меняются на другие 4 картинки.
Я всегда читал, что то, что можно сделать через css надо делать через сss, а не вставлять картинки. Но в данном случая я так и не понял, напрасно ли я убил столько времени (наплодил кучу css правил)? В исходниках 8 картинок, каждая по 6кб(gif), у меня же получается 4 картинки по 6кб(png).
Вопрос: кто дурак и как быть?
И как бы вы сделал эти 2 элемента, через сss или картинками?
Простой
Средний