Как предотвратить затемненное перекрытие текста с уменьшенным интервалом между буквами в html/css
Текст при наложении темнеет, как буквы «R» и «А». Я хочу либо быть сверху другого (или любым другим способом предотвратить это).
Мой код
.gradient-text-wrapper {
position: relative;
display: inline-block;
text-transform: uppercase;
font-family: 'Arial', sans-serif;
}
.gradient-text {
font-size: 10rem;
font-weight: bold;
background: linear-gradient(86deg, #FBFF6B 15.27%, #D66A6A 51.02%, #A600F4 99.78%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 0, 0, 0.18);
position: relative;
z-index: 1;
mix-blend-mode: lighten;
letter-spacing: -1.1rem;
}
.centered {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}<div class = "centered">
<div class = "gradient-text-wrapper">
<span class = "gradient-text">Gradient</span>
</div>
</div>Я предполагаю, что затемненные пятна из-за необходимой полупрозрачной текстовой заливки :(. Я использовал этот подход для градиентного текста, потому что сам объект является частью чего-то большего (для получения тени текста у меня есть тот же текст, что и в реальном проекте).
Ответы 5
Чтобы предотвратить эффект затемнения перекрывающихся частей букв, сохраняя при этом градиент и полупрозрачную заливку текста, вы можете использовать комбинацию псевдоэлементов ::before и непрозрачности для достижения более чистого результата. Этот метод предполагает наложение непрозрачной версии текста на полупрозрачную.
Ваш ответ можно улучшить, добавив дополнительную вспомогательную информацию. Пожалуйста, отредактируйте , добавив дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Более подробную информацию о том, как писать хорошие ответы, вы можете найти в справочном центре.
Вы можете, например, использовать mix-blend-mode:screen;. Я также предполагаю, что пробелы между буквами сделаны намеренно...
.gradient-text-wrapper {
position: relative;
display: inline-block;
text-transform: uppercase;
font-family: 'Arial', sans-serif;
}
.gradient-text {
font-size: 10rem;
font-weight: bold;
background: linear-gradient(86deg, #FBFF6B 15.27%, #D66A6A 51.02%, #A600F4 99.78%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 1;
mix-blend-mode: screen;
letter-spacing: -1.1rem;
}
.centered {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}<div class = "centered">
<div class = "gradient-text-wrapper">
<span class = "gradient-text">Gradient</span>
</div>
</div>В зависимости от того, какой браузер вам нужно поддерживать, вы можете использовать Color-mix в градиенте, чтобы смешивать цвета вместо того, чтобы накладывать на них прозрачность.
.gradient-text-wrapper {
position: relative;
display: inline-block;
text-transform: uppercase;
font-family: 'Arial', sans-serif;
}
.gradient-text {
font-size: 10rem;
font-weight: bold;
--color: rgba(255, 0, 0);
--weight: 18%;
background: linear-gradient( 86deg, color-mix(in srgb, var(--color) var(--weight), #FBFF6B) 15.27%, color-mix(in srgb, var(--color) var(--weight), #D66A6A) 51.02%, color-mix(in srgb, var(--color) var(--weight), #A600F4) 99.78%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 1;
mix-blend-mode: lighten;
letter-spacing: -1.1rem;
}
.centered {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}<div class = "centered">
<div class = "gradient-text-wrapper">
<span class = "gradient-text">Gradient</span>
</div>
</div>Вы можете просто использовать mix-blend-mode вместо background-clip. (с тех пор, как Firefox еще не поддерживал фоновый клип:текст)
вот идея с фоновым изображением на html:
.gradient-text-wrapper {
display: inline-block;
text-transform: uppercase;
font-family: "Arial", sans-serif;
background: linear-gradient( 86deg, #fbff6b 15.27%, #d66a6a 51.02%, #a600f4 99.78%);
mix-blend-mode: multiply; /* here picked up to mix with html background, up to your choice */
}
.gradient-text {
display: block;
font-size: clamp(40px, 18vw, 10rem);/* for the demo, make it fully visible inside snippet */
padding-inline: 0 .5em; /* > negative letter-spacing, to increase with text lenght */
font-weight: bold;
background: white;
mix-blend-mode: lighten;
letter-spacing: -.11em; /* for demo keep the ratio */
}
/* demo */
html {
min-height: 100vh;
display: grid;
place-content: center;
background: url(https://picsum.photos/id/46/3264/2448) center / cover;
}<div class = "gradient-text-wrapper">
<span class = "gradient-text">Gradient</span>
</div>Также можно добавить полупрозрачную тень к тексту https://codepen.io/gc-nomade/pen/gONLBjx
Обратите внимание, что метод смешивания цветов, на мой взгляд, здесь наиболее эффективен.
Интересно, почему вы вообще пытаетесь его улучшить? Поскольку сюда приходят случайные парни и минусуют правильные ответы... я дам вам очко за ваши сизифовы усилия...
@ŁukaszD.Mastalerz ради развлечения хотел протестировать этот фильтр: часто выдает ошибки в Firefox... SO также является хорошим местом для отзывов;)
@ŁukaszD.Mastalerz метод смешивания цветов сработал так, как задумано, поскольку мне тоже нужна была полупрозрачная заливка текста!
@SamayJain Ты не совсем понял, что я имел в виду, приятель. Прежде всего я имел в виду, что коллега @G-Cyrillus пытался отредактировать/исправить/улучшить свой пост и единственным человеком, который его за это оценил, был я, и несмотря на его (сизифовы) старания, вы приняли другое (тоже правильное) ) отвечать. Также по непонятным причинам раскритиковали только мой без комментариев, хотя он был первым и правильным. Ко всем трем нашим ответам можно easily добавить полупрозрачность. Но на Meta-SE есть много тем о случайном или злонамеренном отрицательном голосовании, и есть более широкая проблема.
.gradient-text-wrapper {
position: relative;
display: inline-block;
text-transform: uppercase;
font-family: 'Arial', sans-serif;
}
.gradient-text {
font-size: 10rem;
font-weight: bold;
background: linear-gradient(86deg, #FBFF6B 15.27%, #D66A6A 51.02%, #A600F4 99.78%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 1;
letter-spacing: -0.5rem;
}
.centered {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 2;
color: rgba(255, 0, 0, 0.18);
}<div class = "centered">
<div class = "gradient-text-wrapper">
<span class = "gradient-text">Gradient</span>
<span class = "overlay">Gradient</span>
</div>
</div>
Не могли бы вы рассказать об этом подробнее, пожалуйста?