Заливка (анимация) текста с помощью CSS и SVG (Часть 2)

MnogoBlog > WordPress > Дизайн > CSS и теги > Заливка (анимация) текста с помощью CSS и SVG (Часть 2)
Добавить комментарий

Здравствуйте, давайте продолжим рассматривать самые современные способы заливки текста, которые существуют на данный момент в сайтостроении.
PS: Статья в процессе написания…


Скачать исходники для статьи можно ниже

1. Анимированные Gif-ки

textfill6

В качестве заливки текста можно также использовать анимированные GIF изображения. Как правило, они довольно много весят, но смотрятся довольно эффектно:

HTML код: 

<svg viewBox="0 0 600 300">

<!-- Pattern -->
<pattern
      id="p-fire"
      viewBox="30 100 186 200"
      patternUnits="userSpaceOnUse"
      width="216" height="200"
      x="-70" y="35"
      >

  <!-- Fire -->
  <image
      xlink:href="/wp-content/uploads/2016/10/fire.gif"
      width="256" height="300"/>
</pattern>

<!-- Text -->
<text text-anchor="middle"
  x="50%"
  y="50%"
  dy=".35em"
  class="text">
  Text
</text>

</svg>

При тестировании кода — «HTML код» можно вставить в текстовой виджет (виджет «Текст»), для этого переходим в админку wordpress, в пункт «Внешний вид», подпункт «Виджеты», выбираем виджет «Текст», перетаскиваем его в сайдбар и вставляем в него код.

CSS код: 

.text {
  fill: url(#p-fire);
  stroke: #330000;
  stroke-width: 8;
  stroke-opacity: .5;
font-size: 200px;

}

svg {
width: 100%;
margin: 0 auto 50px;
display: block;
text-transform: uppercase; }

При тестировании кода — «CSS код» вставляется в файл стилей — style.css — для этого переходим в админку wordpress, выбираем пункт «Внешний вид», подпункт «Редактор», по умолчанию открывается файл стилей — style.css — в него и нужно вставить код.

2.1. Контурная заливка текста с помощью SVG

textfill3

HTML код: 

<svg viewBox="0 0 600 300">

  <!-- Symbol -->
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%" y="50%" dy=".35em">
      Text
    </text>
  </symbol>  

  <!-- Duplicate symbols -->
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>

</svg>

CSS код: 

.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
font-size: 200px;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}


svg {
width: 100%;
margin: 0 auto 50px;
display: block;
text-transform: uppercase; }

2.2. Ещё один пример контурной заливки текста с помощью SVG

textfill7

HTML код: 

<svg viewBox="0 0 600 300">

  <!-- Pattern -->
  <pattern
           id="p-spots"
           width="50"
           height="50"
           viewBox="0 0 90 90"
           patternUnits="userSpaceOnUse"
           >

    <g class="g-spots">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

    <g class="g-spots"
       transform="translate(45,45)">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

    <g class="g-spots"
       transform="translate(-45,45)">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

    <g class="g-spots"
       transform="translate(-45,-45)">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

    <g class="g-spots"
       transform="translate(45,-45)">

      <ellipse rx="25" ry="35"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="25" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="20"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="15" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

      <ellipse rx="5" ry="10"
               cx="50"
               cy="50" 
               ></ellipse>

    </g>

  </pattern>

  <!-- Text -->
  <text text-anchor="middle"
        x="50%"
        y="50%"
        dy=".35em"
        class="text"
        >
    Text
  </text>

</svg>

CSS код: 

.text {
  fill: none;
  stroke: url(#p-spots);
  stroke-width: 8;
  stroke-linejoin: round;
  font-size: 200px;
}

/* Colorize & animate pattern */
.g-spots ellipse {
  stroke-width: 0;
  stroke-opacity: 1;
  -webkit-animation: stroke 1.5s infinite;
  animation: stroke 1.5s infinite;
}

.g-spots ellipse:nth-child(5n + 1) {
  fill: #3F0B1B;
  stroke: #3F0B1B;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.g-spots ellipse:nth-child(5n + 2) {
  fill: #7A1631;
  stroke: #7A1631;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.g-spots ellipse:nth-child(5n + 3) {
  fill: #CF423C;
  stroke: #CF423C;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.g-spots ellipse:nth-child(5n + 4) {
  fill: #FC7D49;
  stroke: #FC7D49;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.g-spots ellipse:nth-child(5n + 5) {
  fill: #FFD462;
  stroke: #FFD462;
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;
}

/* Change stroke-width inside animation */
@-webkit-keyframes stroke {
  50% {
    stroke-width: 27;
    stroke-opacity: .5;
  }
}

@keyframes stroke {
  50% {
    stroke-width: 27;
    stroke-opacity: .5;
  }
}

svg {
width: 100%;
margin: 0 auto 50px;
display: block;
text-transform: uppercase; }

3. Используем маскирование (mask) и отсечение (clippath) в SVG для заливки и анимации текста.

Отсечение (clippath) определяет область элемента которая будет видна, всё остальное за пределами этой области не отображается и получается «отрезанным». Это как будто вырезать ножницами!

При маскировании (mask) изображение маски объединяется с элементом, влияя на его альфа-канал. Части маскированного элемента получаются полностью или частично прозрачными.

Похожие записи:

Добавить комментарий