Интересные визуальные эффекты с текстом

MnogoBlog > WordPress > Дизайн > Для красоты > Интересные визуальные эффекты с текстом
Добавить комментарий

Здесь расскажу о текстовых эффектах, которые можно создать с помощью CSS, Javascript, онлайн сервисов.

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

1. CSS эффекты с текстом.

1.1. Неоновое свечение текста.

Неоновое свечение текста

Или такое:
неоновое свечение текста

Для того, чтобы создать данный эффект нам нужно в файл стилей style.css добавить следующий код (панель управления – пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл style.css): 

h8 {
      text-shadow: 0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #ff00de,
                   0 0 70px #ff00de,
                   0 0 80px #ff00de,
                   0 0 100px #ff00de,
                   0 0 150px #ff00de;
}

Далее достаточно открыть редактор любой записи или странички и во вкладке HTML (не в визуальном редакторе) вставить нужный текст, обвернутый в тег h8: 

<h8>Mnogoblog</h8>

 

1.2. 3D текст

 
3d текст для сайта

Или такой:
3d текст

Пример кода вышеуказанного эффекта:
Для того, чтобы создать данный эффект нам нужно в файл стилей style.css добавить следующий код (панель управления – пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл style.css): 

h7 {
      font-size: 60px;
      color: #909090;
      text-shadow: 0 1px 0 #bbb,
                   0 2px 0 #bbb,
                   0 3px 0 #aaa,
                   0 4px 0 #aaa,
                   0 5px 0 #999,
                   0 6px 1px #000,
                   0 0px 3px #000,
                   0 1px 3px #000,
                   0 3px 5px #000,
	           0 5px 10px #000,
	           0 5px 20px #000;
}

Далее достаточно открыть редактор любой записи или странички и во вкладке HTML (не в визуальном редакторе) вставить нужный текст, обвернутый в тег h7: 

<h7>Привет это 3D текст</h7>

 
О других текстовых эффектах, которые можно создать с помощью CSS можете прочитать по следующим ссылкам:
http://ruseller.com/lessons.php?rub_id=2&id=810
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects

2. Использование javascript для создания эффектов.

Прыгающий волной текст.
Прыгающий волной текст

Демо-пример можете посмотреть тут:
http://www.yaldex.com/FSTextEffects/PushingText.htm
Здесь же расположен его код: 

<script language="JavaScript" type="Text/JavaScript">
//Made by 1st JavaScript Editor
//http://www.yaldex.com
//Come and get more (free) products

fifteenth="Your Text Here";sixteenth=1;var nineteenth=document.getElementById && document.all;seventeenth=new Array();seventeenth[0]=-1;seventeenth[1]=-3;seventeenth[2]=-6;seventeenth[3]=-10;seventeenth[4]=-8;seventeenth[5]=-3;seventeenth[6]=-2;eighteenth=0;twentieth=0;first2="";
function second2(){
if (nineteenth && !sixteenth){third2.innerHTML=fifteenth;return;}
if(fifteenth.length > 6){
for(fourth2=0; fourth2 != fifteenth.length;fourth2++){first2=first2+"<span style='position:relative;' id='n"+fourth2+"'>"+fifteenth.charAt(fourth2)+"</span>"};third2.innerHTML=first2;first2="";fifth2();}
else{alert("Too short message!");}}
function fifth2(){sixth2=(document.getElementById)? document.getElementById("n0") : document.all.n0;sixth2.style.left=-twentieth;
if(twentieth != 9){twentieth=twentieth+3;setTimeout("fifth2()",30);}
else{fifteenth3();}}
function fifteenth3(){sixth2.style.left=-twentieth;
if(twentieth != 0){twentieth=twentieth-3;setTimeout("fifteenth3()",30)}
else{seventeenth3();}}
function seventeenth3(){first2="";
for(fourth2=0;fourth2 != fifteenth.length;fourth2++){
if(fourth2+eighteenth > -1 && fourth2+eighteenth < 7){first2=first2+"<span style='position:relative;top:"+seventeenth[fourth2+eighteenth]+"'>"+fifteenth.charAt(fourth2)+"</span>";}
else{first2=first2+"<span>"+fifteenth.charAt(fourth2)+"</span>";}}third2.innerHTML=first2;first2="";
if(eighteenth != (-fifteenth.length)){eighteenth--;setTimeout("seventeenth3()",30);}
else{eighteenth=0;setTimeout("second2()",30);}}
</script>
<h1><div align="center" id="eighteenth3" style="color:red"></div></h1>
<script language="javascript" type="text/javascript">
if (document.all||document.getElementById){third2=(document.getElementById)? document.getElementById("eighteenth3") : document.all.eighteenth3;second2();}else document.write(fifteenth);
</script>

