Селектор :has для выбора родительского и предыдущих элементов
В CSS настроен порядок наследования свойств. То есть свойства шрифта от родительского элемента переходят к вложенному. Плюс мы всегда очень просто можем указать стили для […]
Последние записи: CSS
CSS-свойства, единицы измерения, селекторы, приоритеты, переменные, анимация, техники и подходы, используемые для оформления html-страниц
Стилизация и замена полей типа number
Обычно поля типа number, или числовые поля, используют для указания количества товара в любом интернет-магазине или для изменения неких цифровых значений (температуры, веса, количества чего-либо). […]
Атрибут popover в HTML
Popover — это относительно новый HTML-атрибут, позволяющий создавать всплывающие окна на основе простых элементов в вашей HTML-разметке.
Всплывающие (модальные) окна с помощью CSS, JavaScript и jQuery
Всплывающие окна, или pop up window на английском языке — незаменимый атрибут современных сайтов. Второе их название — модальные окна (modal windows). Как правило в […]
Примеры выпадающих меню (dropdown menu)
В web-разработке всегда нужно использовать меню. Они могут быть короткими или длинными, располагаться вверху или сбоку, или в футере, но очень часто они бывают выпадающими. […]
Стилизуем ползунок (input type="range")
Ползунки, которые в HTML-коде представлены тегом <input type=»range»>, обычно довольно скучны. Однако стилизация этих ползунков может быть разнообразной, очень красивой и даже похожей на подарок […]
Создаем слайдер только на CSS
Сегодня слайдеры стали неотъемлемой частью многих сайтов: магазины, курсы, компании таким образом представляют свой товар или услуги. Для слайдеров существует множество реализация на JavaScript/jQuery, например, […]
Приоритет css-селекторов и их вес
Возможно, вы сталкивались с ситуацией, когда вы задаете какое-то свойство для определенного селектора, но после этого … ничего не происходит? В чем дело, не всегда […]
Селекторы CSS. Дочерние, родственные, селекторы атрибутов, псевдоклассы и псевдоэлементы
К простым, или основным в плане их используемости селекторам можно отнести селектор класса и id. То есть ваши элементы браузером легко находятся и легко стилизуются. […]
CSS фильтры
В настоящее время CSS предоставляет нам возможность применять к изображениям цветовые эффекты с помощью свойства filter, такие как насыщенность (saturation), яркость (lightness) и контрастность (contrast), […]
Свойство box-shadow в CSS
Свойство box-shadow уже давно существует в CSS и довольно часто используется для различных блоков, в том числе и при наведении на них. В Figma или […]
Использование свойства clip-path в CSS
Свойство clip-path — это своего рода маска обрезки, знакомая всем дизайнерам из Photoshop, Illustrator или Figma, но средствами кода в CSS. То есть, если вам […]
Примеры загрузчиков для сайта с ресурса codepen
Загрузчик или предзагрузчик (англ. — loader, preloader) — это, как правило, анимированный объект в виде картинки или элементов + css-код, которые появляются перед тем, как […]
Селекторы :nth-child и :nth-of-type в примерах
Как правило, в верстке современных макетов есть какое-то количество повторяющихся элементов, которые нужно отформатировать по-разному. Например, добавить разные изображения или цвет фона / текста / […]
Создание эффекта размытого стекла в CSS
Эффект размытого стекла украшает собой дизайн вашей страницы. В этой статье вы найдете 2 способа создать эффект стекла с помощью CSS.
Практическое использование css-свойств grid-template-areas и grid-area
Одним из свойств CSS Grid Layout является назначение grid-областей в виде использования свойства grid-template-areas для контейнера и grid-area для вложенных в него элементов сетки. Как […]
Использование линий сетки в CSS Grid Layout для построения макета
В стандарте CSS Grid Layout есть масса свойств и возможностей,с которыми бы хотелось разобраться, чтобы иметь возможность их применять на практике. Одной из таких возможностей […]
Как добавить иконки Font Awesome в меню WordPress
Добавление иконок в меню навигации вашего сайта может быть необходимо вам по дизайну макета или по вашему собственному желанию, т.к. иконки дают вашим посетителям некоторые […]
