CSS-live.ru

[Задание по вёрстке #14] Тёмный тултип

Добрый вечер, верстальщики! Уже пятница и пора потренироваться на выходных. [Задание по вёрстке] это рубрика статей, которые мы публикуем по пятницам. В каждой статье Вы найдете шаблоны кнопочек, форм или даже сайтов в формате PSD. Ваша задача красиво и качественно сверстать шаблон.

Лучшее решение [Задание по вёрстке #13]

Лучшим на этой недели стал EdBond, поздравляем. Не много по каждой работе:

  • Sergalas — единственный у которого присутствует "шум", не стоило делать выравнивание текста во ширине
  • Spamol — аккуратная работа, но перебор с id-шниками. Можно сверстать классами или на вложенность
  • EdBond — фантазия, исполнение +100500) можно было бы и убрать прозрачность у "липучки"
  • usf — хорошее исполнение. Стоит придерживаться макету, поворот стикера, цвет текста, ссылка

Благодарим участников и смотрим новое задание.

Тёмный тултип – Dark Tooltip

Тёмный тултип - Dark Tooltip PSD

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

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

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

Скачать

Требования к вёрстке:

1. Сверстать шаблон, максимально используя HTML5 и CSS3. Минимальные отклонения от макета ("пиксель в пиксель"). Добиться максимально одинакового результата во всех последних браузерах, начиная с IE10.

2. Приветствуется минимальная вложенность, оптимизированный HTML5 и CSS3. В данном задании желательно все иконки объединить в один спрайт.

3. Выложить до 8.03.2013 г. исходный код на любой из площадок: jsFidle, codepen, JS Bin, CSSDeck. Дать ссылку на своё решение в комментариях к этой статье. (Также можно на Facebook и Вконтакте).

Лучшее решение мы выберем и опубликуем через неделю в пятницу. Удачного коддинга на выходных! :D

P.S. Это тоже может быть интересно:

23 комментария

  1. упс, извиняюсь, ошибся ссылкой
    http://jsbin.com/umabiv/3 
     
    было бы неплохо добавить на сайт возможность предпросмотра комментарией или хотя бы возможность их редактирования

    1. бросается в глаза, что иконки не в спрайте. при наведении подгружается каждая.
      и стрелочка в блок на пару пикселей провалилась

      1. на самом деле все иконки я поместил в один файл, но почему-то при наведении на каждую кнопочку этот файл заново подгружается
        стрелочка, действительно на один пиксель съехала
         

        1. А если кнопке поставить поставить эфект поразительный у меня просто спрайт попробуйте на фаирбаг

  2. только сегодня сайт заработал, потому прошу прощения за опоздание
    http://codepen.io/usf/pen/Hajle
     
    ЗЫ: работать нормально будет только в хроме. ставил задачей сделать с минимумом картинок 

  3. На неделЕ! Лучшим на неделЕ! На недели может растянуться ваш конкурс, на недели можно уехать из дома, а лучшим стал на неделЕ!

  4. Плохие у вас psd, GIMP их не открывает в виде слоёв. Открывает готовой картинкой. Недавно мне давали psd, там и слои были и даже направляющие были. GIMP тот же самый.
    А на фотошоп у меня денег нет.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.