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

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

7 случаев использования пользовательских свойств CSS

От автора: пользовательские свойства (также известные как CSS-переменные) позволяют нам хранить значения свойств для повторного использования в таблицах стилей. Если вы относительно новичок в этой теме, вы можете задаться вопросом, когда можно использовать их вместо переменных препроцессора (если вы действительно используете препроцессор). В эти дни я часто использую пользовательские свойства в своем рабочем процессе, и я подумал, что было бы ...

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

Почему HSL цвета CSS лучше!

От автора: одним из наиболее фундаментальных понятий в CSS являются цвета HSL. Это базовая концепция, но в этой статье мы сосредоточимся на ее представлении при указании браузерам. В Интернете каждый цвет представляет собой комбинацию из 3 цветов: красный, зеленый и синий. Как каждый пиксель на экране состоит из трех лампочек: зеленой, синей и красной. Наиболее распространенным методом представления цветов в ...

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

Учимся создавать макет Masonry-галереи, используя чистый CSS

От автора: сегодня я собираюсь показать вам, как вы можете построить сложную Masonry-сетку, используя CSS Grid. CSS Grid изменил способ разработки наших макетов, и мы собираемся создать интересный проект, используя его возможности. Вот как будет выглядеть наш макет в конце статьи: Выглядит интересно? Если это так, продолжайте. Именно здесь CSS Grid действительно проявляет свою силу, поскольку позволяет размещать и выравнивать ...

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

Соображения в основе макета Flexbox

От автора: мне просто нужно разместить два блока рядом, и я слышу, что flexbox хорош в таких вещах.   Просто добавление display: flex; к родительскому элементу укладывает его потомком в ряд Ну, это круто. Полагаю, я мог использовать float, но это проще. Они, вероятно, должны занять все доступное пространство. Могу ли я просто растянуть родителя на 100% ширины? Ну, я ...

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

Как реализовать перекрытие изображений в CSS

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

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

Упрощенная гибкая типографика

От автора: гибкая типографика — это идея, что font-size (и, возможно, другие атрибуты шрифта, например line-height) меняются в зависимости от размера экрана (или, возможно, запросов контейнера, если они у нас были). Основная хитрость заключается в единицах на основе окна просмотра. Вы можете буквально задать шрифт в единицах на основе окна просмотра (например font-size: 4vw), но колебания в размерах настолько велики, ...

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

Описательные имена классов CSS

От автора: иногда я сталкиваюсь с ситуациями, когда мне нужны дополнительные имена классов CSS для манипулирования стилями. Когда это происходит, я делю эти ситуации на стандартные типы и присваиваю каждому типу префикс имени класса, который представляет этот тип. Классы состояний Любой компонент может иногда нуждаться в состоянии — определенном условии, в котором к нему применяется определенный стиль. Если мы возьмем, ...

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

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

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

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

Методы создания газетного макета с помощью CSS-сетки и границ между элементами

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

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

Создание сложных макетов с использованием CSS Grid

От автора: это руководство предназначено для людей, которые слышали о css-grid и хотят узнать, что она может, или, возможно, не уверены, как ввести ее в свой рабочий процесс. Также статья будет вам интересна, если вы оттачиваете навыки верстки, не прибегая к фреймворкам, таким как Bootstrap. Базовые знания о css — это хорошо, но вы должны следить за новинками. После прочтения ...

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