[Перевод] Новая функция CSS меняет веб-дизайн

Программа перевода самородков CSS
[Перевод] Новая функция CSS меняет веб-дизайн

Сегодня ландшафт веб-дизайна полностью изменился. У нас есть крутые и мощные инструменты — CSS Grid/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 вы можетеgrid-template-columnsчетыре раза в заявлении100px, то будет создана сетка из 4 столбцов.

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-column-gap: 20px;
}

Screenshot of Firefox's grid inspector that shows four columns.

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

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

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
  grid-column-gap: 20px;
}

Screenshot of Firefox's grid inspector that shows twelve columns.

Создайте сетку из 12 столбцов с помощью CSS Grid.

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

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

.grid {
  display: grid;
  grid-template-columns: 100px 162px 262px;
  grid-column-gap: 20px;
}

Screenshot of Firefox's grid inspector that shows three colums of different width.

Создание столбцов разной ширины также не составляет труда.

Сделайте сетку отзывчивой

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

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

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
}

GIF shows four columns created with the fr unit. These columns resize according to the available white space

использоватьfrСетка, созданная устройством, соответствует максимальной ширине сетки. (Предварительный просмотр большого изображения)

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

Во-первых, мы предполагаем, что общее доступное пространство сетки равно1260px.

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

Далее будетfrУчитывайте кратность. В этом примере у нас есть четыре1frнесколько, так что браузер будет1200pxРазделить на четыре. Каждый столбец имеет размер 300 пикселей. Вот почему мы получаем четыре равных столбца.

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

когда вы используетеfrкогда нужно знать каждыйfrЕдиница — это небольшая часть доступного (или оставшегося) пространства.

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

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

видетьCodePenОн Зелл Лью (@zellwk)изCSS Grid fr unit demo 1.

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

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

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

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

видетьCodePenОн Зелл Лью (@zellwk)изCSS Grid fr unit demo 2

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

Широкая сетка

Вы можете создавать сетки разной ширины, просто изменяя множители fr. Ниже приведена сетка, соответствующая золотому сечению, где второй столбец в 1,618 раз больше первого, а третий в 1,618 раза больше второго.

.grid {
  display: grid;
  grid-template-columns: 1fr 1.618fr 2.618fr;
  grid-column-gap: 1em;
}

GIF shows a three-column grid created with the golden ratio. When the browser is resized, the columns resize accordingly.

Сетка из трех столбцов, созданная с использованием золотого сечения.

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

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

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
}

@media (min-width: 30em) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

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

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

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

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

видетьCodePenОн Зелл Лью (@zellwk)изHeight based grid example.

У Джен Симмонс есть отличное видео очетырехмерный дизайн пространства- Используйте сетку CSS. Я настоятельно рекомендую вам проверить это.

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

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

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

.grid-item {
  grid-column: 2; /* 放在第二列 */
}

Screenshot of a grid item placed on the second column

Поместите элемент во второй столбец.

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

.grid-item {
  /* 放在第二列,跨越 2 列 */
  grid-column: 2 / span 2;
}

Screenshot of a grid item that's placed on the second column. It spans two columns

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

открытие

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

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

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

  • Master CSS Grid, Рэйчел Эндрю и Джен Симмонс видеоурок
  • Layout Land, Джен Симмонс Серия видеороликов о верстке
  • CSS layout workshop, Рэйчел Эндрю Курс макета CSS
  • Learn CSS Grid, Джонатан Су Бесплатный курс по CSS Grid
  • Grid critters, Дэйв Геддес Интересный способ изучить CSS Grid

Дизайн с нестандартными формами

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

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

Например,Aysha AnggrainiПопробуйте использовать CSS Grid иclip pathСоздайте макет в стиле комиксов.

<div class="wrapper">
  <div class="news-item hero-item">
  </div>
  <div class="news-item standard-item">
  </div>
  <div class="news-item standard-item">
  </div>
  <div class="news-item standard-item">
  </div>
</div>
.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  max-width: 1440px;
  font-size: 0;
}

.hero-item,
.standard-item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.news-item {
  display: inline-block;
  min-height: 400px;
  width: 50%;
}

.hero-item {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/divinity-ori-sin.jpg');
}

.standard-item:nth-child(2) {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/re7-chris-large.jpg");
}

.standard-item:nth-child(3) {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/bioshock-large.jpg");
}

.standard-item:nth-child(4) {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/dishonored-large.jpg");
}

@supports (display: grid) {
  .news-item {
    width: auto;
    min-height: 0;
  }
  
  .hero-item {
    grid-column: 1 / span 2;
    grid-row: 1 / 50;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
  }

  .standard-item:nth-child(2) {
    grid-column: 1 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    margin-top: -73px;
  }

  .standard-item:nth-child(3) {
    grid-column: 2 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    margin-top: -73px;
    margin-left: -15%;
    margin-bottom: 18px;
  }

  .standard-item:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 100 / 150;
    -webkit-clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    margin-top: -107px;
  }
}

видетьCodePenНа Айше Анггрэйни (@rrenula)изComic-book-style layout with CSS Grid.

Hui Jingобъясняет, как использовать фигуры CSS,Позволяет тексту обтекать кривые Бейонсе.

An image of Huijing's article, where text flows around Beyoncé.

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

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

CSS формы иclip-pathДает вам бесконечные возможности для создания уникальных пользовательских форм по вашему собственному дизайну. К сожалению, синтаксически формы CSS иclip-pathНе так интуитивно понятен, как CSS Grid. К счастью, у нас естьClippyа такжеРедактор контуров формы Firefoxчтобы помочь нам создать форму, которую мы хотим.

Image of Clippy, a tool to help you create custom CSS shapes

Clippy поможет вам использоватьclip-pathЛегко создавайте пользовательские формы.

с помощью CSSwriting-modeпереключить поток текста

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

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

CSSwriting-modeТекст можно заставить течь в направлении, характерном для каждого языка. Хуэй Цзин экспериментировал с китайской раскладкой.Penang HokkienСайт движется сверху вниз и справа налево. Вы можете найти это в ее статье "The One About HomeПодробнее о ее экспериментах читайте в .

Помимо статей, Хуэй Цзин работает в типографике иwriting-modeвыступил с прекрасной речью».When East Meets West: Web Typography and How It Can Inspire Modern Layouts". Очень рекомендую посмотреть.

An image of the Penang Hokken, showcasing text that reads from top to bottom and right to left.

Penang Hokkien означает, что китайский текст можно писать сверху вниз и справа налево.

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

An image that shows how I rotated text in a design I created for Devfest.asia

теги используютсяwriting-modeи преобразование создано.

Лаборатория Джен Симмонстакже содержит множествоwriting-modeэксперимент из. Очень рекомендую посмотреть и вам.

An image from Jen Simmon's lab that shows a design from Jan Tschichold.

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

Усилия и творческий подход могут заставить вас пойти дальше

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

Например, вSuper Silly Hackathonсередина,CheeaunПоверните весь сайт на -15 градусов, и вы будете выглядеть идиотом, когда читаете сайт.

A screenshot from Super Silly Hackthon, with text slightly rotated to the left

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

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

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

Image where I used JavaScript elements in the design for Learn JavaScript.

я используюfunctionсинтаксис для создания пакетов курсов вместо записи информации о пакетах курсов в целом.

Суммировать

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

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

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.


Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.