Category: CSS 3

07
Июл
2020

Grid — для макета, Flexbox — для компонентов

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

03
Июл
2020

Единицы измерения CSS на основе области просмотра

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

02
Июл
2020

Крутые трюки CSS Grid для вашего блога

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

01
Июл
2020

Как использовать grid-template-area для изменения порядка элементов

От автора: работая над сайтом FordLabs, мы с моим напарником столкнулись с, казалось бы, сложной ситуацией. У нас было три элемента, которые нужно было расположить горизонтально в порядке [1] [2] [3] на экранах планшетов и на настольных компьютерах, но затем расположить вертикально в порядке [1] [3] [2] на мобильных устройствах. Хотя мы могли бы использовать […]

30
Июн
2020

Как задать обратный порядок пользовательских счетчиков CSS

От автора: мне нужен был нумерованный список постов в блоге, чтобы они были перечислены от последнего к первому. Как задать обратный порядок пользовательских счетчиков CSS? Примерно так: [crayon-5efaec55a323b811225625/] Но приведенное выше — это просто текст. Я хотел сделать это с помощью семантического элемента ol. Простой способ Это можно сделать с помощью свойства HTML reversed для […]

29
Июн
2020

CSS :is() и :where() уже на пути в браузеры

От автора: новые псевдо-классы CSS :is() и :where() теперь поддерживаются в предварительных версиях Safari (Tech Preview 106) и Firefox (версия 78). Реализация в Chrome остается с флагом. Используйте :is(), чтобы уменьшить количество повторений Вы можете использовать псевдо-класс :is()для удаления повторений в списках селекторов. [crayon-5ef98f59d68dd534474587/] Этот функционал в основном полезен в стандартном, необработанном коде CSS. Если […]

25
Июн
2020

Вот что я не знал о «content»

От автора: несколько недель назад Стефан опубликовал на своем веб-сайте пост под названием Свойство CSS «content» принимает альтернативный текст, что поразило меня. Он показал, что свойство content принимает 2 значения, а не только 1, фактическое содержимое и альтернативный текст. Простой пример: [crayon-5ef44f56a5e73293130132/] Я не знал этого, и мне было интересно, есть ли еще вещи, которых […]

24
Июн
2020

Руководство пользователя по переменным CSS

От автора: настраиваемые свойства CSS для каскадных переменных, давно запрошенные, но все еще недостаточно используемые, предлагают революционные возможности для совместной работы и повторного использования кода.. Переменные в CSS были крайне востребованной функцией рабочей группы CSS Консорциума World Wide Web, к которой я присоединилась в 2012 году, с самого начала группы в 1997 году. К концу […]

23
Июн
2020

Настройка глобальных стилей и стилей компонентов с помощью переменных CSS

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

22
Июн
2020

Первый взгляд на aspect-ratio

От автора: эй! Совершенно новое свойство, которое влияет на размер блока! Это важная вещь. Уже есть много способов создать блок с соотношением сторон (и я бы сказал, что это решение на основе пользовательских свойств является лучшим), но ни один из них не является особенно интуитивным и, конечно, не таким простым, как объявление одного свойства. Итак, […]

19
Июн
2020

Использование calc для определения оптимального значения line-height

От автора: хотя мы можем применить к line-height любую единицу измерения CSS, значение без единиц измерения 1,5 является наиболее рекомендуемым способом его обработки. Для начала, пояснительное изображение о том, как высота строки применяется браузером: Как видите, высота строки распределена по разным областям: «Область контента», которая будет равна примерно 1 в высоту. «Область направляющих», то есть […]

17
Июн
2020

Первые шаги возможной реализации CSS-макета Masonry

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

12
Июн
2020

Преобразование объекта с фиксированными размерами в адаптивный элемент

От автора: недавно я попал в ситуацию, когда хотел показать iPhone на веб-сайте. Я хотел, чтобы пользователи могли взаимодействовать с демо-версией приложения на этом «фиктивном» телефоне, поэтому он должен был отображаться в CSS, а не изображением. Я нашел отличную библиотеку под названием marvelapp/devices.css. Библиотека реализовала нужное мне устройство с использованием чистого CSS, и они выглядели […]

09
Июн
2020

Использование масок CSS для создания зубчатых краев

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

05
Июн
2020

Как настроить высоту строки в CSS

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

04
Июн
2020

Все, что я узнал о min(), max(), clamp()