О том как вставить Javascript на свой сайт можете прочитать в моей предыдущей статье:
https://mnogoblog.ru/kak-podklyuchit-javascript-v-wordpress

Данный скрипт я попробовал вставить в индивидуальный шаблон страницы на своем тестовом сайте – получилось, можете посмотреть: http://mnogoblog2.16mb.com/java/

Другие интересные javascript эффекты можно найти на следующих сайтах:
http://www.yaldex.com/FSTextEffects.htm
http://catalogsv-3dn.narod.ru/tecst.html

3. Онлайн сервисы

http://csswarp.eleqtriq.com/ – онлайн ресурс, позволяющий расположить текст по кривой линии, по кругу, по спирали,..

Онлайн ресурс csswarp.eleqtriq.com

Где можно применить данный текст, ну например, в шапке.

Конечно, в некоторых случаях проще будет нарисовать текст по кривой на самой фоновой картинке сайта, однако, если фоновой картинки нет или же в шапке установлен цвет с помощью css, то данный способ можно будет применить.

Расположение текста выстраивается аналогично программе Adobe Illustrator.

С лева представлено четыре блока:

– TEXT – здесь вводите текст, который будете располагать по кривой, можно писать по-русски и нажимаете на кнопку “warp it”.

– CURVE – здесь задаете расположение текст по кривой, по кругу, либо добавляете еще точек и превращаете кривую в нужную вам фигуру.

– TYPE – здесь задаете расстояние между буквами, их расположение внутри или снаружи кривой, размер шрифта, отдаленность шрифта от кривой.

– POINT – здесь можно удалять точки и изменять их углы.

Справа представлен блок, который показывает реальный размер вашего блока с данным текстом, так что уменьшите его до тех размеров, которые хотите, в нижнем правом углу написаны его размеры.

Расположение текста по дуге

После того, как вы нарисовали нужную вам фигуру или кривую жмите на кнопку “GENERATE HTML” (расположена вверху над правым блоком).

код для вставки кривой на сайт

Сверху стоят кнопочки, определяющая юзабилити данного кода для различных браузеров – по умолчанию стоят все.

Теперь разберемся с кодом, здесь нам понадобится только часть кода, а именно:

