как красиво оформить текст или заголовок

Доброго времени суток, друзья. Продолжаю тему оформления текста. Эффектов  превеликое множество и предлагаю ещё для эксперимента несколько вариантов оформления текста или заголовка (позаголовка) в блоге. 

На выбор ещё 5 примеров, с помощью которых вы сможете красиво оформить на своём блоге текст или заголовок. Скопируйте каждый из предложенных кодов и установите  здесь в редакторе для просмотра результата.

Вариант 1. При наведении курсора текст меняет основной цвет. 

 <style>.blur {
   color: #FA8072;
   font-family: 'Audiowide';
   font-size:5em;
   text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
.blur:hover {
   color: rgba(0,0,0,0.6);
   text-shadow:1px 2px 5px rgba(0,0,0,0.5);
}</style>

<p class="blur" style="text-align: center;"> просто красивый текст</p>


Вариант 2. Лёгкое движение теста с длинной тенью. Эффектно смотрится.

<style>

h4{

  font-family: 'Audiowide';

  font-size:3em;

  position:absolute;

  top:0;

  bottom:0;

  left:0;

  right:0;

  margin:auto;

  height:140px;

  width:90%;

  -webkit-animation: floating-text 2s ease alternate infinite;

     -moz-animation: floating-text 2s ease alternate infinite;

      -ms-animation: floating-text 2s ease alternate infinite;

       -o-animation: floating-text 2s ease alternate infinite;

          animation: floating-text 2s ease alternate infinite;

}

@-webkit-keyframes floating-text {

  0% {

    -webkit-transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}

@-moz-keyframes floating-text {

  0% {

    -moz-transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}

@-ms-keyframes floating-text {

  0% {

    -ms-transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}

@-o-keyframes floating-text {

  0% {

    -o-transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}

@keyframes floating-text {

  0% {

    transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}</style>

<br />
<h4>
<span style="color: red;">
С Новым годом</span></h4>
</div>

Вариант 3. Очень оригинальное расположение теней. 3D текст.

<h1 data-shadow='Класс!'>Класс!</h1>
<style>
h1 {
  display: inline-block;
  color: white;
  font-family: 'Righteous', serif;
  font-size: 12em;
  text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
  }
  h1:after {
    content: attr(data-shadow);
    position: absolute;
    top: .06em; left: .06em;
    z-index: -1;
    text-shadow: none;
    background-image:
      linear-gradient(
        45deg,
        transparent 45%,
        hsla(48,20%,90%,1) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
        );
    background-size: .05em .05em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shad-anim 15s linear infinite;
    }

@keyframes shad-anim {
  0% {background-position: 0 0}
  0% {background-position: 100% -100%}
  }
 </style>

Вариант 4. Весёлые разноцветные прыгающие буковки - почему бы и нет.

Мы уже делали что -то на подобии. Об этом в статье анимация текста для блога.

<h1><span>П</span><span>Р</span><span>И</span><span>В</span><span>Е</span><span> </span><span>Т</span><span>И</span><span>К</span><span>!</span></h1>

<style>

h1 {
 font-size:5em;
 font:bold 7.5vw/1.6 'Signika', sans-serif;
 user-select:none;
}

h1 span { display:inline-block; animation:float .2s ease-in-out infinite; }
 @keyframes float {
  0%,100%{ transform:none; }
  33%{ transform:translateY(-1px) rotate(-2deg); }
  66%{ transform:translateY(1px) rotate(2deg); }
}
body:hover span { animation:bounce .6s; }
@keyframes bounce {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
} span:nth-child(4n) { color:hsl(50, 75%, 55%); text-shadow:1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); }
span:nth-child(4n-1) { color:hsl(135, 35%, 55%); text-shadow:1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); }
span:nth-child(4n-2) { color:hsl(155, 35%, 60%); text-shadow:1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); }
span:nth-child(4n-3) { color:hsl(30, 65%, 60%); text-shadow:1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); }

h1 span:nth-child(2){ animation-delay:.05s; }
h1 span:nth-child(3){ animation-delay:.1s; }
h1 span:nth-child(4){ animation-delay:.15s; }
h1 span:nth-child(5){ animation-delay:.2s; }
h1 span:nth-child(6){ animation-delay:.25s; }
h1 span:nth-child(7){ animation-delay:.3s; }
h1 span:nth-child(8){ animation-delay:.35s; }
h1 span:nth-child(9){ animation-delay:.4s; }

 </style>

Вариант 5. Текст в цветах

<style>.backdrop {
    background:url("http://g2.delphi.lv/images/pix/659x380/-3Uaun62f8w/helenijas-rudens-pukes-ziedi-49218257.jpg") center;
    background-size:contain;
    margin:auto;
    width:55vw;
}

.text {
    color: white;
    border: 4px solid;
    background: rgb(59, 2, 6);
    mix-blend-mode:  multiply;
    font: bolder 12vw 'Alfa Slab One';
    text-align: center;
    margin: 0;
}</style>

<br />
<div class="backdrop">
<div class="text">
Привет</div>
</div>

В последнем варианте в строке, отмеченной розовым цветом, вставляем адрес (url) изображения.

Советую посмотреть ещё статьи про текстовые эффекты

Как изменить цвет текста на  нестандартный

Варианты градиента текста

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email