CSS-свойство content — это мощный инструмент, который генерирует контент непосредственно в документе посредством CSS. Оно часто применяется в сочетании с псевдоэлементами ::before и ::after для вставки контента перед или после содержимого элемента.
Анимация играет ключевую роль в создании современного веб-сайта. Она не только украшает страницу, но и значительно улучшает взаимодействие с пользователем.
Каждый язык программирования включает переменные, которые являются его основой. Переменная в программировании — это контейнер, который хранит какое-либо значение.
Чтобы ускорить загрузку сайта, существует множество методов. Один из самых эффективных — сокращение количества и объема загружаемых файлов. Для этого мы оптимизируем исходный код, уменьшаем вес графики и выбираем наиболее подходящие форматы файлов.
Про историю единиц измерения можно очень многое рассказать, только пиксели чего стоят. Пиксель (px) — первая единица измерения в HTML и CSS, базовая, абсолютная и окончательная.
Отступы на любой веб-странице играют важную роль. Они помогают выстроить визуальную иерархию элементов, делают текст более читабельным и делают интерфейс более удобным для восприятия пользователем.
Иногда дизайнеры создают такие макеты, что хочется спросить: «Как это вообще возможно реализовать?» Например, как плавно изменить градиентный фон у кнопки? С помощью псевдоэлементов действительно можно не только добавить анимацию смены градиентного фона, но и облегчить другие задачи при вёрстке и поддержке сайта. Например: декоративные иконки, в том числе меняющие цвет; анимированные рамки кнопок; эффектное подчёркивание ссылок; орнаменты...
Как стилизовать упорядоченные списки? Как добавить ведущий ноль у такого списка? Что делать если у вас вложенный список? Самый простой вариант: писать спаны. Но это как-то грустно: Можно пропустить нужное число При изменении порядка сложно следить за порядком нумерации
Первые селекторы, о которых я расскажу, это псевдоклассы :first-child и last-child. Что они делают? Выбирают первый и последний элемент в блоке, который соответствуют селектору. То есть элемент должен соответствовать селектору и быть первым в родительском блоке.
За годы работы с HTML, CSS и немного JavaScript я замечаю одну приятную закономерность: ВЭБ развивается. Причем развивается очень быстро. Для некоторых действий раньше приходилось писать много кода для построения сеток но пришли Flex и Grid.
Иногда дизайнеры добавляют не очень стандартные элементы в макеты. Ну как на скриншоте ниже: Скриншот из фигмы, слева круглый элемент который по контуру обтекает
На сайтах часто можно встретить элементы как ниже на картинке. Подробно о их предназначении говорить не буду, есть ссылки на MDN progress и meter. Но как их стилизовать? progress и meter в браузере 'Яндекс' Progress и meter в моём браузере на момент написания статьи
Относительно недавно встретил такой заголовок, к которому у меня есть вопросы. На самом деле это не заголовок, но важная часть страницы. Вот пример с изменённым текстом: ЗАГОЛОВКИ ДОЛЖНЫ БЫТЬ ДОСТУПНЫМИ ЧИТАБЕЛЬНЫМИ КОНТРАСТНЫМИ Лень читать? В конце статьи полезные ссылки и видео))
Браузерные чекбоксы и радиокнопки в разных браузерах могут выглядеть по-разному. Кроме того, внешний вид этих элементов практически всегда выбивается из стиля сайта. А как их стилизовать? Как у чекбокса поменять рамку с галочкой, а радиокнопку сделать квадратной?
Нет на свете проблем, есть задачи и вопросы. Решил сделать для себя сайт, а на главной нужно было сделать звёздное небо. Как-то скучно было брать из макета картинку, по тому решил добавить немного динамики: сделать звёзды мерцающими. Этот код я написал давно, и он немного изменился: поправлял некоторые ошибки.
Всплывающие подсказки это небольшие окошки информирующие пользователя. Они могут быть разных цветов и сами удаляются через короткий промежуток времени. Цвета зависят от того о чем это окошко сообщает. Например, если после отправки данных на сервер все ок, то окошко зеленое. В противном случае красное.
Пример таймера. В нем используется библиотека Snapsvg. Для работы данного таймера необходимо лишь подключить timer.js и вызвать функцию svgTimer() с параметрами. При этом на странице может находиться сразу несколько таймеров с разным отсчетом времени.
Поводи курсором возле кота Код очень старый, до 2018го года)) не судите строго)) HTML <script type="text/javascript" src="https://releases.jquery.com/git/jquery-git.min.js"></script> <div class="parent__cat"> <svg viewBox="0 0 14 13" id="my_cat"> <path class="cat" fill="#303030" d="M12.9 6.9c0 2.5-2.6 4.7-5.7 4.7S1.4 9.4 1.4
Периодически дизайнеры делают макеты, для которых так и хочется добавить анимацию. Например, висящие декоративные элементы просят добавить параллакс; волнам хочется добавить движение; неоновым линиям на тёмном фоне напрашивается блеск; лоадеры вообще не представляю без круговой или наполняющей заливкой фигуру без анимации.
Современный веб-сайт содержит большое количество компонентов. Даже если минималистичный дизайн, практически на любой странице встречаются множество иконок. Качественная верстка подразумевает, что некоторые иконки могут масштабироваться. В подобных случаях важно сохранить высокое качество отрисовки изображения.
Рассматриваем создание SVG-спрайтов для эффективной работы с векторными изображениями. Практические примеры встраивания спрайтов в HTML, настройка автоматизации сборки. Использование символов и элементов use, работа с внешними спрайтами и CSS-масками. Сравнение разных подходов к организации векторных ресурсов.
Как сделать цвет текста градиентом? Впервые я столкнулся с этим вопросом очень давно. И он ещё актуален, потому что для полной совместимости нужно использовать вендорные префиксы.
Мой первый рисунок на SVG. Он конечно очень простой, но это первый рисунок который я сам нарисовал на SVG и анимировал с помощью CSS, а в дальнейшем и с помощью JS. Но анимация этого кота на JS будет в соответствующем разделе.
На большинстве современных сайтов часто используются различные всплывающие элементы: это могут быть модальные окна, подсказки (поповеры), выпадающие меню и другие компоненты. Раньше, чтобы такие элементы работали корректно, разработчикам приходилось писать довольно много кода на JavaScript.
Навигация на сайте — это очень сложный элемент. Он содержит важную информацию, которая должна быть всегда доступна всем пользователям. Что нужно учитывать во время верстки? Какие подходы использовать, чтобы навигация была доступна любому пользователю и удобна для поддержки разработчиками?
Привет!) Статья скорее для студентов: расскажу как добавить на страницу сайта иконку не добавляя её в html, и как быть если нужно поменять часть svg иконки. Кто-то предлагает использовать шрифтовые иконки, что не очень хорошо. Я покажу другие способы.
Как создать гибкую, адаптивную и отзывчивую вёрстку для веб-страницы? Для создания гибкой и адаптивной веб-страницы часто применяют подход mobile-first. Этот метод предполагает, что сначала разрабатывается дизайн для мобильных устройств, а затем адаптируется под более крупные экраны.
Во время вёрстки проекта часто появляется необходимость поставить элемент по центру. Сделать это можно несколькими способами. У каждого варианта есть свои плюсы и минусы, начну, как всегда, с самого простого.
Когда речь идет о создании современного веб-сайта, одной из ключевых задач является обеспечение страницы удобным интерфейсом. Часть этой работы выполняют дизайнеры. А верстальщики сталкиваются с вопросом переполнения и недополнения, которое может существенно ухудшить интерфейс страницы.
Создавая проекты, я уже не задумываюсь о том, какие свойства наследуются, а какие нет. Я действую на автопилоте. Однако, на самом деле, понимание наследуемости CSS свойств — это очень важная тема! Её осознание делает код более лаконичным и удобным для поддержки проекта.
На современных веб-сайтах часто используются различные виды видео: информационные ролики, развлекательные клипы, декоративные вставки и многое другое. Порой пользователи даже не замечают, что перед ними видеоролик. Как правильно интегрировать видео на страницу и добиться нужного эффекта?
Моя первая HTML страница была создана с использованием тега <table>, который создавал сетку страницы. Однако вскоре я узнал о более подходящих способах построения сеток, и таблица перестала быть основным инструментом в верстке. В те времена сетки страниц формировались с помощью флоатов и инлайн-блоков.
Рассмотрим четыре заголовка: Скриншот четырёх заголовков в грид сетке Заголовки выглядят одинаково, но они по разному сделаны. С виду все заголовки выглядят одинаково, но между ними есть большая разница: каждый элемент сделан определённым способом. А потому будут работать в разных ситуациях по-разному!
Figma является мощным инструментом для вёрстки и дизайна, который полезен как для вёрстальщиков, так и для дизайнеров. Однако, из-за изменений в функционале, некоторые возможности стали платными, что может вызывать неудобства при работе.
Перенос текста на веб-странице — это важная и увлекательная тема. Объясню её на примерах и расскажу о возможных решениях. Поскольку не хочется раскрывать макеты академии, примеры будут из макетов найденных в интернете.
Многие начинающие веб-разработчики слышали о препроцессоре стилей SCSS. Но что это такое? Если говорить простыми словами, то SCSS — это CSS с расширенными возможностями. Он позволяет использовать переменные, создавать вложенные структуры, а также применять функции, миксины и циклы, которые недоступны в обычном CSS.
Ленивая загрузка iframe — сильно уменьшает скорость загрузки страницы. А требование от заказчика ускорить загрузку страницы не просто прихоть. Особенно когда заказчик открывает новый сервис. Ведь не каждый пользователь будет ждать долго загрузку страницы.
В процессе работы иногда возникает необходимость провести линии по диагонали блока или же закрасить его по диагонали. Как же достичь такого результата? Линия, размеры известны Когда известны размеры и они не изменятся, создание такой линии не представляет сложности.
С помощью CSS можно создавать разнообразные эффекты с текстом, и речь идёт не только о размере и начертании символов. Даже цвет текста можно превратить в изображение. Кроме того, текст можно расположить вертикально и даже перевернуть символы.
В большинстве социальных сетей и других сервисов, где есть возможность оставлять комментарии, присутствует элемент textarea. Его отличительная черта — увеличение высоты при заполнении. Как же это достигается?
Очень часто даже на простых макетах встречаются элементы, над которыми нужно подумать. Один из таких элементов — поле ввода пароля. Сегодня разберём один из вариантов решения этого вопроса.
Сегодня я не буду описывать CSS, так как цель этой статьи — показать, как можно использовать HTML-элемент <video> с помощью JavaScript, а также объяснить логику работы скрипта.
Стилизация простого текстового input, как правило, не вызывает особых трудностей. Однако, когда дело доходит до стилизации input с типом range, ситуация становится немного сложнее. Различия во внешнем виде элементов требуют разных подходов, а иногда необходимо использовать JavaScript.
На многих лендингах можно увидеть интерактивные элементы, известные как слайдеры, с изображениями до и после. Возникает вопрос: как создать такой слайдер, чтобы он был простым и универсальным? В интернете можно найти множество различных подходов к решению этой задачи.
Простая галерея для сайта с интересными эффектами. В этом слайдере реализовано следующее: автоматическое воспроизведение при наведении курсора на галерею перемотка приостанавливается после клика на кнопку перемотка тоже приостанавливается, но если курсор уходит за пределы кнопки, перемотка возобновляется на мобильной версии активный слайд всегда находится в центре.
Подкатили новые демки для сеток галереи. Одна на гридах, вторая на флексах. У каждой есть свои плюсы и минусы. На флексах можно добавить высоту картинкам что бы немного уровнять размеры, но пропорции могут потеряться. А на гридах необходимо добавлять лишние классы. Но при этом можно более жестко поддерживать пропорции картинок.
Треугольник Пенроуза на чистом CSS. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
Простое выпадающее меню на чистом CSS. Простое выпадающее меню на чистом CSS. Ссылка 1 Ссылка 2 Ссылка 3 CSS button, a { display: block; box-sizing: border-box; width: 100%; max-width: 180px; height: 100%; padding: 6px; overflow: hidden; font-size: inherit; font-family: Arial, Helvetica, sans-serif; text-align: left; color: #0000EE; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; background-color: beige; border: 0; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out; appearance: none; }
Смена цвета картинки. # CSS CSS img { filter: hue-rotate(0); transition: filter 0.25s ease-in-out; } [data-color="img1"] { filter: hue-rotate(0deg); }