Оживляем текст

Бухвалова Юлия, Livejournal

Оживляем текст

Презентация в лучшем виде:

  •           
  • + флаг: chrome://flags/#enable-experimental-web-platform-features
  • + флаг: opera://flags/#enable-experimental-web-platform-features

Скопируйте ссылку на флаг в адресную строку браузера, включите флаг и перезапустите браузер.

Так себе вид:

Краткое содержание

  1. HTML + CSS
  2. SVG
  3. Режимы наложения
  4. HTML + SVG

1. HTML + CSS

Обводки

text-shadow

текст
text-shadow: -1px -1px green,  1px -1px green,
              1px  1px green, -1px  1px green,
             -2px -2px green,  2px -2px green,
              2px  2px green, -2px  2px green,
             -3px -3px green,  3px -3px green,
              3px  3px green, -3px  3px green,
             -4px -4px green,  4px -4px green,
              4px  4px green, -4px  4px green,
             -5px -5px green,  5px -5px green,
              5px  5px green, -5px  5px green,
             -6px -6px green,  6px -6px green,
              6px  6px green, -6px  6px green,
             -7px -7px green,  7px -7px green,
              7px  7px green, -7px  7px green;

@function shadows($max: 5, $color: white){
    $out: null;

    @for $i from 0 through $max {

        @if ($i > 0) {
          $pos: #{$i}px;
          $pos-n: -$pos;

          $shadow-t-l: $pos-n $pos-n $color;
          $out: append( $out, $shadow-t-l, comma );
          $shadow-t-r: $pos $pos-n $color;
          $out: append( $out, $shadow-t-r, comma );
          $shadow-b-r: $pos $pos $color;
          $out: append( $out, $shadow-b-r, comma );
          $shadow-b-l: $pos-n $pos $color;
          $out: append( $out, $shadow-b-l, comma );
        }

    }

    @return $out;
}
текст
текст

Google Fonts Effects


http://fonts.googleapis.com/css?family=Rancho&effect=3d
<div class="font-effect-3d">текст</div>
текст
текст
текст
developers.google.com/fonts/docs/getting_started#Effects Google Fonts Effects
Chrome Safari Opera Firefox IE

-webkit-text-stroke

текст
.text {
    -webkit-text-stroke: .05em orangered;
    }
Chrome Safari Opera Firefox IE

Заливки

-webkit-background-clip: text

текст
.text {
  background: url(tulips.jpg) 50% 50%;


  }
текст
.text {
  background: url(tulips.jpg) 50% 50%;
  -webkit-background-clip: text;

  }
текст
.text {
  background: url(tulips.jpg) 50% 50%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
текст
текст
текст текст текст текст текст текст текст текст текст текст

Анимация заливки

текст
текст
Chrome Safari Opera Firefox IE

2. SVG

SVG text

<svg viewBox="0 0 1024 620">
    <text x="50%" y="50%" dy=".2em" text-anchor="middle">
        текст
    </text>
</svg>
текст

Обводки

Через атрибуты:

<text stroke="crimson" stroke-width="3">текст</text>

или в CSS:

.text {
        stroke: crimson;
        stroke-width: 3;
        }
текст текст
текст
текст

stroke-dasharray

.text {
    stroke: orangered;
    stroke-width: 4;
    stroke-dasharray: 50 30 20 10;
    }
текст
текст
текст
текст текст текст текст текст

Заливки

Через атрибут:

<text fill="url(#gr-blue)">текст</text>

или в CSS:

.text {
        fill: url(#gr-blue);
        }
текст текст текст

Градиенты

<linearGradient id="gr-blue"
        x1="0" y1="0" x2="100%" y2="100%">
    <stop stop-color="hsl(160, 100%, 80%)" offset="10%"/>
    <stop stop-color="hsl(250, 100%, 30%)" offset="90%"/>
</linearGradient>
текст
текст
текст

Паттерны

<pattern id="pt-circle" width="50" height="50"
    viewBox="0 0 50 50" patternUnits="userSpaceOnUse">
    <circle r="18" cx="25" cy="25"
      fill="yellowgreen" stroke="green" stroke-width="7"/>
</pattern>
<pattern id="pt-wood" width="300" height="300"
    patternUnits="userSpaceOnUse">
    <image xlink:href="wood.jpg"
        width="300" height="300"/>
</pattern>
АБВ
АБВ
Nam tristique vestibulum nulla nec accumsan. Nullam commodo eget dolor et ultricies. Nulla ligula elit, placerat a sapien vel, eleifend tincidunt nibh. Suspendisse porta fermentum dictum. Cras eget Maecenas tempus elit quis sapien tempus, sit amet viverra neque mattis. Quisque a tincidunt mi. Proin at justo eu ipsum posuere dignissim vel quis eros. Etiam at libero commodo, varius justo quis, interdum erat. Fusce viverra mollis est, nec euismod ante mattis ut. Aenean eu mauris viverra enim vulputate bibendum. Integer velit metus, cursus et commodo sit amet, gravida vitae purus. Sed scelerisque at odio non condimentum. Sed neque lacus, rhoncus vitae sem ut, pharetra vestibulum elit. Cras ultricies aliquam dolor quis ultrices. Cras eget mauris tincidunt, aliquam erat quis, faucibus augue. АБВ

Анимация заливки

текст
текст
Вода Огонь

SVG mask

<mask id="mask-text"
    maskunits="userSpaceOnUse"
    maskcontentunits="userSpaceOnUse">
        <text x="50%" y="50%" dy=".2em" text-anchor="middle"
            fill="#FFF">
            текст
        </text>
</mask>
текст
<g>
    <rect fill="url(#pt-wood)" width="100%" height="100%"/>
</g>
<g mask="url(#mask-text)">
    <rect fill="url(#pt-wood)" width="100%" height="100%"/>
</g>

Анимация заливки

Dizzy Dots
Good trip

Копируемый текст

.text {
    fill: none;
    }

 

.text {
    fill: transparent;
    }
.text {
    fill: none;
    }

Прозрачный текст, который можно выделить:

.text {
    fill: transparent;
    }

Проблемы текста в SVG

текст, уехавший за край
Однажды в студеную зимнюю пору я из лесу вышел, по-моему, зря.
Chrome Safari Opera Firefox IE

3. Режимы наложения

Bird
darken
lighten
текст
.text {
    mix-blend-mode: lighten;
    }
текст

Анимация заливки

Aurora Borealis Text

Chrome Safari Opera Firefox IE

4. SVG + HTML

SVG mask

текст
текст

Анимация заливки

АБВ
Chrome Safari Opera Firefox

А смысл?

Послесловие

Полезные ссылки

Бухвалова ЮлияLivejournal

Powered by Shower