CSS-live.ru

Cтатьи по тегу «вёрстка»

Путь верстальщика. Год 2017.

53

Интро

Давайте сразу обозначим моменты, на основании которых будем рассуждать в дальнейшем.

Первое. Эта статья написана как попытка обновить или дополнить статью Максима Усачёва, написанную в 2012 году. Время течёт, времена меняются, поэтому хотелось бы добавить некоторые рассуждения.

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

В 2017 году сложно представить себе верстальщика, который не умеет использовать JavaScript, и фронтенд-разработчика, который не умеет верстать. Любое из этих проявлений — отклонение от нормы. 

Третье. В 2017 году сложно представить себе верстальщика, который умеет только верстать страницы, используя HTML, CSS и ничего больше. Индустрия и тенденции заставляют верстальщиков изучать JavaScript, что приводит к логическому развитию верстальщика во фронтенд-разработчика. Это логичный и нормальный путь. В 2017 году сложно представить себе верстальщика, который не умеет использовать JavaScript, и фронтенд-разработчика, который не умеет верстать. Любое из этих проявлений — отклонение от нормы. Учитывая это, правильнее было назвать эту статью «путь фронтенд-разработчика», но чтобы никого не пугать, и по причине того, что вёрстка — первая ступень развития фронтенд-разработчика, оставим название статьи таким, какое есть.

Четвёртое. Я буду часто ссылаться на свой опыт, прошу простить.

Заблуждения разработчиков

9

Перевод статьи Developer Fallacies с сайта heydonworks.com, опубликовано на css-live.ru с разрешения автора — Хейдона Пикеринга.

Время от времени веб-разработчики (и вообще программисты) находят неудачные аргументы в защиту своего выбора технологий, рабочих процессов или организационных схем, а также для принижения чужого выбора. Я видел такое не раз, да и сам порой не удерживался от крепкого словца по такому поводу. Мы особенно уязвимы для неудачных аргументов, поскольку привыкли считать себя логичными. Как же сильно мы порой заблуждаемся.

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

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

43

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

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

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

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

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

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

12

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

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

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

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

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

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

27

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

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

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

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

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

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

25

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

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

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

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

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

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

22

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

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

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

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

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

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

33

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

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

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

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

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

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

23

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

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

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

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

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

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

17

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

 

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

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

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

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

Границы не на всю высоту в списке товаров

12

Последнее обновление: 27.11.2012.

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

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

Непростая стилизация строк таблицы и непонятный баг в IE9

12

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

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

Плавающий текст на CSS3 и JavaScript

1

Плавающий текст! В основном CSS-анимации, легко реализуемые на чистом CSS, всё же не могут запросто изменить целое слово, сделав его плавающим. Хорошо работает в вебкитах, в других похуже…

HTML:

    <!-- try changing the text -->
    <p>Floating</p>

Путь верстальщика

279

Основано на реальных событиях…

Будучи администратором одного из известных форумов, я часто сталкиваюсь с тем, что начинающие веб-технологи не знают, с чего начать своё обучение, какую читать литературу и в каком направлении им двигаться. Периодически мне доводится слышать один и тот же вопрос — «Как стать хорошим верстальщиком?». Краткий ответ может оставить у новичка ещё больше вопросов, поэтому одного или нескольких постов с ответами на форуме недостаточно, чтобы полностью описать все необходимые, на мой взгляд, пункты. 

В этой статье я решил исправить ситуацию и описать свой путь обучения, который считаю наиболее правильным и эффективным.