Заметки в категории «Верстка»
В данной категории собраны сниппеты CSS, HTML, примеры верстки, инструмены, облегчающие процесс верстки макетов и много другое.
Исследование высоты BODY
Кобзарёв Михаил
2019-07-12T17:13:28+00:00
Верстка
Исследование высоты BODY
Небольшое исследование поведения элемента BODY в различных браузерах. Отступы от границ окна (margin, padding). Высота BODY и ее изменение в зависимости от высоты контента в Internet Explorer 6, Firefox 1.5, Opera 8.
Верстка табов с помощью <dl>
Кобзарёв Михаил
2019-04-29T17:44:53+00:00
Верстка
Верстка табов с помощью <dl>
Когда-то возникла необходимость сделать табы на странице. Это довольно типовая задача, поэтому, чтобы не изобретать велосипед, полез в Гугл посмотреть, как народ делает.
Graaf — направляющие для CSS сеток
Кобзарёв Михаил
2017-02-02T22:35:41+00:00
Верстка
Graaf — направляющие для CSS сеток
Graaf — это сборник направляющих для 9 популярных CSS сеток: BBC, Bootstrap, CNN, Dribbble, GitHub, Medium, Twitter и других. Проект с открытым исходным кодом, поддерживаемый товарищем по-имени Angel
Пуленепробиваемые iOS медиа-выражения
Кобзарёв Михаил
2017-02-03T10:25:39+00:00
Верстка
Пуленепробиваемые iOS медиа-выражения
Благодаря работе, проделанной компанией Apple, пользователи имеют превосходные интерфейсы, а разработчики экономят кучу времени, так как абсолютно любое устройство можно отличить от другого по Media Queries, тем самым создавая по-настоящему отзывчивые сайты.
godlike.css
Кобзарёв Михаил
2017-01-09T18:58:18+00:00
Верстка
godlike.css
godlike.css — это передовой CSS для обнуления и нормализации дефолтных стилей браузеров от компании 1000.tech. Более современная альтернатива reset.css и normalize.css.
Отступы у фонового изображения
Кобзарёв Михаил
2016-10-03T18:26:51+00:00
Верстка
Отступы у фонового изображения
Calc из спецификации CSS — это функция, при помощи которой вы можете проводить вычисления, чтобы задавать значения CSS свойств. Вооруживщись calc, применим его к background-size.
Вложенные ссылки в HTML
Кобзарёв Михаил
2016-10-03T19:33:06+00:00
Верстка
Вложенные ссылки в HTML
Как известно, в спецификации HTML чётко указано, что вложенных ссылок нет и быть не может. Но, буквально на днях, Роман Комаров (разработчик интерфейсов в Яндексе) предложил поистине простой и вполне рабочий вариант решения данной проблемы.
«Дедовский» способ кастомизации чекбоксов и радиокнопок на CSS
Кобзарёв Михаил
2019-04-01T15:39:41+00:00
Верстка
«Дедовский» способ кастомизации чекбоксов и радиокнопок на CSS
Теме кастомизации стандартных контроллов (радиокнопок и чекбоксов) посвящено огромное количество статей, но все они сводятся к подключению ненужных jQuery-плагинов, роль которых — полная замена нативных checkbox и radio на смесь непонятных структур HTML и JavaScript.
Исправляем css hover эффект на тач-устройствах
Кобзарёв Михаил
2018-01-15T11:05:04+00:00
Верстка
Исправляем css hover эффект на тач-устройствах
При создании каскадного меню сайта, реализованного при помощи ненумерованного списка, с вложенным тегом <ul>, которое должно было появляться при наведении на родительский <li>, столкнулся с тем, что псевдокласс hover дико переглючивает на iPad, отчего меню совсем перестает работать.
Исправляем «прыгающий скролл» на чистом CSS
Кобзарёв Михаил
2016-10-03T19:46:08+00:00
Верстка
Исправляем «прыгающий скролл» на чистом CSS
Когда вы центрируете веб-страницу на CSS при помощи margin: 0 auto, появляется один очень неприятный баг: сайт скачет при переходе между короткой и длинной страницами.
Это происходит потому что на короткой странице вертикальный скроллбар скрыт, а на длинной он появляется.
Коллекция CSS прелоадеров
Кобзарёв Михаил
2017-02-01T14:30:36+00:00
Верстка
Коллекция CSS прелоадеров
Веб разработчик Люк Хаас создал креативную коллекцию крутящихся прелоадеров, анимированных при помощи CSS3. Каждый «волчок» коллекции состоит всего из одного блока
с классом .loader и текстом «Loading…». Текст задан для экранных читалок и обратной совместимости со старыми версиями браузеров, не поддерживающих CSS3.
Как избежать ненужных перерисовок страницы при помощи pointer-events
Кобзарёв Михаил
2016-10-03T21:06:37+00:00
Верстка
Как избежать ненужных перерисовок страницы при помощи pointer-events
Чтобы избавиться от лишних перерисовок страницы Пол Льюис советует отключить эффекты страницы при наведении (игнорировать hover) во время прокрутки её пользователем.
HTML6
Кобзарёв Михаил
2016-10-03T21:17:45+00:00
Верстка
HTML6
Блуждая по просторам интернета, я нашел очень активный и интересный «проект» на GitHub, который, к счастью, не очень популярен. И его официальный сайт. Зацените.
Как быстро изучить HTML
Кобзарёв Михаил
2017-04-10T10:46:16+00:00
Верстка
Как быстро изучить HTML
Если вы еще ни разу не встречали в интернете работы Ексея Пантелеева, то советую сделать это прямо сейчас.
Треугольник на чистом CSS
Кобзарёв Михаил
2018-01-29T15:39:06+00:00
Верстка
Треугольник на чистом CSS
Для того, чтобы сделать треугольник на чистом CSS достаточно использовать всего один блок
и пару строк стилей.
Emmet LiveStyle
Кобзарёв Михаил
2016-10-07T18:04:20+00:00
Верстка
Emmet LiveStyle
Сергей Чикуёнок вновь порадовал всех front-end разработчиков, запилив Emmet LiveStyle, — плагин для живого двунаправленного редактирования CSS нового поколения (браузер ↔ редактор).
Пользовательские скроллбары в WebKit
Кобзарёв Михаил
2016-10-03T22:50:06+00:00
Верстка
Пользовательские скроллбары в WebKit
Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color, которые применялись к элементам с полосами прокрутки (вроде body), и делать потрясные штуки. IE теперь не тот.
