Задать вопрос
@gera7

Как наиболее целесообразно верстать данное меню?

После прочтения нескольких книг, брожению по форумам и тд и тп, начал активно практиковаться в верстке, на данном этапе я качаю готовые шаблоны, у которых есть исходный код, сам нарезаю с макета все что надо, верстаю, а потом проверяю как его сделал "гуру". Так вот, у меня в макете вот такое меню:

7bf5eff1fc9c424db68ee7653d905969.png

И сделал его так:
jsfiddle.net/f1n1b1y8/3 (элементы: ручка, блокнот с карандашом, мышка и часы не загрузились на этот ресурс, хз можно ли это вообще делать).

Долбался сначала с градиентом для каждого блока(ссылки), потом с внутренней тенью которая есть лишь снизу (на скрине может быть не видно, но на макете есть), потом вырезал все эти элементы (ручку, карандаш, мышку, часы) их кстати пришлось еще выделять и переносить на отдельный(прозрачный) слой, ибо в psd макете фон и элемент составляли одно целое! После всего этого оказалось, что у первых слов используется шрифт Haettenschweiler, который ко всему прочему нету в Google Fonts, его пришлось искать вручную, добавлять через медиа-запрос и потом только подключать, я уже молчу про отступы и высоту строки! Более детально подгонять шрифт буду позже.

В итоге, я глянул исходник... Знаете что я там увидел? Все это сделано через 4 ссылки, у которых в бэкграунде стоят цельные картинки, а при наведении мыши лишь меняются на другие 4 картинки.

Я всегда читал, что то, что можно сделать через css надо делать через сss, а не вставлять картинки. Но в данном случая я так и не понял, напрасно ли я убил столько времени (наплодил кучу css правил)? В исходниках 8 картинок, каждая по 6кб(gif), у меня же получается 4 картинки по 6кб(png).

Вопрос: кто дурак и как быть?
И как бы вы сделал эти 2 элемента, через сss или картинками?
94fc354069be4ce7b5ae4b667f58e540.pngda6a8b78b22a41aba3756e022454f7c6.png
  • Вопрос задан
  • 211 просмотров
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
SolidlSnake
@SolidlSnake
Ваш дружелюбный сосед
Вы можете и весь текст на странице вырисовывать через Canvas, если вдруг это будет выгоднее.
Другое дело, а стоит ли оно того?
Вы потратили кучу времени на 4 картинки, а человек просто использовал 8 штук сэкономив себе некоторое время, вот и решайте, что вам нужнее.

P.S. Плюс еще картинки в любом браузере будут одни, а градиенты и пр. новомодные штучки дрючки нет.
Ответ написан
Комментировать
Sadist07
@Sadist07
Верстальщик, Недо дизайнер
Чего ты паришься.... нарезал бы все картинками....и прикрепил бы...пофиг что это меню и пофиг что поисковики не поймут....Нам же нужно все быстрее...без семантики... налепил сдал и пошёл... Главное что все выглядит идентично)) А так след раз возьми и сайт 1 картинкой фигани ) тоже норм.
А если серьезно...
Ну лично бы я сделал бы все через ксс, картинки возможно сделал бы спрайтом и менял бы потом только позиции.
Так что ты мудился все это время правильно!!!
Ответ написан
@booogabooo
Интересно, вы явно указали размер картинок (6 кб)
Скажите, вот оно того стоило?

Тем более я всегда руководствуюсь таким правилом: если заказчик явно не указал определенные требования к элементам - делай так, как выгоднее тебе. В моем случае нужно сделать быстрее

Вам для обучения, может, это и полезно, однако далее на практике, когда у вас будут гореть сроки, вы даже не задумаетесь над этим вопросом...потом поймете почему
Ответ написан
Комментировать
Vilz
@Vilz
html, css, js
не понятен функционал этих кнопок. это баннеры или пункты меню? часто ли будут меняться эти блоки? вообще в случае с нестандартными шрифтами, которые встречаются 1 раз на странице - подключать шрифты не целесообразно. проще фигануть картинки (спрайтами конечно). а если надо что бы менюшки были доступны например с читалки для слабовидящий и гугляндекса текст всегда можно подложить в opacity:0 или text-indent ом сдвинуть за левый кран картинки.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы