CSS-свойство content — это мощный инструмент, который генерирует контент непосредственно в документе посредством CSS. Оно часто применяется в сочетании с псевдоэлементами ::before и ::after для вставки контента перед или после содержимого элемента.
Анимация играет ключевую роль в создании современного веб-сайта. Она не только украшает страницу, но и значительно улучшает взаимодействие с пользователем.
Каждый язык программирования включает переменные, которые являются его основой. Переменная в программировании — это контейнер, который хранит какое-либо значение.
Чтобы ускорить загрузку сайта, существует множество методов. Один из самых эффективных — сокращение количества и объема загружаемых файлов. Для этого мы оптимизируем исходный код, уменьшаем вес графики и выбираем наиболее подходящие форматы файлов.
Про историю единиц измерения можно очень многое рассказать, только пиксели чего стоят. Пиксель (px) — первая единица измерения в HTML и CSS, базовая, абсолютная и окончательная.
Отступы на любой веб-странице играют важную роль. Они помогают выстроить визуальную иерархию элементов, делают текст более читабельным и делают интерфейс более удобным для восприятия пользователем.
Иногда дизайнеры создают такие макеты, что хочется спросить: «Как это вообще возможно реализовать?» Например, как плавно изменить градиентный фон у кнопки? С помощью псевдоэлементов действительно можно не только добавить анимацию смены градиентного фона, но и облегчить другие задачи при вёрстке и поддержке сайта. Например: декоративные иконки, в том числе меняющие цвет; анимированные рамки кнопок; эффектное подчёркивание ссылок; орнаменты...
Как стилизовать упорядоченные списки? Как добавить ведущий ноль у такого списка? Что делать если у вас вложенный список? Самый простой вариант: писать спаны. Но это как-то грустно: Можно пропустить нужное число При изменении порядка сложно следить за порядком нумерации
Первые селекторы, о которых я расскажу, это псевдоклассы :first-child и last-child. Что они делают? Выбирают первый и последний элемент в блоке, который соответствуют селектору. То есть элемент должен соответствовать селектору и быть первым в родительском блоке.
За годы работы с HTML, CSS и немного JavaScript я замечаю одну приятную закономерность: ВЭБ развивается. Причем развивается очень быстро. Для некоторых действий раньше приходилось писать много кода для построения сеток но пришли Flex и Grid.
Иногда дизайнеры добавляют не очень стандартные элементы в макеты. Ну как на скриншоте ниже: Скриншот из фигмы, слева круглый элемент который по контуру обтекает
На сайтах часто можно встретить элементы как ниже на картинке. Подробно о их предназначении говорить не буду, есть ссылки на MDN progress и meter. Но как их стилизовать? progress и meter в браузере 'Яндекс' Progress и meter в моём браузере на момент написания статьи
Относительно недавно встретил такой заголовок, к которому у меня есть вопросы. На самом деле это не заголовок, но важная часть страницы. Вот пример с изменённым текстом: ЗАГОЛОВКИ ДОЛЖНЫ БЫТЬ ДОСТУПНЫМИ ЧИТАБЕЛЬНЫМИ КОНТРАСТНЫМИ Лень читать? В конце статьи полезные ссылки и видео))
Браузерные чекбоксы и радиокнопки в разных браузерах могут выглядеть по-разному. Кроме того, внешний вид этих элементов практически всегда выбивается из стиля сайта. А как их стилизовать? Как у чекбокса поменять рамку с галочкой, а радиокнопку сделать квадратной?
Практически у каждого сайта есть элементы с фоном: вся страница, отдельные блоки, кнопки, иконки многое другое. Но на самом деле это свойство скрывает большие возможности. Фоновый цвет Начну с самого простого: фоновый цвет. Это самое простое что, можно сделать) нужно всего одно свойство: background-color.
image-set это интересный метод, который появился недавно, но я жду с нетерпеньем, когда он заработает во всех браузерах. Тут важно помнить что это не конструкция определяющая какая картинка должна загрузиться у пользователя, а метод, предоставляющий разные параметры.
«Селекторы по атрибутам» это довольно интересная тема, которая открывает кучу возможностей во время верстки макета. Некоторые из таких селекторов я использую на практике. Это далеко не все интересные селекторы в css, и про некоторые из них я написал статьи ранее.
Тут все просто: в текущем блоке с помощью знака > выбираем дочерний элемент. Рассмотрим на примере как это работает: HTML <style> .block-3 span { background-color: aqua; } </style> <div class="block-3"> <span>1</span> <span>2</span> <span>3</span> <span>4 <span>4.1</span> </span> <span>5</span> </div>
Выбирает соседний селектор. Для примера можно написать верстку как в примере предыдущей статьи про «Соседские селекторы». HTML <div class="block-2"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> Опять выберу третий span и изменю в нем цвет текста
Данный селектор выбирает все элементы после выбранного, внутри родителя. Проще говоря: выбирает все элементы после выбранного. Для того, что бы понять как он работает, пропишу следующий код: HTML <div class="block-1"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div>
Для своего же сайта пишу шаблон, ну и в дальнейшем этот шаблон применю в wordpress. Дошло дело до страницы 404 и надо что то думать… В результате сделал анимированного «Мурзика» следящего за курсором.
Если вы хотите обучаться вместе со мной, то приглашаю вас на индивидуальные курсы HTML Academy: «Профессиональная вёрстка сайтов» или «Адаптивная вёрстка и автоматизация».
Просто спросите у менеджера меня — наставника Зиновьева Александра. Обучение проходит в помесячном индивидуальном формате, и вы можете начать в любое удобное для вас время.
Кроме того, в HTML Academy вы получите профессию и даже сможете устроиться на работу с новой профессией.