[Задание по вёрстке #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. Blowup

    <a href="http://jsbin.com/edased/3">Решение</a>
    вот так получилось, не без недостатков, конечно.
    будет интересно сравнить с другими работами

  2. Blowup

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

    1. usf

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

      1. Blowup

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

  3. Sergalas

    http://jsfiddle.net/Sergalas/aPHBG/embedded/result/
    хотел сделать иконки шрифтом но поскольку задача на резиносвость сайта не стояла а от spanов все ранвно не отделаться решил оставить так  

    1. Sergalas

       http://jsfiddle.net/Sergalas/aPHBG/3/embedded/result/
      Я не я буду если не захочу чегонибудь исправить

      1. Арсений (Автор записи)

        )) c transition действительно интереснее

        1. Sergalas

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

    1. Арсений (Автор записи)

      Что-то с картинкой! 403 ошибку отдаёт

      1. Tyffaxyn
  4. usf

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

    1. EdBond

      Шо то картинки не подгружаются

      1. usf

        там кроме фона картинок нет. иконки шрифтовые font-awesome

  5. Winner

    Вот и я решил показать свой вариант. Моя первая верстка http://jsfiddle.net/Ikiru/Wyvr7/4/

  6. Annecy
    1. Annecy

      Исправлено, теперь тултип кроссбраузерный )
      http://jsbin.com/14_tooltip/5/edit

      1. Annecy

        Сори )) Теперь ок )
        http://jsbin.com/14_tooltip/6

  7. lazuren

    Извиняюсь за опоздание, но ваш сайл "лежал" с 7 марта, а я как раз в тот день планировал опубликовать ссылку на свою работу!

    http://lazuren.ru/portfolio/1/&nbsp;

    1. Павел Тринько

      Ничего страшного, вы во время :)

  8. Int

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

  9. Int

    > В данном задание
    В задании!! Это же предложный падеж.

  10. Int

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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