Заметки в категории «Верстка»

В данной категории собраны сниппеты CSS, HTML, примеры верстки, инструмены, облегчающие процесс верстки макетов и много другое.

Отступы у фонового изображения

Calc из спецификации CSS — это функция, при помощи которой вы можете проводить вычисления, чтобы задавать значения CSS свойств. Вооруживщись calc, применим его к background-size.

See the Pen Отступы у фонового изображения by mihdan (@mihdan) on CodePen.0

Вложенные ссылки в HTML

Как известно, в спецификации HTML чётко указано, что вложенных ссылок нет и быть не может. Но, буквально на днях, Роман Комаров (разработчик интерфейсов в Яндексе) предложил поистине простой и вполне рабочий вариант решения данной проблемы.

«Дедовский» способ кастомизации чекбоксов и радиокнопок на CSS

Теме кастомизации стандартных контроллов (радиокнопок и чекбоксов) посвящено огромное количество статей, но все они сводятся к подключению ненужных jQuery-плагинов, роль которых — полная замена нативных checkbox и radio на смесь непонятных структур HTML и JavaScript.

Исправляем css hover эффект на тач-устройствах

При создании каскадного меню сайта, реализованного при помощи ненумерованного списка, с вложенным тегом <ul>, которое должно было появляться при наведении на родительский <li>, столкнулся с тем, что псевдокласс hover дико переглючивает на iPad, отчего меню совсем перестает работать.

Исправляем «прыгающий скролл» на чистом CSS

Когда вы центрируете веб-страницу на CSS при помощи margin: 0 auto, появляется один очень неприятный баг: сайт скачет при переходе между короткой и длинной страницами. Это происходит потому что на короткой странице вертикальный скроллбар скрыт, а на длинной он появляется.

Коллекция CSS прелоадеров

Веб разработчик Люк Хаас создал креативную коллекцию крутящихся прелоадеров, анимированных при помощи CSS3. Каждый «волчок» коллекции состоит всего из одного блока <div> с классом .loader и текстом «Loading…». Текст задан для экранных читалок и обратной совместимости со старыми версиями браузеров, не поддерживающих CSS3.

Как избежать ненужных перерисовок страницы при помощи pointer-events

Чтобы избавиться от лишних перерисовок страницы Пол Льюис советует отключить эффекты страницы при наведении (игнорировать hover) во время прокрутки её пользователем.

Блуждая по просторам интернета, я нашел очень активный и интересный «проект» на GitHub, который, к счастью, не очень популярен. И его официальный сайт. Зацените.

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

Треугольник на чистом CSS

Для того, чтобы сделать треугольник на чистом CSS достаточно использовать всего один блок <div> и пару строк стилей.

Страница 1 из 1112345...10...Последняя »