[Задание по вёрстке #16] Виджет для Twitter

Арсений Лысов

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

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

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

  • Николай — хорошая работа, недостаток — большая вложенность
  • Blowup — хорошая работа, кнопка Checkout в теге button, логично тогда его в тег form обернуть
  • Annecy — что-то со шрифтами не то, чуть аккурантнее и будет хорошо
  • Libiros — если это первая вёрстка в жизни, то есть куда расти, повнимательнее к макету
  • usf — уже какой раз поражают эффекты с анимацией, комментарий в html забавный)
  • Sergalas — всё та же проблема, большая вложенность — проще, доступнее, меньше тегов
  • lazuren — неплохо, обратите внимание как остальные треугольники на тултипе исполнили
  • Kletchatii — со шрифтами беда и не стоит использовать такое количество id

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

Виджет для Twitter

Виджет для твиттера

Несомненно радует что рубрика [Задание по вёрстке] набирает обороты, обсуждения, дискуссии, помощь друг другу, так же есть люди которые принимают активное участие из задания в задание, спасибо за проявленный интерес, мы будем стараться искать интересные шаблоны и отвечать на все Ваши вопросы.

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

На этой неделе css-live.ru предлагает Вам сверстать, немного пользовательского интерфейса, PSD шаблон виджета для твиттера, выполненный в строгом стиле с небольшой анимацией. В макете используется стандартный шрифт и не забываем про скрытые группы слоёв.

Скачать

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

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

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

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

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

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

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

    1. Сразу скажу, что сразу выглядит не очень хорошо:

      1. Выбран мелкий шрифт

      2. Выпадающая секция "выпадает", а не анимируется

      3. Аватарка не выровнена 

      4. Весь блок виджета не выровнен относительно внешнего фона.

      Ещё есть время допилить! ;)

      Ответить

        1. Павлу надо просто сказать версию браузера на котором он это увидел, там в css transition без префиксов из-за этого я думаю он написал второй пункт

          Ответить

    1. кстати добавлю, что в своей работе иногда шел вразрез "собственным" правилам кодирования, как к примеру с тегоориентированными стилями вместо классоориентированных. сделано это было с целью минимизации кол-ва html и в виду уверенности в том, что вреда это не нанесет(менять теги не собирался). в реальных проектах лучше добавить лишний стиль, чем потом биться головой о стену после смены span на другой элемент, к примеру  :)

      Ответить

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

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

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