Category: CSS 3

24
Сен
2021

Библиотека MoreToggles для Checkbox

От автора: одним из элементов форм, которые стилизовать достаточно проблематично, являются чекбоксы. В этом уроке вы познакомитесь с замечательной библиотекой MoreToggles.css, которая поможет решить данную проблему. Библиотека использует только CSS и …

20
Сен
2021

7 полезных советов по CSS для улучшения ваших навыков

От автора: изучение CSS иногда может быть тяжелым. Вам нужно выучить множество концепций. Изучить CSS несложно, но вам потребуется много практики, чтобы научиться в нем хорошо разбираться. Учиться на практике — лучший способ улучшить свои навыки, независимо от того, какую технологию вы хотите изучить. Вот почему в этой статье я хотел поделиться с вами списком […]

16
Сен
2021

Несколько нюансов использования пользовательских свойств

От автора: в последнее время я заметил некую проблему при использовании пользовательских свойств, которая сбивает людей с толку, включая и меня, поэтому я постараюсь описать ее. Добавим в CSS пару пользовательских свойств: [crayon-6142d94f0c8b8929451202/] Давайте сразу воспользуемся ими, чтобы сделать фоновый градиент: [crayon-6142d94f0c8be524188634/] Теперь предположим, что на странице есть пара div: [crayon-6142d94f0c8c0723283757/] Позвольте мне стилизовать их: […]

15
Сен
2021

Практическое использование функций CSS: calc, clamp, min, max

От автора: в настоящее время в CSS есть четыре хорошо поддерживаемых математических функции. Я обнаружил, что каждая из них чрезвычайно полезена в повседневной работе. Эти функции могут использоваться, возможно, неожиданными способами, например, в градиентах и цветовых функциях, а также в сочетании с пользовательскими свойствами CSS. Мы изучим синтаксис каждой из них, рассмотрим основные демонстрации их […]

09
Сен
2021

Инструменты CSS Grid в DevTools

От автора: CSS Grid — это очень мощная система макета CSS, которая позволяет веб-разработчикам создавать сложный двухмерный макет и устанавливать правила для каждого дочернего элемента в сетке, такие, как размер, выравнивание и упорядочение. CSS Grid был представлен после того, как стал популярным Flexbox, и вместе они могут помочь разработчикам добиться лучшего адаптивного дизайна без сложных […]

30
Авг
2021

Вложенность CSS, специфика и вы

От автора: вложенность CSS скоро появится в браузерах. С помощью вложенности, с которой вы, возможно, знакомы по Sass или Less, вы можете значительно сократить количество повторяющихся селекторов. Но вы также можете загнать себя в угол, если не будете осторожны. Это обзор того, как вы уже можете использовать ее сегодня, подводных камней и того, как их […]

25
Авг
2021

В чем разница между значениями выравнивания start, flex-start и self-start?

От автора: в этом посте вы узнаете разницу между значениями выравнивания start, flex-start и self-start в flexbox. При выравнивании элементов по началу и концу строки в flexbox есть несколько значений на выбор. В этом посте я собираюсь объяснить разницу между некоторыми значениями, которые, как кажется, делают очень похожие вещи: flex-start и flex-end start и end […]

24
Авг
2021

Использование CSS-форм для элементов управления и навигации

От автора: прямо горизонтально или вертикально — это общеизвестный порядок пользовательских элементов управления на экране. Как список пунктов меню. Но что, если мы изменим его на макет с изгибами, кривыми и уклонами? Мы можем осуществить это с помощью всего нескольких строк кода. В эпоху современного минималистичного дизайна изогнутые макеты для пользовательских элементов управления придают веб-дизайну […]

23
Авг
2021

6 причин использовать Tailwind вместо традиционного CSS

От автора: в статье вы найдете шесть причин того, почему Tailwind лучше традиционного CSS и стоит ли его использовать в проектах. 1. Небольшой размер пакета = невероятная производительность В режиме разработки размер вывода Tailwind довольно велик. Это сделано намеренно: на этом этапе создается каждый возможный класс, поэтому вам не нужно ждать завершения процесса сборки, когда […]

12
Авг
2021

Дилемма наименования переменных размера шрифта

От автора: как правило, проект имеет набор заранее определенных размеров шрифта, обычно в виде переменных, названных таким образом, чтобы добиться некоторого подобия порядка и согласованности. Любой проект значительного размера может использовать что-то подобное. Всегда есть заголовки, абзацы, списки и т. д. Вы можете явно устанавливать размеры шрифта (например font-size: 18px). Сырой CSS как бы. Я […]

