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

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

Лучшим на этой неделе стал Blowup, поздравляем. Коротко по каждой из представленных работ:

• satantx — можно реализовать без использования таблицы, отсутствуют ховеры на кнопки, надо больше HTML5)
• SerGen — хорошая работа;
• Юлия — все классно, стоило сделать "карусель" с циклической бесконечной прокруткой как у остальных ребят или скрывать кнопки навигации;
• usf — все хорошо, но в ei10 градиенты не работают;
• Blowup — хорошая работа, за fadeIn() +1;
• Winner — проблемы в Opera 12.14 и больше спрайтов.

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

Социальный виджет в светлых тонах

В предыдущем задании мы не ставили основным требованием прикручивать "карусель" к вёрстке, но к удивлению, большинство сделали это. Главный вопрос: «Нужны ли задания с применением JavaScript?».

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

Макет можно использовать в своих проектах, например: добавить виджет в модальное окно, всплывающие при клике на имя пользователя или выводить информацию об авторе статьи, после публикации. Он выполнен в светлых тонах, используется стандартный шрифт, иконки сделаны на шейпах, в скрытых группах слоев находятся ховеры некоторых элементов.

Скачать

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

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

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

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

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

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

• Как читать W3C-спецификации
• Голограммы, пленочные засветки и шейдеры на чистом CSS
• Псевдокласс :has() — не только «родительский селектор»