Главная » Архив меток: CSS 3

Архив меток: CSS 3

Построение сеток CSS Grid — простые именованные области

От автора: я представляю себе именованные области в CSS Grids, как привнесение собственного синтаксиса. Это строго не необходимо (вы можете выразить размещение сетки другими способами), но это может сделать это размещение более интуитивно понятным. И, эй, если я ошибаюсь, поправьте меня в комментариях. Возьмем за пример построение сеток CSS Grid с тремя столбцами: .grid { display: grid; grid-gap: 1rem; grid-template-columns: ...

Читать далее »

Удивительные эффекты текстур и узоров с помощью CSS и JavaScript

От автора: текстуры и узоры уже давно являются частью веб-дизайна. Используемые в качестве фона или для выделения контента, они помогают задать тон наших работ. Но благодаря постоянно развивающимся веб-технологиям мы можем использовать с помощью JavaScript и CSS текстуры и узоры по-новому. Они больше не должны быть статическими. Теперь их можно объединять с техниками движения и затенения, чтобы создать некоторые умопомрачительные ...

Читать далее »

Styled-components CSS V4: хорошие, плохие и совершенно другие

От автора: я хочу полюбить styled components CSS, действительно хочу. На самом деле, меня настолько взволновали эти симпатичные новые вещи в версии 4, что я потратил одно дождливое субботнее утро на то, чтобы преобразовать проект из Vanilla CSS в стилизованные компоненты. Хотя я мог в это время прыгать в лужах. Мой процесс: я переименовал файлы CSS в JS и заменил ...

Читать далее »

Позиционирование элементов в CSS Grid: отрицательные линии сетки

От автора: знаете ли вы, что вы можете использовать отрицательные номера линий, чтобы позиционировать в CSS Grid элементы сетки? Я не делал этого до недавнего времени — точнее, я не думал об этом, так как никогда не чувствовал, что мне это нужно. Но после того, как я написал статью об относительном позиционировании элементов сетки, у меня в голове застряло, что ...

Читать далее »

Валидный CSS content

От автора: есть свойство CSS content, которое используется в тандеме с элементами ::before и ::after. Оно вводит контент в элемент. Вот пример: <div data-done="&#x2705;" class="email"> chriscoyier@gmail.com </div> .email::before { content: attr(data-done) " Email: "; /* Это вставляется перед адресом email */ } Свойство обычно принимает все, что вы туда вносите. Однако есть некоторые недопустимые значения, которые оно не примет. Я ...

Читать далее »

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

От автора: если вы когда-либо использовали смежные селекторы CSS одного уровня, вы знаете, что их всего два. Комбинатор + выбирает первое соответствие, которое находит сразу после, а комбинатор ~ выбирает все последующие. Но у нас нет способа выбрать те, которые расположены раньше. Либо родительские селекторы, либо предыдущие селекторные одного уровня — такого просто нет. Я знаю, что вы этого хотите, ...

Читать далее »

Border-radius CSS может это сделать?

От автора: когда вы используете восемь значений свойства border radius CSS, определяющих радиус округления углов границы, вы можете создавать естественно выглядящие фигуры. ВОТ ЭТО ДА. Нет времени, чтобы прочитать все это? Мы создали для вас визуальный инструмент. Он доступен здесь. Вступление В рамках конференции Frontend Conference в Цюрихе Рэйчел Эндрю рассказал об Использовании возможностей Grid Layout. В конце своего доклада ...

Читать далее »

Различные фигуры CSS

От автора: с помощью CSS фигуры создаются не слишком сложно. Квадраты и прямоугольники создать просто, так как они являются естественными фигурами сети. Добавьте ширину и высоту, и у вас есть прямоугольник точного размера. Добавьте border-radius, и вы можете округлить эту фигуру, этого достаточно, чтобы превращать эти прямоугольники в круги и овалы. Мы также имеем псевдо-элементы ::before и ::after psuedo, которые ...

Читать далее »

Создание гибких макетов с помощью Flexbox CSS

От автора: до появления CSS Grid был Flexbox (который официально известен как CSS Flexible Box Layout Module). Flexbox был разработан для управления макетом в одном направлении — строке (flex-direction: row или row-reverse) или столбце (flex-direction: column или column-reverse). Это контрастирует с сеткой, которая учитывает строки и столбцы. Базовый гибкий макет создать просто: добавьте для родительского элемента display: flex или display: ...

Читать далее »

Отладка и оптимизация CSS: Минимизация с помощью CSSO

От автора: на пути к тому, чтобы стать мастером CSS, вам нужно знать, как отлаживать и оптимизировать CSS. Как вы диагностируете и устраняете проблемы с рендерингом? Как вы обеспечиваете, чтобы CSS не вызывал проблем с производительностью для конечных пользователей? И как вы обеспечиваете качество кода? Знание того, какие инструменты использовать, поможет вам обеспечить, чтобы front-end работал оптимально. В этой статье ...

Читать далее »