10 невероятных CSS-трюков, которые преобразят ваш веб-макет

Любой, кто имеет опыт в веб-дизайне, независимо от того, использовали ли вы самодельные конструкторы веб-сайтов или создавали сайт с нуля, вероятно, слышали о CSS раньше. Этот невероятно мощный инструмент можно использовать для преобразования ваших веб-макетов, предоставляя вам возможность контролировать свой веб-сайт и реализовывать свое творческое видение. Но как вы можете использовать каскадные таблицы стилей, чтобы раскрыть потенциал вашего следующего веб-сайта?

В этом руководстве будет подробно описан ряд свойств CSS, которые использовались для создания заголовка, который вы можете видеть на изображении выше. Вы можете найти этот проект здесь на КодПен, давая вам возможность попробовать это для себя.

CSS-манипуляции с изображениями

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

1. CSS фоновое изображение

Мы хотим иметь полноэкранное фоновое изображение для нашего заголовка, и свойство CSS background-image идеально подходит. Во-первых, нам нужно создать контейнер для нашего изображения (и остальных элементов в заголовке).

Мы начали с добавления тега div с классом «header», а затем установили его высота до 100вх и это ширина до 100vw; это дает нам блок точно такого же размера, как окно просмотра. Мы также добавили правило CSS для тела страницы с его переполнение скрыто и это поля установлены на 0px.

Имея контейнер, мы можем добавить фоновое изображение, и для достижения этой цели нам понадобятся три разных правила CSS. Первому, фоновому изображению, нужен URL-адрес, чтобы он служил источником фонового изображения, и мы использовали для этого удобный каталог Unsplash. Нам также необходимо установить размер фона для покрытия и фоновое положение вниз, но вы можете поэкспериментировать с ними для достижения наилучших результатов.

2. CSS Background-Blend-Mode

Режимы наложения CSS позволяют смешивать изображения и текст, подобно функции смешивания в таких программах, как Adobe Photoshop. Чтобы режимы наложения работали с нашим фоновым изображением, мы устанавливаем цвет фона в полупрозрачный белый перед добавлением режима наложения, который мы хотели использовать.

Следуя этому, фоновый режим наложения был установлен на мягкий свет, что позволяет нам смягчить изображение.

3. CSS Clip-путь

Для нашего следующего трюка мы будем использовать правило под названием clip-path. При использовании HTML-тегов img вы можете указать путь, который будет скрывать части изображений, с которыми вы работаете. Вы можете использовать для этого обычные формы, но вы также можете использовать приложение, генерирующее SVG, для создания более сложного дизайна.

Мы добавили тег div с «flex_image_box», чтобы действовать как контейнер для трех изображений, используя свойство CSS display, чтобы превратить его во flexbox (мы поговорим об этом позже). Внутри тега div были добавлены три тега img с идентификаторами, установленными как «img1», «img2» и «img3». Настройка ширина каждого изображения до 600px, мы можем оставьте свойство высоты пустым без изменения соотношения сторон изображений; теперь пришло время добавить наш клип-путь!

Чтобы создать наши три треугольника, мы использовали один и тот же полигональный clip-path для img1 и img3 с инвертированной версией для img2. Нам также пришлось поиграть с позиционированием нашего контейнера flex-box, чтобы убедиться, что изображения занимают правильное положение на экране. Наши правила clip-path можно увидеть ниже.

4. Непрозрачность CSS

Непрозрачность устанавливает уровень прозрачности любого элемента HTML. Мы устанавливаем непрозрачность наших изображений до 90%, делая их слегка непрозрачными, чтобы они красиво сливались с фоном.

CSS адаптивный текст и изображения

Мы уже изучили искусство создание потрясающих адаптивных веб-сайтов с использованием HTML, CSS и JavaScript в прошлом, но мы можем опираться на принципы, которые вы уже понимаете, обеспечивая более глубокое понимание навыков, необходимых для освоения макетов вашего веб-сайта.

1. Адаптивные/относительные единицы CSS

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

