Практика

Красивое выравнивание блоков по резиновой сетке. По-новому

Почти пять лет назад на нашем сайте вышла статья о том, как выстроить некие однотипные блоки (товары в каталоге, фото в галерее…) по сетке, оптимально вписанной в доступное пространство. Сейчас она — одна из самых популярных на сайте, и число ее просмотров всё растет. Ведь актуальность задачи никуда не делась. Самое время вернуться к этой теме и раскрыть ее по-новому.

(далее…)

Варианты «clearfix-хака» и его замен: сводная таблица

Вдогонку статье о новом значении свойства display, призванном избавить верстальщиков от нужды в clearfix-хаках — своего рода «шпаргалка», показывающая, в чем именно бывают проблемы с float-ами и какие из решений — исторических, теперешних и перспективных — какие из этих проблем решают (а какие — создают взамен:).

(далее…)

Анахроничная борода: новая методология разработки сайтов для любых устройств и платформ

Перевод статьи Anachronistic Beard: a new methodology to make sites work anywhere с сайта brucelawson.co.uk, опубликовано на css-live.ru с разрешения автора — Брюса Лоусона.

(Пустая темная сцена. В центре — круг света от единственного прожектора. Из темноты выходит Брюс, в черной водолазке)

Ребята, вы готовы? (в зале возгласы и визги, как на презентациях Apple)

Ребята, вы ГОТОВЫ? (крики «Дааа!» и «Воистину!»)

Вы готовы к тому, что у вас ПЕРЕВЕРНУТСЯ ОСНОВЫ? (зрители массово падают в обморок от волнения)

Хотите ли вы, чтобы ваши сайты работали ВЕЗДЕ? (в зале уже не осталось ни одного сухого кресла)

Сегодня мы представляем супермегановейшую, переворачивающую основы методологию разработки под названием…

Анахроничная борода.

beard

(далее…)

О моратории на новые браузерные функции, предложенном PPK

Перевод статьи On PPK’s moratorium on new browser features с сайта https://dev.opera.com/, с разрешения автора — Брюса Лоусона

Знаменитый разработчик и автор множества статей Питер Пол Кох (PPK) недавно призвал к «мораторию на новые браузерные функции на год или около того». Если вы не читали его статью «Хватит толкать веб вперед», просмотрите ее: он выдвигает интересные тезисы, как всегда.

(далее…)

Как стать выдающимся фронтенд-разработчиком

Перевод статьи How to Become a Great Front-End Engineer с сайта philipwalton.com, c разрешения автора— Филипа Уолтона.

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

Привет, Филип, можно спросить, как вы стали выдающимся фронтенд-разработчиком?

Что-нибудь посоветуете?

(далее…)

[Задание по вёрстке #20] Адаптивное меню

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

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

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

  • Юлия — хорошая работа, но есть различия с макетом — вся правая сторона в header чуть ниже;
  • Blowup — все отлично;
  • Potato — хорошо, но надо больше спрайтов;
  • akaSpy, Андрей — ребята меньше дивов, больше спрайтов).

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

(далее…)

[Задание по вёрстке #19] Социальный виджет

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

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

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

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

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

(далее…)

[Задание по вёрстке #18] Виджет для интернет-магазина

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

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

Победитель на этой неделе пользователь под ником maiordom. Коротко по каждой из работ:

  • P1RATE — всё хорошо, картинки в спрайте и закодированы, но вот для иконок сделан тег <i>, можно и без него обойтись;
  • Blowup — для тебя много интересного под катом) Не понятно зачем оборачивать в <div> выпадающий список внутри тега <ul>, тем самым твоя работа не валидная;
  • Ryter — надо было делать меню раздвижным, а так не плохая работа;
  • Юлия — хорошая работа; жаль что каждая иконка это отдельная картинка;
  • maiordom — хорошее исполнение;
  • Sergalas — не соответствие с макетом, отступы не те и не понятно зачем оборачивать верхний уровень навигации в абзац;
  • usf — как всегда уровень, единственный, кто решил задачу без использования списка, но беда с двойным фоном и иконок не видно;
  • SerGen — хорошая работа, не поленился добавить ховер на треугольник, но вот проблема как и у первого участника: лишний тег для иконок;

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

(далее…)

[Задание по вёрстке #17] Вертикальное меню

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

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

На этой неделе было три лидера: Blowup, Vita, usf. Поздравляем победителя Vita и коротко по каждой из представленных работ:

  • Петр — уголок с уведомлениями сделан на css, жаль что работа не доделана до конца, отсутствуют ховеры у элементов и нет фона
  • Антон — хорошо, но твиты и фолловеров надо было делать ссылкой, большинство участников уведомления сделали на css обратите на это внимание
  • Tyffaxyn — хорошая css, слишком сильная тень у уведомлений и нет ховера на этот же элемент
  • Blowup — радует что input обернутый в тег form), уголок на css, base64, но вот твиты и фолловеры надо ссылками
  • Sergalas — видимо не хватка времени. Опять слишком много id, твиты не ссылки, уведомления прыгают в разных браузерах и фон сделан у этого же элемента картинка
  • Vita — хорошая работа, но недочёт в EI10
  • usf — единственный кто аватар пользователя обернул в тег figure, оптимизированная работа, но твиты и фолловеры в span и тень у текста надо было белую, а не чёрную делать

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

(далее…)

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

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

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

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

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

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

(далее…)

[Задание по вёрстке #15] Корзина интернет-магазина

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

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

Победителем на этой недели стал Blowup. Комментарии к работам:

  • Blowup — хорошая работа. В комментариях писали о подгрузке иконок, это заметно только в хроме, а так иконки в спрайте. Можно было оптимизировать css, прописать background один раз к тегу, а потом двигать его с помощью класса.
  • Sergalas — добавил transition, хорошо получилось, можно было поиграться со скоростью, ускорить немного. От спанов можно избавиться, например как Blowup. На макете сам тултип по аккуратнее выглядит.
  • Tyffaxyn — понравилось тем, что иконки в тултипе свёрстаны без классов, на вложенность. Если вести мышкой сверху-вниз, то тултип всплывает рано
  • usf — классный эффект на ховере, манера исполнения на отлично, жаль что не кроссбраузерно и шрифт подпортил иконки
  • Winner — неплохо для первой верстки. Можно сделать без использования списка, как в предыдущих работах, тем самым меньше вложенность, меньше html
  • Annecy — хорошая работа, но опять же ul
  • lazuren — иконки не в спрайте, ul, transition только для вебкита

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

(далее…)

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

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

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

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

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

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

(далее…)

[Задание по вёрстке #13] Заметка (стикер)

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

 

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

Сегодня мы выбрали 2-х человек, amelice и krontill. Теперь немного конкретнее:

  • krontill — хорошее исполнение, но большое количество div-ов и id-шников
  • amelice — есть расхождения с макетом, касательно отступов

Благодарим остальных участников и смотрим новое задание!

(далее…)