То что заключено между тегами <style type=’text/css’> и до </style> мы должны будем вставить в файл стилей style.css. То есть входим в панель управления вашим сайтом, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов находим файл style.css, спускаемся в конец его кода и вставляем код, который находится между вышеуказанными тегами, например у меня он выглядел так:

  

 #warped {position: relative; display: block; width:313px; height:168px;}

                     #warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;
                     -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50%
                     100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; }

                     #warped span{font-family:'ABeeZee';font-size:38px;font-weight:regular;font-style:normal;
                     line-height:1; white-space:pre; overflow:visible; padding:0px;}

                     #warped .w0 {-moz-transform: rotate(4.74rad);-webkit-transform: rotate(4.74rad);-o-transform:
                     rotate(4.74rad);-ms-transform: rotate(4.74rad); transform: rotate(4.74rad);
                     width: 32px; height: 38px; left: 35.04px; top: 104.97px;}

                     #warped .w1 {-moz-transform: rotate(5.08rad);-webkit-transform: rotate(5.08rad);-o-transform:
                     rotate(5.08rad);-ms-transform: rotate(5.08rad); transform: rotate(5.08rad);
                     width: 23px; height: 38px; left: 46.45px; top: 71.35px;}

                     #warped .w2 {-moz-transform: rotate(5.38rad);-webkit-transform: rotate(5.38rad);-o-transform:
                     rotate(5.38rad);-ms-transform: rotate(5.38rad); transform: rotate(5.38rad);
                     width: 23px; height: 38px; left: 61.44px; top: 45.49px;}

                     #warped .w3 {-moz-transform: rotate(5.68rad);-webkit-transform: rotate(5.68rad);-o-transform:
                     rotate(5.68rad);-ms-transform: rotate(5.68rad); transform: rotate(5.68rad);
                     width: 22px; height: 38px; left: 83.48px; top: 25.49px;}

                     #warped .w4 {-moz-transform: rotate(5.97rad);-webkit-transform: rotate(5.97rad);-o-transform:
                     rotate(5.97rad);-ms-transform: rotate(5.97rad); transform: rotate(5.97rad);
                     width: 23px; height: 38px; left: 109.41px; top: 12.63px;}

                     #warped .w5 {-moz-transform: rotate(6.27rad);-webkit-transform: rotate(6.27rad);-o-transform:
                     rotate(6.27rad);-ms-transform: rotate(6.27rad); transform: rotate(6.27rad);
                     width: 23px; height: 38px; left: 138.94px; top: 8px;}

                     #warped .w6 {-moz-transform: rotate(6.52rad);-webkit-transform: rotate(6.52rad);-o-transform:
                     rotate(6.52rad);-ms-transform: rotate(6.52rad); transform: rotate(6.52rad);
                     width: 13px; height: 38px; left: 168.69px; top: 10.97px;}

                     #warped .w7 {-moz-transform: rotate(6.77rad);-webkit-transform: rotate(6.77rad);-o-transform:
                     rotate(6.77rad);-ms-transform: rotate(6.77rad); transform: rotate(6.77rad);
                     width: 23px; height: 38px; left: 186.95px; top: 19.97px;}

                     #warped .w8 {-moz-transform: rotate(7.07rad);-webkit-transform: rotate(7.07rad);-o-transform:
                     rotate(7.07rad);-ms-transform: rotate(7.07rad); transform: rotate(7.07rad);
                     width: 22px; height: 38px; left: 210.99px; top: 37.57px;}

                     #warped .w9 {-moz-transform: rotate(7.3rad);-webkit-transform: rotate(7.3rad);-o-transform:
                     rotate(7.3rad);-ms-transform: rotate(7.3rad); transform: rotate(7.3rad);
                     width: 11px; height: 38px; left: 230.94px; top: 56.03px;}

                     #warped .w10 {-moz-transform: rotate(7.5rad);-webkit-transform: rotate(7.5rad);-o-transform:
                     rotate(7.5rad);-ms-transform: rotate(7.5rad); transform: rotate(7.5rad);
                     width: 15px; height: 38px; left: 237.56px; top: 74.04px;}

                     #warped .w11 {-moz-transform: rotate(7.76rad);-webkit-transform: rotate(7.76rad);-o-transform:
                     rotate(7.76rad);-ms-transform: rotate(7.76rad); transform: rotate(7.76rad);
                     width: 23px; height: 38px; left: 239.12px; top: 99.37px;}

 
Далее нам нужно вставить на наш сайт еще один кусок, предлагаемого нам кода, а именно тот, который заключен между тегами <body> и </body>, например у меня он выглядел так: 

 <div id='warped'>
                     <span class='w0'>M</span><span class='w1'>n</span><span class='w2'>o</span><span class='w3'>g</span><span class='w4'>o</span><span class='w5'>b</span><span class='w6'>l</span><span class='w7'>o</span><span class='w8'>g</span><span class='w9'>.</span><span class='w10'>r</span><span class='w11'>u</span>
              </div>

 
Его нужно вставить там, где вам нужно расположить ваш текст.
Например можно вставить его в саму запись, но только в HTML вкладке редактора записи или же в виджет (выбирите виджет с названием “Текст”, перенесите его в сайдбар и вставьте внутри вышеуказанный код), или же непосредственно в код нужного вам шаблона, например для вставки в шапку вам необходимо вставить его в файл header.php (где-то после тега body).
 

4. Онлайн сервис cooltext.com/Logos

 
онлайн сервис

Выбираете нужный вам эффект, жмете на него.

Онлайн сервис cooltext.com

Настраиваем: текст, размер, градиент, формат и прозрачность (у всех визуальных эффектов свои настройки) и жмем на кнопку “Create Logo”.

текстовые визуальные эффекты

Здесь можно выбрать:
– загрузить картинку (Download Image)
– получить HTML код (Get HTML Code)
– отправить картинку на e-mail (Email Image).

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

Введите свой email адрес для того, чтобы подписаться на мой блог:

knopkisoc

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