Новые возможности CSS, которые меняют веб-дизайн

1. Как CSS Grid изменил все
2. Создание адаптивных сеток
3. Сетки неравной ширины
4. Изменение сетки в разных точках останова
5. Сетки на основе высоты
6. Размещение элемента сетки
7. Вдохновения
8. Переключение потока текста с помощью CSS-режима письма
9. Усилия и изобретательность идут долгий путь
10. Завершение

Сегодня дизайн ландшафта полностью изменился. Мы оснащены новыми и мощными инструментами - CSS Grid, пользовательскими свойствами CSS, формами CSS и режимом написания CSS, и так далее, - которые мы можем использовать для осуществления нашего творчества. Зелл Лью объясняет как.

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

Это предел того, чего могут достичь наши «творческие» умы? Эта мысль послала неконтролируемую боль грусти в мое сердце.

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

Сегодня дизайн ландшафта полностью изменился. Мы оснащены новыми и мощными инструментами - CSS Grid, пользовательскими свойствами CSS, формами CSS и режимом написания CSS, и так далее, - которые мы можем использовать для осуществления нашего творчества.

Как CSS Grid изменил все

Сетки необходимы для веб-дизайна; Вы уже знали это. Но вы остановились, чтобы спросить себя, как вы спроектировали сетку, которую вы в основном используете?

Большинство из нас этого не сделали. Мы используем сетку из 12 столбцов, которая стала стандартом в нашей отрасли.

• Но почему мы используем одну и ту же сетку?
• Почему сетки сделаны из 12 колонн?
• Почему наши сетки имеют одинаковый размер?

Вот один из возможных ответов на вопрос, почему мы используем одну и ту же сетку: мы не хотим заниматься математикой .

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

Чтобы упростить процесс, мы приняли сеточные каркасы. В начале, такие рамки, как 960gs а также 1440px позволили нам выбирать между 8-, 9-, 12- и даже 16-колонными сетками. Позже, Bootstrap выиграл войну фреймворков. Поскольку Bootstrap допускает только 12 столбцов, и изменение этого было болезненным, мы в конечном итоге остановились на 12 столбцах в качестве стандарта.

Но мы не должны винить Bootstrap. Тогда это был лучший подход. Кто не хотел бы хорошее решение, которое работает с минимальными усилиями? Решив проблему с сеткой, мы обратили наше внимание на другие аспекты дизайна, такие как типографика, цвет и доступность.

Теперь, с появлением CSS Grid, сетки стали намного проще . Нам больше не нужно бояться математики сетки. Стало настолько просто, что я бы сказал, что с помощью CSS создать сетку проще, чем в таком инструменте дизайна, как Sketch!

Зачем?

Допустим, вы хотите создать сетку из 4 столбцов, каждый столбец имеет размер 100 пикселей. С помощью CSS Grid вы можете написать 100px четыре раза в объявлении grid-template-columns, и будет создана сетка из 4 столбцов.

.grid {display: grid; сетка-шаблон-столбцы: 100px 100px 100px 100px; промежуток между столбцами сетки: 20 пикселей; } Вы можете создать четыре столбца сетки, указав ширину столбца четыре раза в grid-template-columns

Если вы хотите сетку из 12 столбцов, вам просто нужно повторить 100px 12 раз.

.grid {display: grid; Сетка-шаблон-столбцы: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; промежуток между столбцами сетки: 20 пикселей; } Создание 12 столбцов с помощью CSS Grid

Да, код не очень красивый, но мы не заинтересованы в оптимизации качества кода (пока) - мы все еще думаем о дизайне. CSS Grid позволяет любому - даже дизайнеру, не обладающему знаниями в области программирования, - создавать сетку в Интернете.

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

.grid {display: grid; сетка-шаблон-столбцы: 100px 162px 262px; промежуток между столбцами сетки: 20 пикселей; } Создавать столбцы разной ширины легко, как пирог.

Создание адаптивных сеток

Ни одно обсуждение CSS Grid не будет полным без разговора об адаптивном аспекте. Есть несколько способов сделать CSS Grid отзывчивым. Один из способов (вероятно, самый популярный) - использовать модуль fr. Другой способ - изменить количество столбцов с медиа-запросами.

fr - гибкая длина, представляющая дробь. Когда вы используете модуль fr, браузеры разделяют открытое пространство и распределяют области по столбцам на основе множителя fr. Это означает, что для создания четырех столбцов одинакового размера вы должны написать 1fr четыре раза.