• Эм: эта единица обычно используется с текстом. Это относительно размера шрифта текущего элемента, что делает 4em в четыре раза больше установленного размера шрифта.
• бэр: Как и em, rem относится к размеру шрифта элемента; корневой элемент в иерархии используется для определения размера вывода.
• vw/vh: определение ширины и высоты на основе размера области просмотра, 2vw равно 2% ширины браузера, а 2vh равно 2% высоты браузера.
• %: единица % вычисляет размеры на основе размера родительского элемента.
• вмин/вмакс: эти единицы производят размеры относительно 1% наименьшего или наибольшего размера окна просмотра, предоставляя элементам средства, чтобы реагировать непосредственно на размер окна браузера.

2. Размер шрифта CSS

Это свойство может быть установлено с использованием значений по умолчанию, которые предопределены либо основной таблицей стилей веб-сайта, либо веб-браузером пользователя. Эти значения включают средний, xx-маленький, x-маленький, маленький, большой, x-большой и xx-большой, причем средний установлен по умолчанию для любого текста, в котором отсутствует тег CSS размера шрифта. В качестве альтернативы можно использовать относительные значения при использовании CSS-свойства font-size, и это метод, который мы использовали, чтобы убедиться, что размер текста в нашем разделе заголовка соответствует размеру для любого окно просмотра.

Мы добавили в наш HTML два тега заголовков, что позволило нам добавить текст в проект. Один из них является основным большим заголовком, а другой — подзаголовком, и оба они используют относительные единицы измерения.

Связанный: Как изменить размер шрифта HTML в CSS

3. Ширина и высота CSS

Все элементы HTML имеют размеры высоты и ширины, будь то теги div, img, a или любого другого типа. Эти размеры могут автоматически устанавливаться на значения по умолчанию, но они также могут быть продиктованы веб-дизайнерами с использованием правильных правил; мы использовали оба этих метода для этого заголовка.

Адаптивные единицы использовались для фонового изображения, с высотой, установленной на 100vh, и шириной, установленной на 100vw, но мы также использовали абсолютные единицы для наших трех изображений. Стоит изучить и поэкспериментировать с единицами ширины и высоты CSS, с такими параметрами, как «наследовать», обеспечивающими означает принятие размеров родительского элемента, и есть множество других подобных трюков, которые вы можете использовать.

4. CSS Mix-Blend-Mode

Режим смешивания CSS очень похож на режим смешивания фона, только его можно применять к любому элементу, а не только к фону. Мы использовали это свойство в заголовке H1, чтобы добавить текстуру и сделать проект более интересным. Мы начали с установки нашего цвет текста в черный, с последующей установкой смешанный режим наложения для наложения.

Стоит изучить различные параметры наложения, которые у вас есть при работе с текстом, поскольку фоны с уникальными цветовыми профилями будут по-разному реагировать на используемые вами настройки.

5. Преобразование текста в CSS

CSS text-transform — это умное свойство, которое позволяет дизайнерам изменять регистр текста на своих веб-сайтах, не влияя на то, как его читают поисковые системы. Например, у нас есть установить преобразование текста в верхний регистр в нашем заголовке H1, делая каждую букву заглавной независимо от того, как мы вводим ее в наш HTML.

Свойства переполнения CSS

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

Переполнение CSS и переполнение текста

Overflow и text-overflow — очень похожие свойства CSS. Переполнение может быть применено к любому элементу, что дает вам контроль над содержимым, которое может выйти за его границы. Text-overflow аналогичен, но применяется только к тексту и дает вам возможность добавлять дополнительные параметры к вашим правилам. В этом проекте мы использовали только переполнение (мы использовали его, чтобы ограничить размер тела нашей страницы), но вы можете прочитать о переполнении текста на W3Школы Веб-сайт.

Использование CSS для ваших веб-макетов

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

8 основных советов и приемов CSS, которые должен знать каждый разработчик

Используете ли вы эти ключевые методы CSS для быстрого рабочего процесса и красивого веб-дизайна?

Читать далее

Об авторе