Как сделать CSS градиент для фонового изображения. Однотонные и цветные градиенты поверх фотографий с примерами HTML и CSS кода. Различные способы создания CSS подложек…
Если вы хотите впечатлить посетителей своего сайта, используйте CSS-анимацию! Сначала это может показаться простым, но использование подобной анимации может…
Стандартное text-decoration ограничено, а кроссбраузерный эффект подчёркивания требует работы с фоном и позиционированием. Разбираются приёмы: применение одного и…
Wrapper в CSS ограничивает ширину контента, центрирует его и держит боковые отступы на узких экранах. Разобраны max-width, margin auto, padding и box-sizing, сетка во внутреннем блоке,…
Высота строки в CSS задается свойством line-height: безразмерное число наследуется как коэффициент, а em и проценты передают потомкам готовую длину. Разобраны ориентиры…
Текст внутри круга в CSS делается двумя способами. Короткую надпись центрирует Grid в блоке с border-radius: 50% и aspect-ratio: 1. Длинную цитату выстраивают по контуру двумя…
В этой статье рассказывается о том, как создать прокрутку с эффектом параллакса для Hero-раздела целевой страницы сайта. При этом мы используем только CSS
Адаптивное выпадающее меню собирается на чистом CSS: чекбокс открывает мобильную навигацию, flexbox выстраивает ссылки от 768px, вложенный список дает подменю с…
Наложить один элемент на другой можно через position: absolute внутри родителя с position: relative или поместив элементы в общую ячейку Grid; порядок слоев задает z-index. Отдельно…
Цвет ссылки в CSS задается свойством color для пяти состояний: :link, :visited, :hover, :focus-visible и :active, а порядок правил LVHA решает, какой цвет победит. Отдельно разобраны…
Кликабельную область на изображении можно задать четырьмя способами: фигурой SVG, картой изображения, clip-path и CSS-скруглением. Для каждого есть рабочий код, а в конце…
Многострочное усечение текста с кнопкой «Показать больше» делается на CSS: line-clamp ограничивает абзац тремя строками, а чекбокс с меткой раскрывает его без JavaScript.…
Межстрочный интервал в CSS задает line-height, а промежуток между абзацами — margin. Показано, как увеличить отступ до 2em, почему большой line-height раздувает разрыв, как отступы…
В статье рассказывается, как создать эффект размытого изображения с помощью фильтров CSS. А также как ограничить размытие в конкретной области изображения
Псевдокласс :hover меняет стиль элемента под указателем, и на нем строятся цвет и подчеркивание ссылок, эффекты для блоков и выпадающее меню. В статье есть готовый…
Справочник по CSS Grid: как включить сетку, задать столбцы, строки и промежутки, растянуть элемент на несколько ячеек, разметить страницу областями и выровнять…
Многие веб-дизайнеры сталкиваются с проблемой трансформации текста и его выравнивания внутри фигур. Для этих целей можно воспользоваться средствами CSS и jQuery
Я всегда задавался вопросом: в чем разница между свойствами grid-template-* и grid-auto-*? Особенно интересно выявить различия между grid-template-rows/columns и grid-auto-rows/columns.
CSS- свойство position определяет положение элемента на веб-странице. Существует несколько типов позиционирования: static, relative, absolute, fixed, sticky, initial и inherit. Разберемся, что…
В этой статье вы найдете 10 лучших сниппетов с открытым исходным кодом, которые можно использовать в качестве шаблонов для создания собственных каруселей
Единицы px, em и rem в CSS считаются от разных баз: px от CSS-пикселя, em от шрифта родителя или самого элемента, rem от шрифта html. Формулы перевода px в rem и em, таблицы значений,…
Прокручиваемый блок делается ограничением высоты и свойством overflow: auto; max-height дает блоку расти до предела. Есть сравнение значений overflow, отключение лишней…
Цвет текста задает color, цвет фона — background-color, а картинку на весь экран дает background-size: cover. Разобраны форматы цвета (название, hex, rgb, hsl), параметры фона, прозрачность…
Организация пагинации страниц сайта очень важна, чтобы сделать просмотр удобным для посетителя. Мы нашли впечатляющие примеры навигации на HTML5 и CSS3 для подпитки…
Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. background image HTML поможет получить тот…
Display: none убирает элемент из раскладки, visibility: hidden оставляет на его месте пустое пространство. Сравнение этих способов с opacity: 0, атрибутом hidden и visually-hidden по фокусу,…
Тег pre сохраняет пробелы и переносы строк, поэтому подходит для листингов кода. Разобраны экранирование символов, связка с code, моноширинный шрифт, фон и рамка,…
Свойство overflow управляет содержимым, выходящим за границы блока: hidden обрезает, auto и scroll дают прокрутку, clip обрезает жестко. Разобраны настройка осей, многоточие,…
CSS селекторы позволяют установить связь одного правила с определенным элементом HTML. А также, чтобы задавать стили для отдельных элементов, игнорируя другие.
Адаптивное меню на HTML, CSS и небольшом скрипте: на широком экране ссылки стоят в строку через flexbox, на узком прячутся за кнопкой-гамбургером. В конце — полный листинг…
Рабочая корзина для сайта на чистом JavaScript без библиотек: добавление товаров без дублей, количество от 1 до 99 с пересчетом суммы, сохранение в localStorage и форма заказа…
Цвет текста в CSS задает свойство color: его можно записать названием, HEX, RGB или HSL, в том числе с прозрачностью. Показано, как перекрасить абзацы, отдельный класс, всю…
Обводку текста в HTML задают через CSS или SVG: -webkit-text-stroke дает контур, прозрачная заливка оставляет только линии, text-shadow рисует тонкий контур тенями, а paint-order делает…
Селектор элемент:not(.класс) выбирает элементы без указанного класса; показано, чем отличаются :not(.a):not(.b), :not(.a, .b) и :not(.a.b), как :not() влияет на специфичность и как…
Четыре способа подключить CSS к HTML: внешний файл через link, блок style, атрибут style и @import. Как создать файл и указать путь в href, какой способ побеждает при конфликте и что…
Свойство transform визуально перемещает, поворачивает, масштабирует и наклоняет элемент, не сдвигая соседей. Порядок функций меняет результат, точку преобразования…
Сама по себе история CSS3 очень увлекательна. Это одна из тех технологий, которые дают нам возможность подробно рассмотреть развитие структуры Сети. Мы можем…
Мы собрали для вас подборку лучших примеров JQuery анимации и CSS3. Вы можете посмотреть исходный код, чтобы понять, как анимируется каждый из примеров.
Свойство display определяет, какие боксы создает элемент и как он раскладывается: чем различаются block, inline и inline-block, как скрыть элемент через none, когда нужны table-cell, flex,…
Анимация в HTML средствами CSS: transition для hover-эффектов, @keyframes для появления, пульсации и спиннера, готовые классы Animate.css, запуск по клику и при прокрутке. Отдельно…
Сегодня мы поработаем над пониманием разницы между HTML padding(внутренний отступ) и margin(внешний отступ) в CSS. Но сначала разберемся с их синтаксисом. Существует…
Правило CSS import позволяет импортировать внешние таблицы стилей не только на HTML-страницу, но и в другой стилевой документ. Это упрощает управление файлами и их…
Существует множество различных способов задать подчеркивание текста . Если мы говорим об идеальном сценарии, подчеркивание должно удовлетворять следующим…
Автоматические боковые отступы центрируют блок только при заданной ширине меньше контейнера и блочном отображении. Если центрирование не работает, причина…
Cellpadding заменяется свойством padding у ячеек td и th, cellspacing — border-spacing у таблицы; плотную сетку дает border-collapse: collapse. Разобраны режимы collapse и separate, значения по умолчанию,…
Свойства HTML display и visibility используются, чтобы вывести или скрыть HTML-элементы. Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже…
По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам. Для гиперссылок эти стили по умолчанию определяют, что любой текст…
Выпадающий список в HTML собирается из тегов select и option, оформляется через CSS с appearance: none и своей стрелкой, а поиск и выбор нескольких значений добавляют datalist, атрибут…
Стилизация select в CSS: сброс нативного вида через appearance: none, размер, шрифт, рамка и фон, своя стрелка на SVG или обертке, состояния, темная тема и режим base-select. В конце —…
Комментарий в CSS заключается между /* и */ и работает в одну или несколько строк; двойной слеш // в чистом CSS не годится, а вложенные комментарии не поддерживаются.…
С помощью свойства CSS opacity можно контролировать CSS прозрачность HTML-элементов веб-страницы, таких как текст, изображения или фон. В данной статье мы расскажем об…
Margin задает внешний отступ, padding — внутренний; разница видна в блочной модели, в сокращенной записи значений и в схлопывании вертикальных margin. Примеры на div, меню,…
Использование CSS является наиболее оптимальным способом центрирования изображений, блоков текста и даже всего дизайна веб-страницы. Большинство свойств для HTML…
Flexbox в CSS: как включить flex-контейнер, настроить направление, перенос, промежутки и выравнивание, управлять размером и порядком элементов. Готовые примеры…
Кнопка в CSS строится на элементе button с классом: цвет, сброс браузерных стилей и состояния hover, active, focus-visible и disabled. Три визуальных стиля — черно-белый, Flat UI и Material Design…
Контролировать внешний вид HTML-элементов на странице можно при помощи нескольких селекторов. ID и CSS class являются наиболее распространенными, которые помогают не…
В каскадных таблицах стилей элементам страницы присваиваются значения атрибутов id и CSS class для того, чтобы стилизовать их. Но что делать, если у вас нет доступа к…
Выравнивание изображений в CSS: левый и правый край, центр, обтекание текстом через float и его отмена, ряд картинок на flex и grid, адаптивность и вертикальное…
Наверняка вы видели сайты с оригинальными полосами прокрутки. Это достигается с помощью нового CSS scroll свойства webKit-scrollbar. К сожалению, оно работает только в…
Рабочие CSS hover-эффекты с готовым кодом: заливка, подчеркивание и подъем кнопок, зум и оверлеи для картинок, анимация SVG, направление входа курсора. Отдельно…
В этой статье мы поэтапно рассмотрим правила верстки сайта с двумя колонками. Код, приведенный нами, позволит вам добавить шапку и подвал, охватывающие эти две…
Плавное перемещение элемента строится на transform: translate3d, а не на top, left и margin, которые заставляют браузер пересчитывать геометрию. В конце — рабочие примеры для…
Классы в CSS и HTML: как назначить элементу один или несколько классов, написать для них правила и понять, какое из конфликтующих правил победит. Отдельно разобраны…
Классы нужны для повторяющихся стилей, ID оставляют для якорей, связи label с полем и обращения из JavaScript. Приведены синтаксис, таблица сравнения, вес селекторов при…
Приведенные в этой статье сниппеты адаптивного кода идеально подойдут для любого типа макетов. Вы найдете в этом перечне вертикальные и горизонтальные меню для…
В этой статье мы рассмотрим, как создать горизонтальное меню для сайта с помощью HTML и CSS. Чтобы получить интерактивное меню, нужно использовать JQuery, HTML 5 и CSS3.
Иногда, когда мы смотрим на радиокнопки или input type checkbox, то у нас возникают неприятные ощущения. Кажется, что они выглядят ужасно. Но пока не посыпалась нецензурные…
Генераторы CSS-кода могут быть узкоспециализированными, и одни из них предназначены для создания кнопки CSS. Эти элементы управления позволяют осуществлять…
Свойство font-size позволяет указывать размер текста CSS. Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em, rem и…
Центрировать блок по центру в CSS можно шестью приемами: Grid и Flexbox дают центр по двум осям, margin: 0 auto работает по горизонтали, absolute с transform подходит для неизвестного…
Как собрать CSS-спрайт из двух PNG-иконок 50×50: холст 50×104, расчет background-position, смена иконки при наведении, версия для Retina. Дальше — браузерный генератор, автосборка…
Мне часто задают вопросы вроде: «Стоит ли использовать медиа-запросы (media queries) min-width или max width CSS? Те, кто знаком с адаптивным дизайном, сочтут этот вопрос странным,…
Выпадающее меню на чистом CSS строится из вложенных списков HTML: подменю прячется и открывается наведением или фокусом с клавиатуры. Показаны три уровня…
Свойство position задает способ размещения элемента: relative и sticky сохраняют место в потоке, absolute и fixed освобождают его. Есть таблица сравнения значений, примеры…
Интернет, как средство коммуникации, имеет ряд особенностей. Настолько ярко выраженных, что многие считают, что естественный и плавный переход к типографике это…
Как получить светлые и темные варианты фирменного цвета в Sass без ухода в белый и черный: color.scale, color.adjust и color.mix. Из двух базовых цветов собирается палитра в…
Создание сложной анимации иногда может превратиться в трудоемкий процесс, и здесь пригодятся библиотеки и генераторы анимации. В этой статье приводится перечень…
Тень блока в CSS задает box-shadow, тень текста — text-shadow, тень прозрачного PNG или SVG — filter: drop-shadow(). Даны готовые значения для карточек, кнопок, полей и заголовков,…
Перенос слов и строк в CSS и HTML в обе стороны: как разрешить разрыв длинного URL, хеша или слова в узкой колонке и как запретить его для цены, телефона и названия.…
Sass - это расширение CSS, которое добавляет в него вложенные правила, переменные, примеси, функции и многое другое. Его использование облегчает задачу создания CSS.
Градиентную рамку в CSS делают тремя способами: border-image для прямых углов, два фоновых слоя для скругленных и псевдоэлемент с маской для прозрачного центра. Есть…
Компонентный CSS строится на независимых блоках интерфейса с собственными стилями, упрощенным BEM в именах классов и понятной структурой каталогов. На примере…
Долгое время веб-дизайнеры были ограничены в своём творчестве прямоугольными очертаниями. И по сей день, большая часть Всемирной паутины остаётся заключенной в…
Основная идея, стоящая за гибкой разметкой – это наделить контейнер способностью изменять высоту/ширину (и порядок) его элементов для оптимального заполнения…
Статья собирает 21 геометрическую фигуру на CSS – от простых кругов и квадратов до сложных звёзд, сердца и восьмиугольника – с готовым кодом для каждой. Отдельно…
В этом списке мы собрали для вас несколько лучших примеров применения CSS. Мы выбрали удивительные работы различных художников, которые утверждают, что на…
Статья объясняет, как сделать фоновое изображение на весь экран средствами CSS: разбирает background-size cover, шорткат background с обязательным слэшем, поведение на мобильных…
О том, что такое CSS, знают практически все, кто тем или иным образом причастен к созданию сайтов. Термин «CSS прозрачность» (или css opacity) тоже на слуху. Чаще всего эта…
Sass и SCSS – два синтаксиса одного языка: отступный записывает блоки отступами, SCSS – фигурными скобками и точками с запятой. Есть таблица отличий, плюсы и минусы…
Анимация SVG средствами CSS на одном сквозном примере: как подготовить рисунок и назначить классы, встроить его в HTML, собрать 10-секундную шкалу с задержками,…
Объемный куб на чистом CSS собирается из шести плоских граней: сцена с перспективой, трансформации граней, бесконечное вращение, затенение и тень под основанием.…
Sass превращает SCSS и indented Sass в обычный CSS. Установка Dart Sass через npm или архив, компиляция style.scss и режим --watch, затем переменные, вложенность, миксины, @extend, цветовые…
Свойства CSS для оформления текста: шрифт и подключение веб-шрифта, цвет и контраст, размеры в rem и clamp(), межстрочный интервал, отступы, выравнивание, тени, переносы и…
Эта статья предназначена для повышения осведомленности о некоторых наиболее существенных недостатках анимаций на основе CSS, так что вы сможете избежать головной…
CSS использует тот же синтаксис «блока комментариев», что и языки семейства C - вы начинаете комментарий с / * , и заканчиваете его * /. Тем не менее, в CSS отсутствует…
Фон в CSS: цвет, изображение, повторение, положение и прокрутка, линейный и радиальный градиенты, несколько слоев и сокращенная запись background. Отдельно разобраны…
Меню на CSS от разметки до готового блока: nav и список, горизонтальный ряд на flexbox, вертикальная боковая панель, выпадающее подменю с управлением с клавиатуры и…
Три способа подключить шрифт в CSS: системный стек через font-family, Google Fonts через link и @import и собственный woff2 через @font-face с разными весами и стилями. Отдельно разобраны…
Значения свойства position (static, relative, absolute, fixed, sticky) и то, от чего считается каждое смещение. Правила z-index и контекста наложения, четыре примера, которые можно…
Если вы похожи на меня, то когда вы видите впечатляющий пример новой функциональности CSS3, вам не терпится начать использовать его на ваших веб-сайтах
CSS-анимации строятся из правила @keyframes и свойства animation: кадры задают состояния, а подсвойства управляют длительностью, задержкой, направлением, паузой и…
8 мин чтения
Загрузить еще
Мы используем cookie для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов. Подробнее...