От автора: функции сравнения CSS (min(), max(), clamp()) стали поддерживаться в Firefox с 8 апреля 2020, что означает, что они теперь поддерживаются во всех основных браузерах. Эти функции CSS предоставляют способы получить динамические макеты и более гибкие компоненты дизайна. Их можно использовать для размеров контейнера, размера шрифта, отступов и многого другого. Более того, веб-дизайнерам теперь, […]

03
Июн
2020

CSS исправление для 100vh в мобильных WebKit браузерах

От автора: недавно наблюдался ажиотаж вокруг того, как WebKit обрабатывает CSS 100vh, по существу игнорируя нижний край окна просмотра браузера. Некоторые предложили избегать использования 100vh, другие придумали разные альтернативы для решения проблемы. Фактически, эта проблема уходит еще в давние времена, когда Николас Хойзи подал уведомление об ошибке в WebKit по этому вопросу (кратко: WebKit говорит, […]

25
Май
2020

3 безумно простых способа переключить сайт в темный режим

От автора: как однажды сказал печально известный Дарт Вейдер: «Ты не знаешь силы Темной стороны». 2019 год вдохнул жизнь в слова Вейдера, когда темный режим захватил наши приложения, и им все стали повально увлекаться. От Instagram до Youtube, наши любимые приложения запрыгнули на подножку, и уже не далек день триумфа Ситхов. Что такое темный режим? […]

21
Май
2020

Как создать карусель на чистом CSS

От автора: в данном уроке будет показано создание карусели на чистом CSS. Здесь нет JavaScript здесь вообще! Нет плагинов jQuery. Нет хаков. Просто пара новых CSS-свойств, с которыми я экспериментировал, а также немного базового HTML. Хорошо, чтобы начать, нам нужно сосредоточиться на разметке. Дизайн включает в себя левый блок навигации, состоящий из изображений, и большую […]

19
Май
2020

Темный режим и переменные шрифты

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

18
Май
2020

Создание масштабируемой архитектуры CSS с помощью BEM и служебных классов

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

06
Май
2020

Псевдослучайное добавление иллюстраций с помощью CSS

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

04
Май
2020

Создание адаптивных макетов без использования медиа-запросов

От автора: привет всем! Дискуссии на эту тему ведутся с тех пор, как появились grid и flexbox со всеми своими интересными аспектами, заставляющими контент быстро реагировать на область просмотра. Тем не менее, это может быть пугающим для тех, кто начинает использовать такие передовые технологии CSS, как grid и flexbox, которые могут создавать привлекательные макеты — […]

01
Май
2020

Создать адаптивную траекторию движения CSS? Конечно, мы это можем!

От автора: недавно у нас имела место дискуссия на тему Анимация в рабочем пространстве: как вы могли бы сделать траекторию движения CSS адаптивной? Какие техники будут работать? Это заставило меня задуматься. Траектория движения CSS позволяет нам анимировать элементы вдоль пользовательских траекторий. Эти траектории следуют той же структуре, что и контуры SVG. Мы определяем контур для […]

01
Май
2020

Ограничение для CSS-сетки без max-width

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

29
Апр
2020

Использование CSS для размещения текста внутри круга

От автора: вы хотите разместить текст внутри фигуры круга с помощью HTML и CSS? Звучит безумно, верно? На самом деле, нет! Благодаря shape-outside и некоторым хитростям CSS можно сделать именно это. Тем не менее, это может быть неудобный вариант макета. Мы должны принимать во внимание множество разных вещей, таких как количество символов, количество слов, изменения […]

28
Апр
2020

Стилизация нумерованных списков с помощью CSS-счетчиков

От автора: вот сценарий, с которым я сталкиваюсь время от времени: мне нужно создать нумерованный список, и я хочу, чтобы он был красивым. Поскольку семантический HTML важен, я использую корректный тег ol: [crayon-5ea7e1e6c7d18944884684/] Проблема в том, что «маркеры» (номера пунктов) находятся в мертвой зоне CSS-селектора. У нас нет способа стилизовать их независимо*! Я не тот […]

27
Апр
2020

Как сместить футер в самый низ страницы: Flexbox vs. Grid

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

27
Апр
2020

Как в CSS воссоздать красивую анимацию Netflix

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

24
Апр
2020

Элементы равной высоты: Flexbox vs. Grid

От автора: когда-то давно (примерно 7 лет назад) я написала плагин jQuery для вычисления столбцов одинаковой высоты. Это гарантировало, что очень специфический сценарий строки с тремя столбцами будет поддерживать поля содержимого равными по высоте, независимо от длины контента, которое они содержат. Доминирующий метод размещения в то время – float — не справлялся с этой проблемой. […]