Магия одной строки кода CSS

внешний интерфейс CSS
Магия одной строки кода CSS

Я видел интересное обсуждение на Zhihu раньшеЧто может сделать одна строка кода?

Итак, может ли одна строка кода CSS что-то сделать?

CSS Battle

Прежде всего, это напоминает мне сайт, от которого я был зависим в начале года.CSS Battle. Основной геймплей этого сайта:

Официальный представитель дает графику на данном холсте размером 400 x 300, чем короче код может быть использован для его достижения, тем выше оценка.

Обратите внимание, что точно такое же восстановление.

в,Первый вопросОчень интересно, посмотрите на заголовок:

Ну, подумайте об этом, если бы вам дали такой график, говорящий вам, что размер HTML был бы400px x 300pxцвета, используемые на картинке,#5D3A3A, #B5E0BA, как бы вы реализовали это с помощью CSS?

Из-за требования, чем меньше символов, тем выше оценка.Конечно, выбрана метка с меньшим количеством символов, не так ли:

<p>
<style>
body{background:#5D3A3A;}
p {width: 200px;height:200px;background:#B5E0BA;}
</style>

Настройки для этого веб-сайта, HTML и CSS могут быть записаны вместе в указанном выше формате,<style>Внутри тега находится CSS, снаружи — HTML, тег<p></p>можно сократить как<p>

Ну, конечно, это работает, но посмотрите на заголовок статьи, строку CSS? Это явно не так, и здесь более 100 символов. Мы должны сократить количество символов.

Хмммм, подумал о тени, попробуй ее использоватьbox-shadow:

<a>
<style>
a {
    box-shadow:0 0 0 200px #b5e0ba,0 0 0 400px #5d3a3a;
}
</style>

С помощью двух слоев штриховки отлично реализована графика легенды, а количество символов сжато до 82. Конечно, это не крайность, мы можем полностью встроить CSS и уменьшить количество символов:

<a style="box-shadow:0 0 0 200px #b5e0ba,0 0 0 400px #5d3a3a">

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

<a style=box-shadow:0+0+0+200px#b5e0ba,0+0+0+5in#5d3a3a>

Вот несколько советов, атрибуты поддержки HTML5 не заключаются в кавычки и, например,box-shadow: 0 0 0 400px #5d3a3aможно сжать доbox-shadow:0+0+0+5in#5d3a3a, CSS In1in=96px, но холст только 400px, 5in больше 400 пикселей, нет проблем, он может заполнить холст, но400pxотносительно5inеще 2 персонажа.

Посмотрите в браузере, это правильный способ написать:

Хорошо, получилось всего 56 символов, отлично. Конечно, в CSS Battle возникают все более и более сложные задачи, и многие из них можно решить с помощью одной строки кода, так что попробуйте, если вам интересно.

Одна строка фонового кода

Когда дело доходит до самых интересных свойств CSS, я думаю, что background обязательно получит много голосов. Фон делится на:

  • сплошной цвет
  • Линейный градиент (linear-gradient)
  • Радиальный градиент (radial-gradient)
  • Угловой градиент (conic-gradient)
  • Несколько линейных градиентов (repeating-linear-gradient)
  • Несколько радиальных градиентов (repeating-radial-gradient)
  • Многоугольный градиент (repeating-conic-gradient)

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

Но сегодня давайте посмотрим, что можно сделать с помощью одной строки кода фона CSS. Эм? Главный герой здесь — многоугольный градиент (repeating-conic-gradient), всего одной строкой кода CSS:

{
    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}

Что за чертовщина? Подумайте, как будет выглядеть график, нарисованный этой строкой кода? посмотри:

Вау, невероятно. здесь0.1degОчень критично, чем меньше тут угол (лучше меньше 1град), тем круче графика.

мы кладем0.1degзаменить30degпосмотри:

{
    background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

Конечно, это тоже очень красиво, но не так эффектно, как выше.

CodePen -- One Line CSS Pattern

мы можем повторно использоватьCSS - Doodle, который случайным образом генерирует эту красоту:

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

Верно, его суть на самом деле является вышеупомянутой строкой основного кода CSS.

CSS Doodle - CSS Magic Conic-gradient

margin: autoа такжеplace-items: center

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

Какой самый быстрый способ центрировать элемент по горизонтали и вертикали?

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

метод первый:flexпод макетmargin: auto 

<div class="g-container">
    <div class="g-box"></div>
</div>

.g-container {
    display: flex;
}

.g-box {
    margin: auto;
}

надdisplay: flexзаменитьdisplay: inline-flex | grid | inline-gridэто тоже хорошо.

существуетdisplay: flexмакет,margin autoЭффект не только в горизонтальном направлении, но и в вертикальном направлении, чтобы автоматически выделить это оставшееся пространство.

Демонстрация CodePen — использование автоматического поля для центрирования элементов по горизонтали и вертикали

если ты очень полезенmargin: autoЕсли вы мало что знаете об этом, вы можете проверить это:Изучение магии автоматических полей во гибких контекстах

Способ второй:gridпод макетplace-items: center

Перейдите непосредственно к коду:

.g-container {
    display: grid;
    place-items: center
}

Оба приведенных выше кода имеют одинаковый эффект:

Демонстрация CodePen -- Центрирование элементов по горизонтали и вертикали grid+ place-items: center

наконец

Что может сделать одна строка CSS? Определенно больше, чем это, конечно, не в этом ли удовольствие от CSS. Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Ну вот и конец этой статьи, надеюсь она вам поможет :)

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

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

Категории