Верстка \ CSS 3

Динамические комиксы с помощью CSS clip-path

От автора: в заключении серии статей «интернет комиксы», которой я занимался последние несколько недель, я хотел бы создать динамический комиксы с помощью CSS. В обычных комиксах изображения прямоугольные, но в японской манге и в экспериментальных западных комиксах конца 1970-ых панели под изображения принимали все возможные формы.

Читать далее

Верстка \ HTML&CSS

Глобальный размер шрифта с помощью rem; локальный размер шрифта с помощью em

От автора: у Richard Rutter есть довольно интересное руководство по настройке font-size: он утверждает, что необходимо использовать как rem, так и em единицы измерения в зависимости от отношений элементов на странице.

Читать далее

Верстка \ CSS 3

CSS свойство Background

От автора: в данной статье мы с вами рассмотрим одно из старейших и известных свойств css background. Про особенности данного свойства часто забывают. В CSS3 оно получило обновление, были добавлены возможности не только по добавлению фонового изображения или цвета. Рассмотрим некоторые из них!

Читать далее

Верстка \ HTML&CSS

Как исправить проблему с font-weight в состоянии hover

От автора: вы когда-нибудь пробовали изменить значение font-weight у ссылки в разных состояниях? Если да, то вы должны были заметить, что текст немного сдвигается. В этой статье мы сначала узнаем, что вызывает этот сдвиг, а затем рассмотрим два возможных решения данной проблемы.

Читать далее

Верстка \ HTML&CSS

Фоновый рисунок на SVG в виде шестиугольника и рыбьей чешуи

От автора: Недавно в портфолио одного из моих учеников я увидел привлекательные масштабируемые фоновые рисунки SVG, закодированные в base64. Я раскодировал текстуру с помощью обратной запаковки кода и исправил получившийся SVG рисунок; также я создал простой фоновый шаблон в виде шестиугольников, которым поделюсь с вами в этой статье.

Читать далее

Верстка \ HTML&CSS

Как создать динамическое портфолио с помощью CSS Scrolling Snap Points

От автора: существует такая проблема, как прокрутка страницы. На сайтах с большим полноэкранным дизайном страницы выставлены вертикально в стопку и поделены по секциям. Каждая секция должна занимать весь экран браузера, но крайне легко прокрутить страницу на середину меж двух секций и тем самым выбросить всю интерактивность напрочь. Данная проблема также свойственна более мелким элементам UI. Мы хотим, чтобы при приближении к секции происходила автоматическая докрутка. Рассмотрим вопрос создания динамического портфолио с помощью CSS.

Читать далее

Верстка \ HTML&CSS

CSS переменные в Chrome

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

Читать далее

Верстка \ HTML&CSS

Неожиданные CSS свойства, которые можно использовать уже сейчас

От автора: во время работы над проектом Juju GUI, просматривая пул запросов, я обнаружил, что css свойство box-sizing написано без вендорных префиксов. И я подумал, что следует проверить, а нужны ли они перед тем, как обращаться в пул для их добавления. В поисках я был приятно удивлен, что существует гораздо больше свойств с полной поддержкой, чем я думал. Я проштудировал сайт Can I use и открыл для себя пару очень интересных вещей.

Читать далее