- Оригинальный адрес:New CSS Features That Are Changing Web Design
- Оригинальный автор:Zell
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:sophia
- Корректор:kezhenxu94 hannahGu
Сегодня ландшафт веб-дизайна полностью изменился. У нас есть крутые и мощные инструменты — 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;
}
вы можете пройти вgrid-template-columns
Укажите ширину столбца четыре раза, чтобы создать четыре столбца сетки.
Если вам нужна сетка из 12 столбцов, вам просто нужно повторить100px
12 раз.
.grid {
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
grid-column-gap: 20px;
}
Создайте сетку из 12 столбцов с помощью CSS Grid.
Как видите, этот код нельзя назвать элегантным, но мы (пока) не заботимся об оптимизации качества кода, мы отдаем приоритет аспектам дизайна. CSS Grid позволяет любому, даже дизайнеру, не имеющему знаний в области программирования, легко создавать сетки в Интернете.
Если вы хотите создать столбцы сетки с разной шириной, простоgrid-template-columns
Укажите желаемую ширину в объявлении и готово.
.grid {
display: grid;
grid-template-columns: 100px 162px 262px;
grid-column-gap: 20px;
}
Создание столбцов разной ширины также не составляет труда.
Сделайте сетку отзывчивой
В обсуждении CSS Grid нет ничего, что не обсуждает его отзывчивость. Есть несколько способов сделать CSS Grid адаптивным. Один из способов (вероятно, самый популярный) заключается в использованииfr
Блок. Другой способ — изменить количество столбцов для медиа-запроса.
fr
является гибкой единицей длины, представляющей фрагмент. когда вы используетеfr
блок, браузер разделяет открытое пространство иfr
Множественные числа назначают регионы столбцам. Это значит, что для создания четырех столбцов одинакового размера нужно четыре раза написать1fr
.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 20px;
}
использовать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;
}
Сетка из трех столбцов, созданная с использованием золотого сечения.
Изменить сетку в разных контрольных точках
Если вы хотите, чтобы сетка менялась в другой точке останова, вы можете объявить новую сетку в медиа-запросе.
.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; /* 放在第二列 */
}
Поместите элемент во второй столбец.
Вы даже можете пройтиspan
Ключевое слово сообщает, сколько столбцов должен занимать элемент сетки.
.grid-item {
/* 放在第二列,跨越 2 列 */
grid-column: 2 / span 2;
}
вы можете использовать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,Позволяет тексту обтекать кривые Бейонсе.
Текст может обтекать Бейонсе, если хотите!
Если вы хотите копнуть глубже,Sara Soueidanстатьи могут помочь вамСоздайте непрямоугольный макет.
CSS формы иclip-path
Дает вам бесконечные возможности для создания уникальных пользовательских форм по вашему собственному дизайну. К сожалению, синтаксически формы CSS иclip-path
Не так интуитивно понятен, как CSS Grid. К счастью, у нас естьClippyа такжеРедактор контуров формы Firefoxчтобы помочь нам создать форму, которую мы хотим.
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". Очень рекомендую посмотреть.
Penang Hokkien означает, что китайский текст можно писать сверху вниз и справа налево.
Даже если вы не разрабатываете такой язык, как китайский, это не значит, что вы не можете использовать CSS.writing-mode
Применительно к англ. Еще в 2016 году, когда я создалDevfest.asia, меня осенило, и я решил использоватьwriting-mode
Повернуть текст.
теги используютсяwriting-mode
и преобразование создано.
Лаборатория Джен Симмонстакже содержит множествоwriting-mode
эксперимент из. Очень рекомендую посмотреть и вам.
Изображение из лаборатории Джен Симмон, на котором изображен Ян Чихольд.
Усилия и творческий подход могут заставить вас пойти дальше
Хотя новые CSS-инструменты полезны, вам не обязательно нужен какой-либо из них для создания уникального веб-сайта. Немного изобретательности и немного тяжелой работы могут иметь большое значение.
Например, вSuper Silly Hackathonсередина,CheeaunПоверните весь сайт на -15 градусов, и вы будете выглядеть идиотом, когда читаете сайт.
Если вы хотите попасть на суперглупый хакатон, Чион позаботится о том, чтобы вы выглядели глупо.
Darin SenneffСделано с некоторыми треугольниками и GSAPАнимированный аватар для входа. Посмотрите, какая милая эта обезьяна и как она закрывает глаза, когда курсор мыши находится в поле пароля. Каваи!
когда я для моего классаLearn JavaScriptПри создании страницы продаж я добавил элементы, благодаря которым изучающие JavaScript чувствуют себя как дома.
я используюfunction
синтаксис для создания пакетов курсов вместо записи информации о пакетах курсов в целом.
Суммировать
Уникальный веб-дизайн — это не только дизайн макета, но и то, как дизайн интегрируется с контентом. Приложив немного усилий и творчества, мы все можем создавать уникальные дизайны и рекламировать их, а инструменты, которыми мы располагаем сегодня, облегчают нашу работу.
Вопрос в том, достаточно ли вы заботитесь о создании единственного в своем роде дизайна? Я надеюсь вы.
Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.