Огненный текст (без анимации) на SVG
Очень крутой и стильный эффект для текста. Создаётся впечатление, что весь он в огне! Всё выполнено на SVG
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.text { white-space: nowrap; -webkit-filter: url(#filter); filter: url(#filter); outline: none; color: #000; font-size: 200px; font-weight: bold; } .text::-moz-selection { background: rgba(0, 0, 0, 0.15); } .text::selection { background: rgba(0, 0, 0, 0.15); } .svg { position: absolute; width: 0; height: 0; } |
2#: В то место, где должен быть огненный текст, вставляйте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<svg class="svg"> <filter id="filter" x="-20%" y="-20%" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feGaussianBlur stdDeviation="0 10" x="0%" y="0%" width="1ЯЯ0%" height="10%" in="SourceGraphic" edgeMode="none" result="blur"/> <feTurbulence type="turbulence" baseFrequency="0.06 0.015" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence1"/> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 5 -1" x="0%" y="0%" width="100%" height="100%" in="turbulence1" result="colormatrix2"/> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 3 0" x="0%" y="0%" width="100%" height="100%" in="turbulence1" result="colormatrix3"/> <feComposite in="colormatrix2" in2="blur" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite1"/> <feFlood flood-color="#ff853a" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="flood1"/> <feComposite in="flood1" in2="composite1" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite2"/> <feOffset dx="-5" dy="-20" x="0%" y="0%" width="100%" height="100%" in="composite2" result="offset1"/> <feMorphology operator="dilate" radius="0 10" x="0%" y="0%" width="100%" height="100%" in="offset1" result="morphology"/> <feDisplacementMap in="morphology" in2="turbulence1" scale="10" xChannelSelector="G" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap1"/> <feComposite in="merge3" in2="colormatrix3" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite3"/> <feFlood flood-color="#ff8422" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="flood2"/> <feComposite in="flood2" in2="composite3" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite4"/> <feMerge x="0%" y="0%" width="100%" height="100%" result="merge3"> <feMergeNode in="displacementMap1"/> <feMergeNode in="SourceGraphic"/> <feMergeNode in="composite4"/> </feMerge> </filter> </svg> <div class="text" contenteditable spellcheck="false">ОГОНЬ</div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Кажется в firefox не работает 🙁 https://pp.userapi.com/c848616/v848616688/e289c/q3OCQIfsKwA.jpg
Хм, не удалось загрузить 😐 https://pp.userapi.com/c848616/v848616688/e28bd/LI5WzaWSL2s.jpg
Тогда, быть может, просто демо не работает
Да, в лисе не работает. Какие-то проблемы есть. В остальных браузерах нормально всё (на вебките)