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

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



варианты оформления текста

На выбор ещё 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


13 комментариев:

  1. Ей-Богу, если выкладывать поочередно все возможные фишки, так и никакого текста в блог запихивать не надо! И так будет, чем позабавить подписчика.

    ОтветитьУдалить
  2. Семён, Вообще - то каждому своё. Вы считаете, что мы забавляем подписчиков и впихиваем тексты. Если у меня блог про такие фишки, что плохого. Многие ими пользуются.

    ОтветитьУдалить
  3. Забавно, Виктория! Спасибо!

    ОтветитьУдалить
    Ответы
    1. Ирина, сколько всего можно сделать для оформления, уму не постижимо. Только фантазию включай.

      Удалить
  4. Столько прикольных вариантов,красота! Вика,в 4-м варианте,в каком месте и что можно прописать,чтобы был отступ сверху в определенном месте? а то у меня то над шапкой,то под шапкой,хотелось бы,на фоне шапки посадить.

    ОтветитьУдалить
  5. Вставляй первую часть кода в по принципу http://www.shpargalochki.ru/2016/11/how-to-center-blogger-header-image.html в стили CSS шапки. Я же твой блог не знаю. Может теги менять нужно.

    ОтветитьУдалить
  6. у меня в шапке нет стилей,только изображение,это вордпресс,картинка шапки под меню и когда я вставляю этот код,он у меня над или под,на фоне шапки никак не хочет,а жаль,прикольный эффект

    ОтветитьУдалить
  7. к тому же сразу меняются другие заголовки на сайте,видимо стили дерутся
    попробовала агалогичный вариант в другом посте у тебя,там с цветами всё норм,но позиция так же не сдвигается

    ОтветитьУдалить
  8. Infodar.Как это нет стилей, тот же размер, изображение и пр .Шаблон у тебя в манетке сторонний вроде.

    ОтветитьУдалить
  9. у меня вот такой код стоит на картинку шапки:
    <img height="20% "src="https://monetka.website/wp-content/uploads/header.png" width="100%" />

    ОтветитьУдалить
  10. Это просто картинка в гаджете. У тебя за шапку отвечает класс class="site-header. Там вообще чёрт ногу сломит.

    ОтветитьУдалить
  11. ну в вордпрессе немного по-другому всё,ладно,спасибо,уберу тогда,что-нибудь другое поставлю

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML