Общие текстовые эффекты

?> Основные сведения: text-shadow, filter

<script v-pre type="text/x-template" id="text-effects">

<style> main { width: 100%; font: 180%/1.5 Baskerville, Palatino, serif; } main > div { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } main > div > h5 { width: 229px; } main > div > p { padding: 18px 28px; text-align: justify; hyphens: auto; } main > div:nth-of-type(1) > p { background: hsl(40, 28.57%, 58.82%); color: hsl(40, 28.57%, 28.82%); text-shadow: 0 0.03em 0.03em hsla(0, 0%, 100%, 0.8); } main > div:nth-of-type(2) > p { background: hsl(40, 28.57%, 28.82%); color: hsl(40, 28.57%, 58.82%); text-shadow: 0 0.03em 0.03em black; } main > div:nth-of-type(3) > p { background: #b4a078; color: white; /* text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; */ text-shadow: 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%); } main > div:nth-of-type(4) > p { background: #b4a078; color: white; } main > div:nth-of-type(4) > p text { fill: currentColor; } main > div:nth-of-type(4) > p svg { overflow: visible; } main > div:nth-of-type(4) > p use { stroke: hsl(40, 28.57%, 28.82%); stroke-width: 3; stroke-linejoin: round; } main > div:nth-of-type(5) > p, main > div:nth-of-type(6) > p, main > div:nth-of-type(7) > p { background: hsl(40, 28.57%, 28.82%); } main > div:nth-of-type(5) > p a, main > div:nth-of-type(6) > p a, main > div:nth-of-type(7) > p a { background: hsl(40, 28.57%, 28.82%); color: white; transition: 0.5s; font-weight: 500; text-shadow: 0 0 0.1em, 0 0 0.3em; } main > div:nth-of-type(5) > p a:hover { animation: 0.8s text-blink-effect infinite alternate; } main > div:nth-of-type(6) > p a:hover { color: transparent; text-shadow: 0 0 0.1em white, 0 0 0.3em white; } main > div:nth-of-type(7) > p a:hover { filter: blur(2px); } main > div:nth-of-type(8) > p {```markdown <style> .main p { font-size: 2rem; color: white; text-shadow: 3px 3px hsl(40, 28.57%, 28.82%), 4px 4px hsl(40, 28.57%, 28.82%); } @keyframes text-blink-effect { 50% { text-shadow: 0 0 .1em, 0 0 .3em; } to { text-shadow: 0 0 .1em; } } </style> <script> </script> </script> ```! > Эффект размытия, реализованный с помощью `text-shadow`, не может плавно удаляться ```### Поддержка браузерами <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gradients&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>