От автора: копаясь в спецификациях w3c, можно выявить множество интересных функций. Хотя некоторые из них еще не поддерживают браузеры, мы, по крайней мере, можем узнать, какие новые функции можно ожидать в ближайшее время. Одна из новых функций — новая функция image(). Она даст нам больше контроля над загрузкой изображений в CSS. Давайте рассмотрим возможности совершенно […]
От автора: узнайте, как управлять размером элементов, поддерживать правильный интервал и реализовывать гибкую типографику с помощью этих хорошо поддерживаемых функций CSS. Поскольку адаптивный дизайн развивается и становится все более детализированным, сам CSS постоянно развивается и предоставляет авторам больший контроль. Функции min(), max() и clamp(), которые теперь поддерживаются во всех современных браузерах, являются одними из последних […]
От автора: одна из наиболее важных функций веб-сайта, созданного с учетом специальных возможностей — это возможность перемещаться по нему с помощью клавиатуры. Большинство слепых пользователей и многие пользователи с ограниченными двигательными возможностями полагаются на навигацию с помощью клавиатуры, будь то стандартная клавиатура или устройство, имитирующее функционал клавиатуры. Поэтому необходимо обеспечить четкие визуальные индикаторы, выделяющие элемент, […]
От автора: когда-то существовал золотой стандарт макета веб-сайта, который все стремились создать, но это было трудно сделать правильно: Макет Святого Грааля. Не похоже, чтобы это было так сложно, правда? Но это была эпоха до появления flexbox; нашими инструментами для работы были таблицы и float, и ни один из них не подходил для этой задачи. Технически […]
От автора: переменные CSS (также известные как пользовательские свойства) поддерживаются в веб-браузерах почти четыре года. Мне нравится использовать их в зависимости от проекта и ситуации. Они очень полезны и просты в использовании, но часто фронтенд-разработчик может неправильно их использовать или неправильно понимать. Основная цель этой статьи заключается в том, что я хотел создать место, где […]
От автора: исторически HTML-формы были довольно сложными — во-первых, потому что требовалось хотя бы немного JavaScript, а во-вторых, потому что никакое количество CSS не могло заставить их работать. Однако это не обязательно верно в случае современного веб, поэтому давайте узнаем, как размечать формы, используя только HTML и CSS. Базовая структура Начните с элемента form. Здесь […]
От автора: бывают случаи, когда желательно иметь шкалу размера шрифта между двумя крайностями в зависимости от ширины экрана. Странно то, что я видел, как люди используют, чтобы достичь этого, например, RFS. Сам RFS представляет собой пример того, как НЕ делать это в эпоху вычислений и сравнений CSS3. Хотя, к сожалению, такие проблемы распространены среди тех, […]
От автора: в этом руководстве показано, как определять сетки CSS на странице, инспектировать их и устранять проблемы с макетом в панели Элементы Chrome DevTools. Откройте для себя CSS-сетки Когда к HTML-элемент на странице применено display: grid или display: inline-grid, вы можете увидеть значок grid рядом с ним в панели Элементы. Щелкните значок, чтобы переключить отображение […]
От автора: давайте посмотрим, как с помощью CSS сделать слой полупрозрачного фона, не затрагивая текст. Допустим, у вас есть изображение, подобное этому крабу, и вы хотите разместить его в пользовательском интерфейсе под текстом. [crayon-5facf780d5550297842517/] Но если вы просто поместите изображение позади текста, текст может быть трудночитаемым, поэтому вам также нужно добавить более темное полупрозрачное наложение […]
От автора: многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт Bold Comic Sans для заголовков и шрифт Roboto для текста. Однако из-за этого ваш веб-сайт может выглядеть неаккуратным, поскольку многие браузеры не поддерживают все шрифты. Свойство CSS font-size-adjust поможет избежать такой ситуации, сделав размер шрифта […]
От автора: как фронт-энд разработчик, вы сталкивались с множеством ошибок CSS, которые могут помешать пользователю завершить или успешно выполнить свою задачу. Ошибка CSS может быть визуальной или технической, и оба этих типа могут повлиять на взаимодействие с пользователем. Иногда вы торопитесь и у вас нет времени на полную отладку и исправление ошибки, поэтому вы работаете […]
От автора: инструменты для вертикального выравнивания в последнее время стали намного лучше. В первые годы работы в качестве дизайнера веб-сайтов я разрабатывал дизайн домашней страницы шириной 960 пикселей и выравнивал элементы по горизонтали на странице с помощью сетки из 12 столбцов. Появились медиа-запросы, которые потребовали серьезного психологического сдвига. Конечно, они решили некоторые значительные проблемы, но […]
От автора: переменные CSS (или пользовательские свойства, в зависимости от того, как вы предпочитаете их называть) действительно хороши, и, скорее всего, вы уже используете их в своих проектах. В этой статье я расскажу о трех вещах, о которых, как мне кажется, могут многие не знать. что происходит, когда функция var() использует неопределенную переменную, как работают […]
От автора: данная статья предлагает руководство ко всему, что вам нужно знать о центрировании в CSS. Горизонтальное центрирование 1. Встроенные элементы text-align Для центрирования встроенного элемента, такого как ссылка, span или изображение, все, что вам нужно, это text-align: center. [crayon-5fa262a587984345858845/] [crayon-5fa262a58798b487649916/] Для нескольких встроенных элементов процесс аналогичен. Это возможно при использовании text-align: center. [crayon-5fa262a58798d283099346/] [crayon-5fa262a58798f686248276/] […]
От автора: несколько полезных функций CSS для диапазонов значений уже некоторое время хорошо поддерживаются, и я наконец их нашел. Я недавно узнал о трех функциях CSS, и я не могу поверить, что никогда не слышал о них раньше: min, max, и clamp. Они позволяют определять гибкий диапазон значений для любого свойства в одной строке. Они […]
От автора: несколько полезных функций CSS для диапазонов значений уже некоторое время хорошо поддерживаются, и я наконец их нашел. Я недавно узнал о трех функциях CSS, и я не могу поверить, что никогда не слышал о них раньше: min, max, и clamp. Они позволяют определять гибкий диапазон значений для любого свойства в одной строке. Они […]
От автора: этот пост предназначен для людей, которые никогда не играли с красным квадратом в CSS. Собственно говоря, вот красный квадрат: [crayon-5f9bc91249c0b414589263/] [crayon-5f9bc91249c12159438357/] Без лишних слов, приступим. CSS переходы Анимация в CSS выполняется с помощью transitions и animations. Переходы используются для менее сложных анимаций, в основном для перехода от одного этапа к другому — отсюда […]
От автора: этот пост предназначен для людей, которые никогда не играли с красным квадратом в CSS. Собственно говоря, вот красный квадрат: [crayon-5fa24fc00bbb0508812721/] [crayon-5fa24fc00bbb5388564011/] Без лишних слов, приступим. CSS переходы Анимация в CSS выполняется с помощью transitions и animations. Переходы используются для менее сложных анимаций, в основном для перехода от одного этапа к другому — отсюда […]
От автора: когда вы обрезаете элемент, используя свойство clip-path, обрезанная область становится невидимой. Если вместо этого вы хотите сделать часть изображения непрозрачной или применить к ней какой-либо другой эффект, вам необходимо использовать маску. В этом посте объясняется, как применять свойство CSS mask-image, которое позволяет указать изображение для использования в качестве слоя маски. Это дает вам […]
От автора: когда вы обрезаете элемент, используя свойство clip-path, обрезанная область становится невидимой. Если вместо этого вы хотите сделать часть изображения непрозрачной или применить к ней какой-либо другой эффект, вам необходимо использовать маску. В этом посте объясняется, как применять свойство CSS mask-image, которое позволяет указать изображение для использования в качестве слоя маски. Это дает вам […]
От автора: в этом уроке вы найдете интересный эффект свечения для текста на CSS. Данный эффект великолепно подойдет, к примеру, для заголовка на первом экране вашего сайта. Эффект смотрится достаточно интересно и наверняка позволит задержать посетителей немного дольше на вашем сайте. При этом сам эффект очень прост в реализации и создается буквально в несколько строк […]
От автора: в этом уроке вы найдете интересный эффект свечения для текста на CSS. Данный эффект великолепно подойдет, к примеру, для заголовка на первом экране вашего сайта. Эффект смотрится достаточно интересно и наверняка позволит задержать посетителей немного дольше на вашем сайте. При этом сам эффект очень прост в реализации и создается буквально в несколько строк […]
От автора: все элементы на веб-страницах определены в прямоугольной рамке. Однако это не значит, что мы должны делать все блоками. Вы можете использовать свойство CSS clip-path, чтобы вырезать части изображения или другого элемента и создать интересные эффекты. В приведенном выше примере изображение воздушного шара квадратное (источник). Использование clip-path со значением базовой фигуры circle() обрезает изображение, […]
От автора: все элементы на веб-страницах определены в прямоугольной рамке. Однако это не значит, что мы должны делать все блоками. Вы можете использовать свойство CSS clip-path, чтобы вырезать части изображения или другого элемента и создать интересные эффекты. В приведенном выше примере изображение воздушного шара квадратное (источник). Использование clip-path со значением базовой фигуры circle() обрезает изображение, […]
От автора: сегодня сложно представить себе современный сайт, на котором бы не использовались тени. Благодаря теням можно обратить внимание на тот или иной элемент, сделать его объемным и более привлекательным. Для работы с тенями используется свойство box-shadow. Но что если тень необходимо задать для изображения? При этом данное изображение является прозрачным, к примеру, это PNG. […]
От автора: сегодня сложно представить себе современный сайт, на котором бы не использовались тени. Благодаря теням можно обратить внимание на тот или иной элемент, сделать его объемным и более привлекательным. Для работы с тенями используется свойство box-shadow. Но что если тень необходимо задать для изображения? При этом данное изображение является прозрачным, к примеру, это PNG. […]
От автора: CSS продолжает развиваться, как и его кузен Javascript. Я подумал, что поделюсь с разработчиками некоторыми свойствами макета CSS, которые пока относительно неизвестны. Первые 3 — это вариации почти одного и того же, а четвертое — самое непонятное и неподдерживаемое из всех. PLACE-ITEMS Оно поражает многих разработчиков. Свойство place-items — это сокращение для свойств […]
От автора: CSS продолжает развиваться, как и его кузен Javascript. Я подумал, что поделюсь с разработчиками некоторыми свойствами макета CSS, которые пока относительно неизвестны. Первые 3 — это вариации почти одного и того же, а четвертое — самое непонятное и неподдерживаемое из всех. PLACE-ITEMS Оно поражает многих разработчиков. Свойство place-items — это сокращение для свойств […]
От автора: градиент — это переход цветов от начальной и конечной точке, а линейный градиент постепенно перемещается по прямой к другому цвету. Градиенты — это последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. Благодаря свойству CSS background-clip очень легко реализовать градиенты для текста. Синтаксис: как создавать текстовые градиенты Во-первых, мы должны […]
От автора: градиент — это переход цветов от начальной и конечной точке, а линейный градиент постепенно перемещается по прямой к другому цвету. Градиенты — это последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. Благодаря свойству CSS background-clip очень легко реализовать градиенты для текста. Синтаксис: как создавать текстовые градиенты Во-первых, мы должны […]
Свежие комментарии