.grid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; промежуток между столбцами сетки: 20 пикселей; } Сетки, созданные с помощью блока fr, учитывают максимальную ширину сетки. ( Большой предварительный просмотр )

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

Сначала предположим, что общее пространство, доступное для сетки, составляет 1260 пикселей.

Прежде чем выделять ширину для каждого столбца, CSS Grid должен знать, сколько места доступно (или осталось). Здесь он вычитает объявления с зазором из 1260 пикселей. Поскольку каждый разрыв 20px, у нас остается 1200px для доступного пространства. (1260 - (20 * 3) = 1200).

Затем он складывает множители fr. В этом случае мы имеем четыре коэффициента 1fr, поэтому браузеры делят 1200px на четыре. Таким образом, каждый столбец составляет 300 пикселей. Вот почему мы получаем четыре равных столбца.

Однако сетки, созданные с помощью модуля fr, не всегда равны !

Когда вы используете fr, вы должны знать, что каждая единица fr является частью доступного (или оставшегося) пространства.

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

Например, приведенная ниже сетка имеет один большой столбец и три маленьких (но одинаковых) столбца, даже если она создана с помощью grid-template-columns: 1fr 1fr 1fr 1fr.

Увидеть перо CSS Grid `fr` unit demo 1 Зелл Лью ( @zellwk ) на CodePen ,

Увидеть перо CSS Grid fr блок демо 1 Зелл Лью ( @zellwk ) на CodePen ,

После разделения 1200px на четыре и выделения 300px для каждого из столбцов 1fr браузеры понимают, что первый элемент сетки содержит изображение размером 1000px. Поскольку 1000px больше, чем 300px, браузеры вместо этого выбирают 1000px для первого столбца.

Это означает, что нам нужно пересчитать оставшееся пространство.

Новое оставшееся пространство составляет 1260px - 1000px - 20px * 3 = 200px; затем эти 200px делятся на три в зависимости от количества оставшихся фракций. Каждая фракция составляет 66px. Надеюсь, это объясняет, почему единицы fr не всегда создают столбцы одинаковой ширины.

Если вы хотите, чтобы блок fr каждый раз создавал столбцы одинаковой ширины, вам нужно принудительно установить его с помощью minmax (0, 1fr). В этом конкретном примере вы также захотите установить для свойства max-width изображения значение 100%.

Увидеть перо CSS Grid `fr` unit demo 2 Зелл Лью ( @zellwk ) на CodePen ,

Увидеть перо CSS Grid для демо-модуля 2 Зелл Лью ( @zellwk ) на CodePen ,

Примечание : Рэйчел Эндрю написала удивительную статья о том, как различные значения CSS (min-content, max-content, fr и т. д.) влияют на размеры контента. Это стоит прочитать!

Сетки неравной ширины

Чтобы создать сетки с неравной шириной, вы просто меняете множитель. Ниже приведена сетка, которая следует за золотым сечением, где второй столбец в 1.618 раз больше первого столбца, а третий столбец в 1.618 раз больше второго столбца.

.grid {display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; разрыв сетки столбца: 1em; } Трехколонная сетка, созданная с золотым сечением

Изменение сетки в разных точках останова

Если вы хотите изменить сетку в разных точках останова, вы можете объявить новую сетку в медиа-запросе.

.grid {display: grid; grid-template-columns: 1fr 1fr; разрыв сетки столбца: 1em; } @media (min-width: 30em) {.grid {grid-template-columns: 1fr 1fr 1fr 1fr; }}

Разве не легко создавать сетки с помощью CSS Grid? Ранее дизайнеры и разработчики убили бы за такую ​​возможность.

Сетки на основе высоты

Ранее было невозможно создать сетки, основанные на высоте веб-сайта, потому что у нас не было способа определить, насколько высоким было окно просмотра. Теперь, с помощью модулей области просмотра, CSS Calc и CSS Grid, мы можем даже создавать сетки на основе высоты области просмотра.

В демонстрации ниже я создал квадраты сетки, основанные на высоте браузера.

Увидеть перо Пример сетки на основе высоты Зелл Лью ( @zellwk ) на CodePen ,

Увидеть перо Пример сетки на основе высоты Зелл Лью ( @zellwk ) на CodePen ,

У Джен Симмонс есть отличное видео, в котором говорится о на четвертом краю - с помощью CSS Grid. Я настоятельно рекомендую вам посмотреть его.

Размещение элемента сетки

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

Теперь с помощью CSS Grid вы можете размещать элементы сетки непосредственно с помощью CSS без дополнительных вычислений.

