TL;DR
- Что может сделать одна строка кода CSS?
- Я покажу вам некоторые потрясающие навыки работы с CSS.
Битва CSS
Во-первых, это напоминает мне сайт CSS Battle, которым я увлекался в начале года. Основной геймплей этого сайта:
Официальный предоставит графику на заданном холсте 400 x 300, чем короче код для ее реализации, тем выше оценка, которую мы можем получить.
Обратите внимание, что нам нужно реализовать его с помощью CSS и точно скопировать.
Среди них очень интересен первый вопрос, смотрите:
Хорошо, подумайте об этом, если бы вам дали такую графику и сказали, что размер HTML равен 400pxx 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 #5d3a3ait можно сжать вbox-shadow:0+0+0+5in#5d3a3aCSS1in=96px, но размер холста всего 400 пикселей, а 5 дюймов больше 400 пикселей. Нет проблем. Он может заполнить весь холст, но400pxна5in2 символа больше, чем .
Посмотрите в браузере, это правильный способ написать:
Хорошо, получилось всего 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заменим на 30degsee:
{
background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}
Конечно, это тоже очень красиво, но не так эффектно, как выше.
CodePen — однострочный шаблон CSSНажмите, чтобы просмотреть
Мы можем повторно использовать CSS — Doodle, чтобы случайным образом сгенерировать эту красоту:
CSS — Doodle Это библиотека на основе веб-компонентов. Позволяет нам быстро создавать страницы на основе макета CSS Grid и предоставляет различные удобные инструкции и функции (случайные, циклические и т. д.), позволяющие получать различные эффекты CSS с помощью набора правил.
Верно, его суть на самом деле является вышеупомянутой строкой основного кода CSS.
CSS Doodle — CSS Magic Conic-градиент
margin: autoиplace-items: center
Это тоже очень интересно, конечно, это не строго строка CSS, потому что ее нужно использовать с другими свойствами.
Какой самый быстрый способ центрировать элемент по горизонтали и вертикали?
Горизонтальное и вертикальное центрирование также является одной из самых распространенных проблем в области CSS. Методы в разных сценариях тоже разные, каждый со своими преимуществами и недостатками. Ну а наиболее удобными следует считать следующие два способа:
Способ 1: макет 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: flexlayout margin autoэффект не только в горизонтальном направлении, но и в вертикальном направлении для автоматического распределения оставшегося пространства.
Если вы делаете margin: auton't , вы можете посмотреть: Исследуя магию автоматических полей в контексте flex
Способ 2: grid layout с place-items: center
Перейдите непосредственно к коду:
.g-container {
display: grid;
place-items: center
}
Приведенные выше два кода имеют одинаковый эффект:
Окончательно
Что ж, в этой статье я представляю анимацию Motion Path и использую ее для достижения некоторых эффектов анимации пути, которые раньше было сложно реализовать. Я надеюсь, что это будет полезно для вас :)
Более интересные технические статьи по CSS собраны в моем Github — iCSS.
