CSS-негативные приемы и детали, о которых вы не знали

внешний интерфейс CSS
CSS-негативные приемы и детали, о которых вы не знали

Причина этого написания - день в группе, сказали ученики под хуй,использовать отрицательныйoutline-offsetРеализован плюсик. Эм? Любопытно, я сразу же попробовал: как использовать отрицательное смещение контура, чтобы реализовать знак плюс?

Используйте отрицательное смещение контура для знака плюс

Предположим, у нас есть такая простая структура:

<div></div>

div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: 10px;
}

offset

Исправлятьoutline-offsetдо подходящего отрицательного значения, тогда граница контура будет иметь отступ до знака плюс, когда это необходимо.

После некоторых проб и ошибок измените приведенный выше divoutline-offsetсоставляет -118px.

div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: -118px;
}

Добавьте анимационный эффект, примерно такой:

offset

Демонстрация CodePen — используйте схему для реализации знака плюс

Интересно, я пробовал много разных ситуаций и, наконец, пришел к простому правилу, есть несколько простых ограничений для использования отрицательного смещения контура для создания знака плюс:

  • Контейнер должен быть квадратным.
  • Ширина самой границы контура не может быть слишком маленькой
  • Диапазон значений отрицательного значения x смещения контура: -(половина ширины контейнера + половина ширины контура)

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

Ниже приведены несколько интересных сценариев использования отрицательных значений CSS.

односторонняя проекция

Сначала поговорим об односторонней проекции, оbox-shadow, в большинстве случаев мы используем его для создания двусторонней или четырехсторонней проекции. следующим образом:

image

Хорошо, а что, если вы хотите создать одностороннюю проекцию?

Давайте посмотрим на определение использования box-shadow:

{
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
}

кbox-shadow: 1px 2px 3px 4px #333Например, значения четырех значений: значение смещения в направлении x, значение смещения в направлении y, радиус размытия и радиус расширения.

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

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

image

CodePen Demo — односторонняя проекция css

Отразить с использованием масштаба (-1)

Как правило, мы хотим реализовать переворот элемента на 180°, мы бы использовалиtransform: rotate(180deg), вот небольшая хитрость, используйтеtransform: scale(-1)Такого же эффекта можно добиться. Посмотреть демо:

<p class="scale">CSS Nagative Scale(-1)</p>

.scale {
    transform: scale(1);
    animation: scale 10s infinite linear;
}

@keyframes scale{
    50% {
        transform: scale(-1);
    }  
    100% {
        transform: scale(-1);
    }
}

Взгляните на эффект:

scale-1

(Первая строка в GIF используетtransform: rotate(180deg)Эффект)

Демонстрация CodePen — используйте масштаб (-1), чтобы перевернуть элементы

Перевернутый текст с использованием отрицательного межбуквенного интервала

Подобно шкале (-1) выше, это отрицательное значение.letter-spacing.

letter-spacingАтрибуты определяют поведение интервалов текста в целом, за исключением ключевых слов.normal, мы также можем указать размер, который представляет интервал между текстом. так:

<p class="letter_spacing">倒序排列文字</p>

.letter_spacing {
    font-size: 36px;
    letter-spacing: 0px;
    animation: move 10s infinite;
}

@keyframes move {
    40% {
        letter-spacing: 36px;
    }
    80% {
        letter-spacing: -72px;
    }
    100% {
        letter-spacing: -72px;
    }
}

мы устанавливаем текстletter-spacingОт 0 -> 36px -> -72px наблюдайте различные изменения:

letter-spacing

CodePen Demo -- Текст с отрицательным интервалом в обратном порядке

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

Используйте отрицательные значения transition-delay и animation-delay для немедленного запуска анимации

Мы знаем, что анимация и переходы CSS имеют свойство задержки, которое задерживает анимацию.

Рассмотрим следующую анимацию:

transition-delay2

Простой код выглядит так:

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


.item {
    transform: rotate(0) translate(-80px, 0) ;
}

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}

.item:nth-child(2) {
    animation: rotate 3s infinite 1s linear;
}

.item:nth-child(3) {
    animation: rotate 3s infinite 2s linear;
}


@keyframes rotate {
    100% {
        transform: rotate(360deg) translate(-80px, 0) ;
    }
}

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

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}

.item:nth-child(2) {
    animation: rotate 3s infinite -1s linear;
}

.item:nth-child(3) {
    animation: rotate 3s infinite -2s linear;
}

Здесь есть небольшая хитрость,установленanimation-dealyНегативная анимация выполняется немедленно, начиная с одного из этапов анимации.. Итак, вначале анимация выглядит так:

transition-delay

Взяв приведенную выше анимацию в качестве примера, анимация определена для выполнения 3 с, еслиanimation-delayДля -1 с начальная точка эквивалентна положению в момент времени 2 с (3-1) при нормальном выполнении.

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

отрицательная маржа

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

До того, как спецификация макета flexbox стала популярной, реализация многострочных макетов равной высоты все еще требовала некоторой работы. Один из способов — использовать положительный отступ и отмену отрицательного поля.

Там расклад такой:

paddingmargin

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

Итак, один из приемов — заполнить левый и правый столбцы большим положительным отступом и таким же отрицательным отступом:

.g-left {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

.g-right {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

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

Конкретный код можно найти здесь:Демонстрация CodePen -- положительное заполнение и отрицательное поле для достижения макета с несколькими столбцами равной высоты

В заключение

Кроме того, есть некоторые известные, которые не указаны отдельно, такие как:

  • Используйте отрицательное поле для горизонтального и вертикального центрирования элементов.
  • Используйте отрицательную рамку, чтобы скрыть лишние границы в начале и конце списка li
  • Используйте отрицательный отступ текста, чтобы скрыть текст
  • Используйте отрицательный z-индекс для участия в сортировке контекста стека

Есть также некоторые очень эзотерические, такие как то, что Чжан Синьсюй поделился на конференции CSS в этом году, используя отрицательную непрозрачность для реализации псевдоусловного суждения в CSS и использование пользовательских свойств CSS для достижения эффекта круговой диаграммы 360 ° с помощью чистого CSS:

наконец

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

Если есть другие лучшие и более понятные реализации, их следует тщательно взвесить при использовании реализации.

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

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

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

Категории