• pda
  • 02.09.2018

  • 16:11

  • 25

  • 0

Поломанный текст SVG

0.0

Проголосовало

0
Оценить мод
Великолепно сделанный эффект поломанного текста с помощью SVG. Адаптивный скрипт, который легко можно использовать как на главной странице сайте, так и в доп.страницах. Данный скрипт сделан так, что бы не засорять память вашего сайта. Возможность в простом использовании, не будет нагружать ваш интернет ресурс.

Красный текст на белом фоне, который легко можно изменить в стилях CSS, будет радовать глаз ваших посетителей. Больше всего скрипт подойдет тем, у кого есть свой клан(сайт-клана) посвященный одной из игровой платформе. Украсив свой сайт не большим дополнением, ы порадуете своих пользователей.

Данный скрипт создан на базе HTML-CSS-SVG Он легок в использовании. Начало скрипта составляет SVG модуль, котором указанны все необходимые параметры для работоспособности скрипта. Далее текст указан через тег в HTML. Основную составляющую занимает CSS код. В нем можно указать необходимые параметры текста, его размер а так же цвет текста.

HTML

Код
<svg>
  <filter id="filter">
  <feTurbulence type="turbulence" baseFrequency="0.002 0.008" numOctaves="2" seed="2" stitchTiles="stitch" result="turbulence"/>
  <feColorMatrix type="saturate" values="30" in="turbulence" result="colormatrix"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0
  0 1 0 0 0
  0 0 1 0 0
  0 0 0 150 -15" in="colormatrix" result="colormatrix1"/>
  <feComposite in="SourceGraphic" in2="colormatrix1" operator="in" result="composite"/>
  <feDisplacementMap in="SourceGraphic" in2="colormatrix1" scale="15" xChannelSelector="R" yChannelSelector="A" result="displacementMap"/>
</filter>
</svg>

<div class="cssave-text" contenteditable>cssave</div>

CSS

Код
HTML, BODY {
  height: 100%;
}

BODY {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #fafafa;
  font: 23vw/1 Arial Black, sans-serif;
  text-align: center;
}

.cssave-text {
  white-space: nowrap;
  -webkit-filter: url(#filter);
  filter: url(#filter);
  outline: none;
  color: red;
}
.cssave-text::-moz-selection {
  background-color: rgba(255, 255, 255, 0.2);
}
.cssave-text::selection {
  background-color: rgba(255, 255, 255, 0.2);
}

svg {
  position: absolute;
  width: 0;
  height: 0;
}
Порядок установки:
Ссылка
BB-Code
HTML-код
:)