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

Бухвалова Юлия, 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
Chrome Safari Opera Firefox IE

Заливки

-webkit-background-clip: text

текст
текст
текст
текст
текст текст текст текст текст текст текст текст текст текст

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

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

2. SVG

SVG-текст

Обводки

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

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

или в CSS:

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

stroke-dasharray

текст
текст
текст
текст
текст текст текст текст текст

Заливки

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

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

или в CSS:

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

Градиенты

текст
текст
текст
текст

Паттерны

АБВ
АБВ
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 id="mask-text"
    maskunits="userSpaceOnUse"
    maskcontentunits="userSpaceOnUse">
        <text x="50%" y="50%" dy=".2em" text-anchor="middle"
            fill="#FFF">
            текст
        </text>
</mask>
текст

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

.text {
    fill: none;
    }

 

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

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

.text {
    fill: transparent;
    }

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

Dizzy Dots
Good trip

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

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

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

Bird
darken
lighten
текст
текст

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

Aurora Borealis Text

Chrome Safari Opera Firefox IE

4. SVG + HTML

SVG-маска

текст
текст

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

текст
АБВ
Chrome Safari Opera Firefox IE

А смысл?

/* End */

Спецификации

SVG

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

Эффекты для текста

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

Слайды: yoksel.github.io/text-may2015

Анимация заставки: Snap.svg

Powered by Shower