11
Авг
2021

Позиционирование перекрывающего содержимого с помощью CSS-сетки

От автора: недавно я экспериментировал с CSS-сеткой и свойствами выравнивания для создания макетов компонентов, содержащих несколько перекрывающихся элементов. Эти макеты могут быть оформлены с использованием абсолютного позиционирования и сочетания значений смещения (top, right, bottom, left), отрицательными полями и преобразованиями. Но с помощью CSS Grid, позиционирование наложеных элементов могут быть построены с использованием более логичных, удобочитаемых […]

05
Авг
2021

Определение устройств с возможностью наведения указателя мыши

От автора: с ростом количества устройств мы, разработчики, больше не можем полагаться на размер области просмотра как на фактор, определяющий стили, которые мы обслуживаем для пользователей веб-сайта. Вплоть до недавнего времени мы могли поймать себя на том, что делаем предположения, основанные на размере устройства: например, что мобильные устройства будут полагаться на сенсорный ввод, в то […]

04
Авг
2021

Псевдокласс target для модального окна

От автора: в одном из предыдущих уроков вы могли увидеть реализацию модального окна с помощью HTML тега details. В данном уроке вы познакомитесь с еще одним вариантом реализации компонента модального окна и для этого будет использован псевдокласс targ…

29
Июл
2021

Простой CSS-хак для сокращения времени загрузки страницы

От автора: все хотят, чтобы их страница загружалась быстрее. Это также помогает повысить производительность SEO. Давайте посмотрим, как можно уменьшить время загрузки страницы, внеся несколько изменений в CSS. Влияние CSS на время загрузки страницы CSS — один из основных факторов, влияющих на время загрузки страницы. Когда приложение встречает файл CSS, оно загружает CSS в приоритетном […]

23
Июл
2021

22 CSS-секрета, которые сделают вас макетным ниндзя

От автора: сегодня я хотел бы рассказать вам о нескольких свойствах, секретах и значениях CSS, которые редко упоминаются в технической литературе, но, на мой взгляд, представляют особый интерес для повышения скорости и качества разработки веб-интерфейсов. Многие из обсуждаемых свойств являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами. Итак, вы готовы к небольшому путешествию в […]

22
Июл
2021

Использование эффективных изображений в CSS с помощью image-set()

От автора: функция CSS image-set() поддерживается в браузерах на основе Chromium с 2012 года и в Safari с версии 6. Недавно поддержка появилась в Firefox 88. Давайте погрузимся в суть вопроса и посмотрим, что можно и чего нельзя делать с image-set(). Несколько разрешений одного и того же изображения Вот что говорится в спецификации CSS об […]

20
Июл
2021

Пользовательские полосы прокрутки в CSS

От автора: в наши дни пользовательские полосы прокрутки становятся все более популярными, и я хочу рассмотреть эту тему. Есть разные причины для настройки полосы прокрутки. Например, полоса прокрутки по умолчанию может сделать пользовательский интерфейс приложения несовместимым с различными операционными системами, и поэтому нам нужно использовать единый стиль полосы прокрутки. Мне всегда было интересно узнать, как […]

12
Июл
2021

Медиа-запросы во времена @container

От автора: теперь, когда на горизонте появляются контейнерные запросы, нужны ли нам вообще медиа-запросы? Есть ли будущее, в котором мы будем создавать адаптивные интерфейсы полностью без них? Итан, который ввел термин адаптивный веб-дизайн более десяти лет назад, недавно сказал, что макеты без медиа-запросов, безусловно, имеют определенные ограничения: Можем ли мы считать гибкий макет «отзывчивым», если […]

09
Июл
2021

Давайте узнаем о соотношении сторон в CSS

От автора: важно иметь постоянное соотношение ширины и высоты изображений и других адаптивных элементов. В CSS мы много лет использовали метод заполнения отступов, но теперь у нас есть встроенная поддержка соотношения сторон в CSS. В этой статье я расскажу, что такое соотношение сторон, как мы это делали и как это сделать по-новому. Конечно, будут примеры […]

09
Июл
2021

Давайте узнаем о соотношении сторон в CSS

От автора: важно иметь постоянное соотношение ширины и высоты изображений и других адаптивных элементов. В CSS мы много лет использовали метод заполнения отступов, но теперь у нас есть встроенная поддержка соотношения сторон в CSS. В этой статье я расскажу, что такое соотношение сторон, как мы это делали и как это сделать по-новому. Конечно, будут примеры […]

08
Июл
2021