.grid-item {grid-column: 2; / * Поставить во второй столбец * /} Размещение элемента во втором столбце.

Вы даже можете указать элементу сетки, сколько столбцов должно занимать ключевое слово span.

.grid-item {/ * Поместить во второй столбец, интервал 2 столбца * / grid-column: 2 / интервал 2; } Вы можете указать элементам сетки количество столбцов (или даже строк), которые они должны занимать, с помощью ключевого слова span

Вдохновения

CSS Grid позволяет вам так легко выкладывать вещи, что вы можете быстро создать множество вариантов одного и того же сайта. Одним из ярких примеров является Личная страница Линн Фишер ,

Если вы хотите узнать больше о возможностях CSS Grid, ознакомьтесь с Лаборатория Джен Симмон , где она исследует, как создавать различные виды макетов с помощью CSS Grid и других инструментов.

Чтобы узнать больше о CSS Grid, ознакомьтесь со следующими ресурсами:

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

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

Например, Айша Ангграини экспериментировал с макетом в стиле комиксов с CSS Grid и клипом.

Увидеть перо Макет в стиле комиксов с помощью CSS Grid Айша Ангграини ( @rrenula ) на CodePen ,

Увидеть перо Макет в стиле комиксов с помощью CSS Grid Айша Ангграини ( @rrenula ) на CodePen ,

Хуэй Цзин объясняет, как использовать формы CSS таким образом, чтобы позволяет тексту течь вдоль кривой Бейонсе.

Текст может обтекать Бейонсе, если вы этого хотите!

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

CSS-формы и пути к клипам дают вам бесконечные возможности для создания пользовательских форм, уникальных для вашего дизайна. К сожалению, с точки зрения синтаксиса, CSS-формы и путь к клипам не так интуитивны, как CSS Grid. К счастью, у нас есть такие инструменты, как Clippy а также Firefox's Shape Path Editor чтобы помочь нам создать формы, которые мы хотим.

Clippy поможет вам легко создавать собственные фигуры с помощью clip-path.

Переключение потока текста с помощью CSS-режима письма

Мы привыкли видеть, как слова текут слева направо в Интернете, потому что сеть в основном создана для англоязычных людей (по крайней мере, так все и началось).

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

Режим письма CSS делает поток текста в направлении, родном для каждого языка. Хуэй Цзин экспериментировал с китайским макетом, который течет сверху вниз и справа налево на веб-сайте под названием Пенанг Хоккиен , Вы можете прочитать больше о ее эксперименте в ее статье « Один о доме ».

Помимо статей, Хуэй Цзин много говорит о типографии и письме: « Когда Восток встречается с Западом: веб-типография и как она может вдохновлять современные макеты ». Я настоятельно рекомендую вам посмотреть это.

Пенанг Хоккиен показывает, что китайский текст может быть написан сверху вниз, справа налево.

Даже если вы не разрабатываете языки, такие как китайский, это не значит, что вы не можете применить режим письма CSS к английскому. Еще в 2016 году, когда я создал Devfest.asia Я согнул маленькую креативную мышцу и решил вращать текст в режиме письма.

Теги были созданы с использованием режима записи и преобразования.

Лаборатория Джен Симмонс содержит много экспериментов с режимом письма тоже. Я настоятельно рекомендую проверить это тоже.

Изображение из лаборатории Джен Симмон, на котором изображен Ян Чичолд

Усилия и изобретательность идут долгий путь

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

Например, в Супер глупый хакатон , Cheeaun поворачивает весь сайт на -15 градусов и заставляет вас выглядеть глупо при чтении сайта.

Cheeaun удостоверяется, что ты выглядишь глупо, если хочешь войти в Super Silly Hackathon.

Дарин Сеннефф сделал анимированный логин с некоторой тригонометрией и GSAP. Посмотрите, как мило обезьяна и как она закрывает глаза, когда вы сосредоточены на поле пароля. Как и в интерактивной форме входа, есть интерактивный калькулятор это помогает оценить количество потерянных доходов при использовании внешних сервисов, таких как JustEat!

Когда я создал страницу продаж для моего курса, Учить JavaScript Я добавил элементы, которые позволяют ученику чувствовать себя как дома.

Я использовал синтаксис функции для создания пакетов курсов вместо того, чтобы писать о пакетах курсов

Завершение

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

Вопрос в том, достаточно ли вы заботитесь о создании уникального дизайна? Я надеюсь, что вы делаете.