Как бы вы достигли такого эффекта в чистом CSS?Текстовый эффект CSS нокаутом + текст-тень на фоновом изображении
Я легко нашел RESSOURCES создать Нокаут текстовый эффект, но проблема здесь состоит в объединении классический нокаутирующий эффект текста like this с внутренней тени текста и прозрачность, чтобы фоновое изображение видимым.
Разрешены экспериментальные правила. SVG тоже, но я бы предпочел CSS :)
Начиная от Hunter Turner ответ, это можно улучшить с CSS Blend Mode. Таким образом, фоновое изображение контейнера может быть смешано с текстом, в результате чего вы хотите сделать. Однако, запомните это hasn't broad support yet.
html, body {
margin: 0;
padding: 0;
}
.container {
width: 400px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background: url('http://www.designbolts.com/wp-content/uploads/2013/02/Free-Seamless-Wood-Textures-Patterns-For-3D-Mapping-2.jpg');
background-size: contain;
}
.container p {
font-weight: bold;
font-size: 60px;
font-family: Helvetica, Arial, sans-serif;
color: rgba(255, 255, 255, .45);
text-shadow: 4px 4px 6px #fff, 0 0 0 #000, 4px 4px 6px #fff;
mix-blend-mode: multiply;
}<div class="container">
<p>Hello World</p>
</div>Это потрясающе. Почему раньше я не думал о режимах смешивания :) Спасибо. –
Отличный ответ! Не знал о смешанном режиме: D –
Вы можете достичь этого, используя rgba() для цвета, в сочетании с text-shadow.
CSS
color: rgba(255,0,0, 0.4);
text-shadow: 4px 4px 6px red, 0 0 0 #000, 4px 4px 6px red;
Пример
html,body {
margin: 0;
padding: 0;
}
.container {
background-color: red;
width: 400px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.container p {
font-weight: bold;
font-size: 60px;
font-family: Helvetica, Arial, sans-serif;
color: rgba(255,0,0, 0.4);
text-shadow: 4px 4px 6px red, 0 0 0 #000, 4px 4px 6px red;
}<div class="container">
<p>Hello World</p>
</div>Спасибо! Это то, чего я и добился до сих пор, но проблема в том, что мне нужен нечеткий фон за текстом. –
Да, это проблема. Ваш фон кажется почти одним цветом. Возможно, вы можете сделать что-то [подобное] (https://jsfiddle.net/ndebq1c9/) и поместить фон так, чтобы текст находился над самой нейтральной частью. Я знаю, что это не идеально, но, как я уже сказал, я думаю, что это может быть лучше всего с CSS, но я продолжу искать лучшее решение. –
Да, я также попытался поместить тот же фон в текст с помощью «background-clip», но это невозможно комбинировать с «text-shadow». К сожалению, это не представляется возможным с чистым CSS :) –
Возможный дубликат [Могу ли я сделать цепную из/Punch-Through прозрачность с шрифтами CSS?] (Http://stackoverflow.com/questions/2289159/can-i-do -knock-out-punch-through-transparent-with-css-fonts) – LGSon
Спасибо, ребята. Я обновил свой пост. Я хотел бы объединить текстовый эффект нокаута с текстовой тенью. Я не думаю, что это дубликат. –
О, я попробовал много возможностей и провел много исследований в Google и CodePen. –