Анимированное зачеркивание текста CSS с несколькими цветами текста
Я имею в виду этот ответ. Что делать, если необходимо зачеркнуть несколько цветов?
span {
background:
linear-gradient(red 0 0) no-repeat
0 60% / var(--s,0%) .1em,
#000;
-webkit-background-clip: border-box, text;
background-clip: border-box, text;
color: #0000;
transition: background-size .4s ease;
font-size: 1.5em;
}
span:hover {
--s: 100%;
}<span>
<a href = "#">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</a> At vero eos et accusam et justo duo dolores et ea rebum.
</span>Вы имеете в виду, что хотите, чтобы цвет зачеркивания был таким же, как основной цвет текста?
@Leothelion Нет. Из-за ссылки внутри диапазона текст имеет два цвета: один для ссылки и один для обычного текста. Красная линия находится позади текста ссылки, а не перед ним.
@AHaworth Нет. Из-за ссылки внутри диапазона текст имеет два цвета: один для ссылки и один для обычного текста. Красная линия находится позади текста ссылки, а не перед ним.
вам также нужно сделать цвет ссылки прозрачным, по умолчанию это не так
@TemaniAfif Но тогда текст ссылки имеет тот же цвет, что и обычный текст. Плюс подчеркивание ссылки потерялось.
Так заключается ли вопрос просто в том, как поставить зачеркивание перед всем текстом? Я не вижу, чтобы это имело какое-либо отношение к цвету (кроме того, что красный находится за синим, чего вы бы не заметили, если бы они оба были черными).
@AHaworth Да, речь именно об этом.
@ThreeYearOld, ты хочешь это jsfiddle.net/dqn2smyx
@Leothelion Нет. Что заставляет тебя так думать? Я просто хочу, чтобы красная линия появлялась перед текстом ссылки и обычным текстом, а не позади него. Цвет текста ссылки по-прежнему должен отличаться от цвета обычного текста.
@ThreeYearOld, ты хочешь, чтобы перед текстом была красная линия? проверьте это, пожалуйста jsfiddle.net/ky1Lagv5
@TemaniAfif Будем очень признательны за вашу помощь.
@ThreeYearOld, вы приняли ответ - он делает все, что вы хотите? (Я думал, вы хотите, чтобы текст привязки был, например, синим).
@AHaworth На самом деле да. Но я бы предпочёл решение без z-index.
@AHaworth, я должен исправить себя. Это не работает так, как хотелось бы, потому что z-index означает, что ссылка больше не активна.
@TemaniAfif Есть ли шанс, что ты раскроешь решение?
@ThreeYearOld Я понимаю, что вам нужно, чтобы ссылка по-прежнему была доступна для кликов, но требуется ли также, чтобы она сохраняла свой первоначальный цвет (синий в данном случае для «стандартных» ссылок)?
@AHaworth Да, знаю.
Ответы 5
Как и после обсуждения в поле для комментариев, вот решение.
Просто используйте position:relative в тексте и поставьте z-index:-999, чтобы ваш текст оказался за красной линией (зачеркнутой).
Рабочий пример:
span {
background:
linear-gradient(to bottom, red 0 0) no-repeat
0 60% / var(--s,0%) .1em,
#000;
-webkit-background-clip: border-box, text;
background-clip: border-box, text;
color: #0000;
transition: background-size .4s ease;
font-size: 1.5em;
}
span:hover {
--s: 100%;
}
a{
position:relative;
z-index:-999;
}<span>
<a href = "#">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</a> At vero eos et accusam et justo duo dolores et ea rebum.
</span>Надеюсь, это вам поможет.
Спасибо! Есть ли вообще решение без гадости z-index? Ключевое слово: доступность.
Но это, кажется, избавляет от цвета якорного элемента, что, как я думал, было трудностью.
@AHaworth, извини, но ты не понял? Вы тоже хотите удалить цвет тега? или что?
С z-index:-999 ссылка больше не кликабельна.
Извините, но вижу, что вам тоже нужна анимация. Работаю над этим.
@Leothelion Ты нашел решение?
@ThreeYearOld извини, приятель был занят какой-то работой. сегодня проверю и сообщу.
@Leothelion Что-нибудь новое?
@ThreeYearOld извини, но нет... много перепробовал, но так и не смог добиться этой работы. я не думаю, что это возможно с помощью CSS.
@Leothelion Жалко, но в любом случае спасибо за твои усилия.
@ThreeYearOld теперь вы можете проверить лучшие ответы на свой вопрос. Спасибо сообществу SO.
Ты за этим стоишь? :)
@ThreeYearOld да. Я назначил награду в 100 баллов, чтобы привлечь больше внимания к этой проблеме, и тогда мы получили хорошие ответы. Надеюсь, это поможет. :)
Большое спасибо! :) Разве вы не предпочитаете принятый ответ или этот вместо тот?
@ThreeYearOld извините, но теперь я не могу измениться и назначил награду, потому что благодаря этому ответу мы можем использовать как одиночный, так и многоцветный цвет, который вы упомянули в комментарии, который может вам понравиться.
Ой. Я не принял это во внимание. Но что вы подразумеваете под «многоцветием»?
@ThreeYearOld «Что, если нужно зачеркнуть более одного цвета?» это было написано в вашем вопросе, поэтому я подумал, что вам нужен многоцветный, но хорошо, в этом ответе вы можете выбрать один или несколько цветов.
Да, например обычный цвет текста и цвет ссылки. Но это работает в принятом ответе!? «но хорошо, в этом ответе вы можете выбрать один или несколько цветов» - Какой ответ и какой выбор вы имеете в виду?
@ThreeYearOld ответ, за который я дал 100 наград, вы можете получить многоцветную ссылку или, если вы удалите этот многоцветный CSS, то обычный красный цвет. Так что этот ответ идеален для обоих цветов. :)
Вы имеете в виду многоцветное зачеркивание текста под «многоцветной ссылкой»? К своему стыду, должен признаться, что, сколько себя помню, я даже не заметил этой особенности. Это довольно причудливо.
В этом решении я удвоил текст, чтобы цветная ссылка могла находиться под span, а кликабельный клон отображался прозрачно поверх нее. Таким образом, вы видите цветную ссылку под цветной перечеркнутой линией, но вы все равно можете нажать на нее.
div {
font: bold 2em serif;
width:98%;
}
div.over {
position: absolute;
}
div.over span {
background:
linear-gradient(90deg, red, yellow, green, blue, magenta) no-repeat
0 60% / var(--s,0%) .1em,
transparent;
transition: background-size .4s ease;
}
div.over span:hover {
--s: 100%;
}
div.under {
position: relative;
z-index: -1;
}
div.over :is(span, span *) {
color:transparent;
}<div class = "over"><span>
<a href = "#">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</a> At vero eos et accusam et justo duo dolores et ea rebum.
</span></div>
<div class = "under"><span>
<a href = "#">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</a> At vero eos et accusam et justo duo dolores et ea rebum.
</span></div>Это стало возможным благодаря содержанию элементов <div> с использованием различных значений z-index. Это позволяет нам размещать элементы выше или ниже других. По умолчанию все установлено на ноль, поэтому я поместил цветную ссылку ниже нуля и оставил кликабельную ссылку на глубине по умолчанию. z-index требует position:relative (оставлять вещи там, где они есть) или position:absolute (сделать элемент независимым от его родителей, визуализировать вещи вокруг него так, как будто они не существуют). Не имеет значения, что я выбрал копию «над» как абсолютную, а копию «под» как относительную, но первая должна быть абсолютной (чтобы не влиять на поток), а вторая должна быть относительной (чтобы сохранить поток). правильный).
Есть небольшая странность, в которой абсолютный <div> не оборачивается одинаково, но я решил эту проблему, заставив их обоих сделать это width:98%. Статическое значение было бы более надежным.
Сначала я неправильно истолковал ваш запрос как желание получить радугу цветов для эффекта зачеркивания, который так же прост, как изменение параметров в функции linear-gradient(). Это красиво, поэтому я сохранил это. Вы можете отменить его, вернувшись к linear-gradient(red 0 0).
Вы также заметите, что я удалил кучу ненужных CSS-подсказок (цвет и фоновый клип). Если это сломает вещи, верните их обратно. Наконец, я увеличил шрифт, сделав его крупнее и жирнее, чтобы вы могли более четко видеть, что находится поверх чего.
Большое спасибо за ваше время и помощь, но возникла проблема со ссылкой. Если текст после At vero находится в одной строке, то кликабельна вся строка, тогда как кликабельной должна быть только ссылка. Мне нужна только ссылка на кликабельную, но все равно спасибо. :)
извините, но я не поставил отрицательный голос. не уверен, почему кто-то это сделал.
Хорошо, я решил проблему с блокировкой. Ссылка теперь имеет правильную область действия.
До сих пор ваш ответ - это то, что я ищу и могу понять, так что спасибо, приятель.
Спасибо и за это решение. Но я предпочитаю твой другой. Дублирование текста — это не так уж и удобно.
Да, я тоже предпочитаю другой мой ответ. Это был мой первый проход, и он позволяет делать другие изящные вещи, поскольку имеет несколько слоев и хорошо показывает, как работают слои, но не самый лучший. Что касается дублирования, это может быть выполнено вашей CMS или JS (что все еще неоптимально).
Этот фрагмент использует currentcolor для окраски фона и text-fill-color для установки прозрачности, а также применяет фон к дочерним элементам.
Однако это не идеальный ответ, поскольку кажется, что text-decoration-color не принимает текущий цвет, если текст залит другим цветом, поэтому подчеркивание теряется. Здесь он восстановлен, получив определенный цвет.
span {
font-size: 1.5em;
}
span, span *{
text-decoration-color: purple;
/* text-decoration-color: currentcolor;
that use of currentcolor doesn’t work
at least on IOS 16… Safari for me */
background:
linear-gradient(red 0 0) no-repeat
0 60% / var(--s,0%) .1em,
currentcolor;
-webkit-background-clip: border-box, text;
background-clip: border-box, text;
-webkit-text-fill-color: #0000;
text-fill-color: #0000;
transition: background-size .4s ease;
}
span:hover {
--s: 100%;
}<span>
<a href = "#">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</a> At vero eos et accusam et justo duo dolores et ea rebum.
</span>Это также продублирует фон и зачеркивание. Чтобы это заметить, используйте медленный переход: jsfiddle.net/zuL2agcj
Обновите свой код, как показано ниже:
span.strike {
background:
linear-gradient(red 0 0) no-repeat
0 60% / var(--s, 0%) .2em;
transition: background-size .4s ease;
font-size: 1.5em;
isolation: isolate; /* create a stacking context */
pointer-events: none; /* disable mouse events */
}
span * {
pointer-events: initial; /* re-enable mouse event on child elements */
position: relative;
z-index: -1; /* put link behind strikethrough */
}
span:hover {
--s: 100%;
}<span class = "strike">
<a href = "#">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</a> <span>At vero eos et accusam et justo duo dolores et ea rebum.</span>
</span>спасибо за ваш ответ, но не могли бы вы рассказать немного подробнее, что именно помогло решить проблему? Как будто я не знаю о событиях указателя или изоляции, поэтому будет здорово, если вы добавите немного деталей. Спасибо
есть ли шанс получить подробную информацию о вашем ответе?
@Leothelion События указателя , события указателя , изоляция , Контекст стека.
Не так уж много изменений необходимо. Просто замените резервный цвет фона #000 на текущий цвет и добавьте запись -webkit-text-fill-color вместо color.
Хотя color меняет весь текст, -webkit-text-fill-color влияет только на те части, которые перекрывают то, что было обрезано с помощью фонового клипа (зачеркнутая линия). Я предпочитаю transparent#0000, но технически они идентичны (#0000 — черный, но с нулевой непрозрачностью, прозрачный, как и #fff0).
span, span * {
background:
linear-gradient(red 0 0) no-repeat
0 60% / var(--s,0%) .1em,
currentcolor;
background-clip: border-box, text;
-webkit-text-fill-color: transparent;
transition: background-size .4s ease;
font: bold 1.5rem serif;
}
span:hover {
--s: 100%;
}<span>
<a href = "#">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</a> At vero eos et accusam et justo duo dolores et ea rebum.
</span>Я выделил текст жирным шрифтом, чтобы вы могли более четко видеть, что зачеркнутая линия отображается поверх текста. Я изменил единицы измерения, чтобы они не были такими относительными; span, span * { font-size:1.5em } будет означать, что дети вдвое больше контейнера. 1.5rem вместо этого относится к корню документа.
(Вы можете заметить, что я удалил -webkit-background-clip и не включил text-fill-color или -moz-text-fill-color. Это потому, что background-clip теперь полностью поддерживается без префикса поставщика, а text-fill-color не является (пока?) предложением; он поддерживается только с поставщиком -webkit. префикс, даже в Firefox.)
Большое спасибо за это решение, а также за подробное объяснение. :)
Что вы подразумеваете под словом «больше цвета»? значит вместо красного нужен другой цвет для зачеркивания?