Если вы работаете в веб-индустрии уже пару лет, вы можете почувствовать, что вы всегда кодируете или разрабатываете один и тот же макет сайта. Несмотря на то, что тенденции приходят и уходят, большинство сайтов по-прежнему выглядят одинаково: почти каждый из них использует сетку с 12 колонками, две и три столбца, коробки в коробке и аналогичные формы.
Пришло время, когда мы начали черпать вдохновение из полей или областей, выходящих за рамки цифрового дизайна. Печатные и редакционные проекты могут быть красивыми, поэтому почему бы не сломать старые привычки и не попробовать новые свойства CSS, которые открывают совершенно новый мир бесконечных возможностей?
Революция CSS продолжается — такие вещи, как Flexbox или CSS Grid, предлагают простые способы для создания интересных макетов. Используя CSS, вы можете создавать в визуальных стилях, которые выходят за рамки тех, с которыми вы можете быть знакомы.
В этой статье мы расскажем о некоторых советах CSS, которые помогут вам разбить форму на макетах вашего сайта, с несколькими парами кода.
Содержание статьи
01. Исследуйте режимы смешивания CSS
Эффекты изображения и цветоделения Duotone — одни из самых горячих тенденций веб-дизайна. Они пользуются большой популярностью в Интернете благодаря Spotify, которая реализует их сплоченно. Теперь вы можете прекратить создание нескольких разных цветных версий ваших активов и применять эффекты непосредственно в браузере.
Использование режимов смешивания CSS — это не только отличный способ унифицировать внешний вид контента на веб-сайтах, также позволяет устанавливать разные цветовые версии изображения, изменяя только одно значение в CSS: цвет.
Ortiz Leon Architects использует режимы наложения, чтобы создать фоновое изображение с дуотоном
Существует несколько методов реализации, в зависимости от типа элемента, к которому вы хотели бы применить эффект. Например, вы можете использовать фоновое изображение и фоновый цвет установленный на задней панели контейнера d-blend-mode: darken; или создать наложение с псевдоэлементами (т.е. : до и : после ) на обертке изображения, чтобы получить эффект колорирования.
Для достижения удовлетворительного эффекта дутона, рекомендуется использовать высокий — контрастное черно-белое изображение. Вы можете сделать это, применив фильтры CSS, чтобы установить оттенки серого и высокий уровень контраста.
02. Добавить маску
Маскировка сообщает вашему браузеру, какие элементы актива должны быть видны, и очень полезно для создания творческих форм и макетов. Маскирование можно выполнить тремя способами: используя растровое изображение (например, формат PNG с прозрачными частями), градиенты CSS или элементы SVG.
Обратите внимание, что в отличие от типичного растрового изображения SVG можно масштабировать или преобразовывать без значительного потеря качества.
img {
mask-image: url ('mask.png') линейный градиент (-45deg,
rgba (0,0,0,1) 20%, rgba (0,0,0,0) 50%);
mask-image: url (#masking); / * ссылка на элемент, сгенерированный и определенный в SVG-коде * /
}
Важно отметить, что Firefox поддерживает только последнюю версию, поэтому нам нужно использовать встроенный элемент маски SVG. Что делать, если мы используем растровое изображение с уровнями прозрачности? Прозрачные части изображения не будут видны — другими словами, будут отображаться непрозрачные фрагменты, скрывающие другие фигуры.
Маскировка особенно мощна, потому что она позволяет применять одни и те же свойства к фоновым изображениям, определяя их положение, размер и повторение.
03. Не бойтесь обрезания
Еще одна замечательная особенность — обрезка CSS. Граница формы называется клип-путь (не следует путать с устаревшим свойством клипа), а отсечение определяет, какая область изображения должна быть видимой. Обрезка похожа на вырезание листка бумаги — все, что находится за пределами пути, будет скрыто, а все, что внутри пути, будет видимым.
клип-путь: круг (радиус в x, y);
clip-path: url (#clipping); / * ссылка на элемент SVG * /
Например, если функция круга устанавливает обтравочную маску поверх изображения, вы увидите только часть изображения внутри этого круга.
. Замечательно, что мы можем использовать функции формы и SVG в качестве путей клипов, что дает нам много возможностей — например, мы могли бы анимировать их в морфинговые фигуры.
04. Подумайте о коробке
Shape-outside и shape-inside на помощь! Кто сказал, что текстовые контейнеры всегда должны быть прямоугольными? Давайте выйдем из коробки, буквально, и откроем новые формы, делая наши макеты страниц богаче и менее квадратными. свойства shape-outside и shape-inside позволяют вам обертывать ваш контент вокруг пользовательских путей в CSS.
Итак, как это работает? Просто примените следующий код к данному плавающему изображению или контейнеру:
shape-outside: круг (50%); / * будет циркулировать по кругу * /
Важно отметить, что должно быть определено свойство float и размеры элемента — высота и ширина, иначе это не будет работать , Для фигуры вы можете использовать круг () polygon () inset () или эллипс () .
Другим возможным значением является функция url () . В этом случае это свойство shape-outside определяет форму элемента на основе изображения. Вы можете использовать функцию url () вместо polygon () когда у вас особенно сложная графика со многими кривыми и точками, и вы хотите, чтобы содержимое обернулось вокруг нее плавно
05. Попробуйте SVG для анимации
Честно говоря, я не могу представить сегодняшнюю сеть без SVG (масштабируемая векторная графика). Его название говорит само за себя — оно масштабируется, поэтому оно отвечает на все вопросы, касающиеся гибкого веб-дизайна.
. Помимо масштабируемости, есть еще одна особенность, которая должна побуждать вас играть с SVG: возможность управлять SVG с помощью CSS.
Это анимированное слайд-шоу из презентации Аги в CSSconf Nordic и был полностью создан в HTML и SVG (щелкните, чтобы увидеть его в действии)
. Вы можете подумать, что в некоторых случаях проще использовать растровые изображения, однако , SVG имеет одно большое преимущество перед обычные изображения. Слова, включенные в SVG, хранятся в теге
Анимация SVG с помощью CSS похожа на анимацию любого другого элемента в HTML — это может быть сделано с переходами, преобразованиями и ключевым фреймом. анимации. Когда вы знакомы с SVG-кодом, все остальное просто и очень интуитивно, потому что вы в основном делаете это так же, как и в HTML.
Самое крутое в SVG — это то, что вы можете захватить любую часть, и оживить анимацию CSS. Это означает, что мы можем создать очень интересные динамические эффекты, не обязательно используя JavaScript. SVG имеет свой собственный DOM API, поэтому на самом деле весь SVG-код можно легко проверить с помощью DevTools, который я настоятельно рекомендую использовать при изучении этой темы.
06. Сделайте немного шума
1980-е и 1990-е годы вернулись! Glitch — эстетика хаоса, шума и заклинивания — становится популярной тенденцией дизайна в этом году. Празднование сбоев, сбоев и ошибок можно увидеть и в Интернете. Если вы хотите играть с перспективой и быть более визуально хаотичным, вы можете сделать это легко, изменив и перекосив элементы вашего сайта.
transform: skew (60deg, -30deg) scaleY (.66667);
07. Созидайте с коллажем
Коллаж-вдохновленные проекты наслаждаются своим моментом в изобразительном искусстве — при исследовании этой статьи работа Розанны Вебстер и Барракуз сразу же украла мое сердце — и даже в Интернете они все больше внимания уделяют. Если у вас есть сомнения, ознакомьтесь с домашней страницей MailChimp (ниже). Вы заметили коллаж?
08. Не забывайте поддержку браузера
Если вы чувствуете себя сдержанным, когда хотите использовать свойства CSS, которые, как вы подозреваете, не поддерживаются всеми браузерами, вам поможет @supports . @supports позволяет проверить поддержку браузера для свойств CSS: пары значений.
Код, который включен в блок @supports будет отображаться только в том случае, если эти условия верны, иначе код не был прочитан браузером. В случае, когда браузер не понимает @supports он также не генерирует данную часть кода.
@supports (mix-blend-mode: overlay) {
.пример {
mix-blend-mode: overlay;
}
}
Комбинируя такие функции, как режимы смешивания, маскировка, обрезка, формы CSS и мощь SVG, дает нам большой набор инструментов для повышения нашего творчества и выхода из нормы.
Хотя некоторые свойства могут по-прежнему испытывать проблемы с совместимостью браузеров, не стесняйтесь играть с ними. Хотя поддержка браузера теперь может быть ограничена, это, вероятно, не будет в будущем. Это всего лишь вопрос времени.
Эта статья изначально была опубликована в net самом популярном в мире журнале для профессиональных веб-дизайнеров. Подпись к сети здесь .
Веб-дизайн возвращается 19-21 сентября 2018 года, предлагая упакованный график ведущих ораторов, полный рабочий день семинаров и полезных сетевых возможностей — не пропустите его. Получите ваш билет на создание .
Статьи по теме:
Загрузка...