Одинаковые столбцы с помощью Flexbox: это сложнее, чем вы думаете

От автора: вы имеете красивый дизайн, в котором есть красивый большой hero-раздел, за которым следует секция из этих трех столбцов прямо под ним. Как и почти любой другой веб-сайт, над которым вы когда-либо работали. Вы проходите через hero-раздел и приступаете к работе над разделом из трех столбцов. Пора вспомнить о нашем ненадежном товарище flexbox! Однако, […]

07
Июл
2021

CSS size-adjust для @font-face

От автора: по мере загрузки веб-шрифта теперь вы можете настроить его масштаб, чтобы нормализовать размеры шрифтов документа и предотвратить сдвиг макета при переключении между шрифтами. Рассмотрим следующую демонстрацию, где размер шрифта составляет 64 пикселя, а единственное различие между каждым из этих заголовков — это семейство шрифтов. Примеры слева не были скорректированы и имеют несовместимый окончательный […]

06
Июл
2021

Краткое руководство по логическим свойствам CSS

От автора: этот пост о логических свойствах CSS с примерами базового и расширенного использования. Если вы думаете, что вам не нужны логические свойства CSS, подумайте еще раз! Если вы когда-либо работали над веб-сайтом для глобального клиента, вы могли встретить термины «слева направо» (ltr) и «справа налево» (rtl). Языки с написанием слева направо включают большинство западных […]

01
Июл
2021

Контейнерные запросы CSS: примеры использования и стратегии миграции

От автора: контейнерные запросы CSS приближают медиа-запросы к целевым элементам и позволяют им адаптироваться практически к любому заданному контейнеру или макету. В этой статье мы собираемся рассказать об основах контейнерных запросов CSS и о том, как их использовать сегодня. Когда мы пишем медиа-запросы для элемента пользовательского интерфейса, мы всегда описываем, как этот элемент стилизован в […]

30
Июн
2021

Новые функциональные селекторы псевдо-классов CSS :is() и :where()

От автора: при написании CSS иногда можно получить длинные списки селекторов для нацеливания на несколько элементов с одинаковыми правилами стиля. Вместо этого можно использовать новые функциональные селекторы псевдо-классов. Например, если вы хотите изменить цвет любых <b> внутри элемента заголовка, вы можете написать: [crayon-60dc0c2b2beef545551296/] Вместо этого вы можете использовать: is() и улучшить читаемость, избегая длинного селектора: […]

29
Июн
2021

Контейнерные запросы CSS для дизайнеров

От автора: работа над веб-дизайном включает в себя разработку дизайна для экранов разных размеров. На основе этих дизайнов разработчик будет использовать медиа-запросы CSS для определения ширины или высоты области просмотра, а затем изменять дизайн на основе этого. Именно так мы разрабатывали веб-макеты последние 10 лет, и скоро этот процесс станет еще лучше. У меня для […]

25
Июн
2021

CSS Shape Outside

От автора: одной из интересных возможностей в CSS является CSS Shapes. Используя возможности CSS Shapes, можно гибко управлять обтеканием текстом различных геометрических фигур и изображений. Соответственно, данная возможность позволит создавать интер…

23
Июн
2021

Как создать неоновый текст с помощью CSS

От автора: неоновый текст может добавить приятный футуристический штрих любому веб-сайту. Мне всегда нравилась магия неоновых надписей, и я хотел воссоздать их с помощью CSS. Я хочу поделиться советами, как это сделать! В этой статье мы рассмотрим, как добавить к тексту эффекты свечения. Мы также рассмотрим различные способы анимации неоновых надписей с использованием CSS и […]

11
Июн
2021

CSS следующего поколения: @container

От автора: Chrome экспериментирует со свойством @container в рамках спецификации уровня ограничения 3 рабочей группы CSS, над которой работают Мириам Сюзанн из Oddbird и группа инженеров по веб-платформе. @container дает нам возможность стилизовать элементы в зависимости от размера их родительского контейнера. @containerAPI не является стабильным, и подлежит изменениям синтаксиса. Если вы попробуете его самостоятельно, вы […]

11
Июн
2021

CSS следующего поколения: @container

От автора: Chrome экспериментирует со свойством @container в рамках спецификации уровня ограничения 3 рабочей группы CSS, над которой работают Мириам Сюзанн из Oddbird и группа инженеров по веб-платформе. @container дает нам возможность стилизовать элементы в зависимости от размера их родительского контейнера. @containerAPI не является стабильным, и подлежит изменениям синтаксиса. Если вы попробуете его самостоятельно, вы […]