Эффекты для текста на основе JQuery

Библиотека JQuery дает нам огромное количество возможностей по оформлению текста. Сегодня мы разберем, как добавить несколько эффектов на основе готового скрипта.


Эффект №1


При наведении мыши наш текст будет меняться, менять цвет фона и поворачиваться.

При наведении мыши на букву, она будет подсвечиваться. Для создания трансформации воспользуемся не только JQuery, но и возможностями CSS3.
В место, где вы хотите увидеть ваш текст, добавьте два виджета «HTML-код».

В первый надо добавить код скрипта Lettering.JS 0.6.1, который будет осуществлять трансформацию. Код разработан Dave Rupert
<script>
 (function($){
	function injector(t, splitter, klass, after) {
		var a = t.text().split(splitter), inject = '';
		if (a.length) {
			$(a).each(function(i, item) {
				inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
			});	
			t.empty().append(inject);
		}
	}
	var methods = {
		init : function() {
			return this.each(function() {
				injector($(this), '', 'char', '');
			});
		},
		words : function() {
			return this.each(function() {
				injector($(this), ' ', 'word', ' ');
			});
		},
		lines : function() {
			return this.each(function() {
				var r = "eefec303079ad17405c889e092e105b0";
				injector($(this).children("br").replaceWith®.end(), r, 'line', '');
			});
		}
	};
	$.fn.lettering = function( method ) {
		if ( method && methods[method] ) {
			return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
		} else if ( method === 'letters' || ! method ) {
			return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
		}
		$.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
		return this;
	};
})(jQuery);
</script>
Во второй блок добавьте стиль, разметку HTML и функцию вызова:
<style>
.letter-container{
	border-bottom: 1px dashed rgba(0,0,0,0.4);
	border-top: 1px dashed rgba(0,0,0,0.4);
	margin: 20px;
	padding: 40px 10px;
	text-align: center;
	font-family: 'Arapey', Arial, sans-serif;
}
.letter-container h2{
	text-align: center;
	position: relative;
	height: 180px;
	width: 800px;
	display: inline-block;
}
.letter-container h2 a{
	text-align: center;
	text-transform: uppercase;
	font-size: 150px;
	position: absolute;
	width: 800px;
	height: 180px;
	top:0px;
	left: 50%;
	margin-left: -400px;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.letter-container h2 a:nth-child(2){
	opacity: 0;
}
.letter-container h2 a span{
	display: inline-block;
	position: relative;
	width: 120px;
	margin: 0px;
	background: #333;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
	text-shadow: 
		2px 2px 2px rgba(0,0,0,0.6), 
		1px 1px 2px rgba(0,0,0,0.4), 
		0px 0px 2px rgba(255,255,255,0.9);
}
.letter-container h2 a span:nth-child(odd),
.letter-container h2 a span.char1{
	-webkit-transform: skewY(10deg);
	-moz-transform: skewY(10deg);
	-o-transform: skewY(10deg);
	-ms-transform: skewY(10deg);
	transform: skewY(10deg);
	background: #333;
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	z-index: 10;
}
.letter-container h2 a span:nth-child(even),
.letter-container h2 a span.char2{
	-webkit-transform: skewY(-10deg);
	-moz-transform: skewY(-10deg);
	-o-transform: skewY(-10deg);
	-ms-transform: skewY(-10deg);
	transform: skewY(-10deg);
	background: #666;
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	z-index: 10;
}
.letter-container h2:hover a:nth-child(1){
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=90);
}
.letter-container h2:hover a:nth-child(2){
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
}
.letter-container h2:hover a span{
	-webkit-transform: skewY(0deg);
	-moz-transform: skewY(0deg);
	-o-transform: skewY(0deg);
	-ms-transform: skewY(0deg);
	transform: skewY(0deg);
	background: #680121;
}
.letter-container h2 a span:hover{
	color: #f6b0c5;
}
</style>

<div id="letter-container" class="letter-container">
				<h2>
					<a href="#">Chaos</a>
					<a href="#">Order</a>
				</h2>
			</div>
<script type="text/javascript">
				$(function() {
					$("#letter-container h2 a").lettering();
				});
			</script>
Попробуйте сохранить и запустить сайт для просмотра. При наведении мыши, текст будет меняться.

Эффект №2


Добьемся проявления текста с зернистым эффектом.

Для этого выполним те же действия, что и в прошлом эффекте, но во второй блок html-кода вставим другое оформление и изменим разметку.
<style>
.letter-container {
	border-bottom: 1px dashed rgba(0,0,0,0.3);
	border-top: 1px dashed rgba(0,0,0,0.3);
	padding: 20px;
	height: 270px;
	width: 655px;
	margin: 20px auto;
}
.letter-container h2 {
	text-align: center;
	font-family: 'Arvo', Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.letter-container h2 a {
	text-align: center;
	padding: 20px;
}
.letter-container h2 a span {
	font-size: 105px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
	-webkit-mask-image: url(../images/mask2.png);
	-moz-mask-image: url(../images/mask2.png);
	-o-mask-image: url(../images/mask2.png);
	mask-image: url(../images/mask2.png);
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
	-webkit-animation: sharpen 0.6s linear backwards;
	-moz-animation: sharpen 0.6s linear backwards;
	-ms-animation: sharpen 0.6s linear backwards;
	animation: sharpen 0.6s linear backwards;
}
.letter-container h2 a span:hover{
	color: #3f7f75;
}
.letter-container h2 a span:nth-child(1) {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-ms-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(2) {
	-webkit-animation-delay: 0.1s;
	-moz-animation-delay: 0.1s;
	-ms-animation-delay: 0.1s;
	animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}
.letter-container h2 a span:nth-child(4) {
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	-ms-animation-delay: 0.3s;
	animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-ms-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(6) {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.letter-container h2 a span:nth-child(7) {
	-webkit-animation-delay: 1.4s;
	-moz-animation-delay: 1.4s;
	-ms-animation-delay: 1.4s;
	animation-delay: 1.4s;
}
.letter-container h2 a span:nth-child(8) {
	-webkit-animation-delay: 0.7s;
	-moz-animation-delay: 0.7s;
	-ms-animation-delay: 0.7s;
	animation-delay: 0.7s;
}
.letter-container h2 a span:nth-child(9) {
	-webkit-animation-delay: 1.6s;
	-moz-animation-delay: 1.6s;
	-ms-animation-delay: 1.6s;
	animation-delay: 1.6s;
}
.letter-container h2 a span:nth-child(10) {
	-webkit-animation-delay: 0.9s;
	-moz-animation-delay: 0.9s;
	-ms-animation-delay: 0.9s;
	animation-delay: 0.9s;
}
.letter-container h2 a span:nth-child(11) {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	-ms-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(12) {
	-webkit-animation-delay: 1.1s;
	-moz-animation-delay: 1.1s;
	-ms-animation-delay: 1.1s;
	animation-delay: 1.1s;
}
.letter-container h2 a span:nth-child(13) {
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	-ms-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.letter-container h2 a span:nth-child(14) {
	-webkit-animation-delay: 1.3s;
	-moz-animation-delay: 1.3s;
	-ms-animation-delay: 1.3s;
	animation-delay: 1.3s;
}
.letter-container h2 a span:nth-child(15) {
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	-ms-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
.letter-container h2 a span:nth-child(16) {
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	-ms-animation-delay: 1.5s;
	animation-delay: 1.5s;
}
@keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #444;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #444;
   	color: transparent;
 }
 100% {
    color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-moz-keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #444;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #444;
   	color: transparent;
 }
 100% {
    color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-webkit-keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #444;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #444;
   	color: transparent;
 }
 100% {
    color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-ms-keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #444;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #444;
   	color: transparent;
 }
 100% {
    color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
</style>

<div id="letter-container" class="letter-container">
				<h2>
					<a href="#">Прекрасный эффект</a>
				</h2>
			</div>
 <script type="text/javascript">
				$(function() {
					$("#letter-container h2 a").lettering();
				});
			</script>
Как видим, вызов функции не изменился.

Эффект №3


При наведении на приподнятую букву, она постепенно ложится на экран

По аналогии с предыдущими эффектами, во второй блок html-кода добавим следующий код:
<style>
.letter-container{
	text-align: center;
	padding: 20px;
	border-bottom: 5px dashed rgba(255,255,255,0.3);
	border-top: 5px dashed rgba(255,255,255,0.3);
	height: 150px;
	z-index: 10;
	position: relative;
	margin: 20px;
}
.letter-container h2 a{
	font-size: 140px;  
	display: block;
	width: 495px;
	margin: 0 auto;
	clear: both;
}
.letter-container h2 a:before{
	content: '';
	position: absolute;
	z-index: 0;
	width: 525px;
	height: 616px;
	background: transparent url(../images/superhero.png) no-repeat center center;
	background-size: 40%;
	top: 0px;
	left: 50%;
	margin-left: -277px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.letter-container h2 a:hover:before{
	background-size: 100%;
}
.letter-container h2 a span{
	color: #ff3de6;
	float:left;
	position: relative;
	z-index: 100;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-shadow:  
	  0px -1px 3px #cb4aba, 
	  0 4px 3px #934589, 
	  2px 15px 5px rgba(0, 0, 0, 0.2), 
	  1px 20px 10px rgba(0, 0, 0, 0.3);
}
.letter-container h2 a span:hover{
	color: #e929d0;
	padding-top: 10px;
	text-shadow:  
	  0px -1px 3px #cb4aba, 
	  0 4px 3px #934589, 
	  1px 1px 10px rgba(0, 0, 0, 0.2);
}

</style>

 <div id="letter-container" class="letter-container">
				<h2>
					<a href="#">Paris</a>
				</h2>
			</div>
<script type="text/javascript">
				$(function() {
					$("#letter-container h2 a").lettering();
				});
</script>
Если ваш текст не помещается в блок, измените ширину контейнера:
.letter-container h2 a{
	font-size: 140px;  
	display: block;
	width: 495px;
	margin: 0 auto;
	clear: both;
}
Свойство font-size отвечает за размер шрифта.

Эффект №4


Размытие букв при наведении.

Во второй блок HTML-кода добавьте стиль, разметку и вызов функции:
<style>
.letter-container {
	border-bottom: 1px dashed rgba(255,255,255,0.3);
	border-top: 1px dashed rgba(255,255,255,0.3);
	margin: 20px;
	padding: 20px;
	height: 340px;
  	background:black
}
.letter-container h2 {
	text-align: center;
	font-family: 'Niconne', Arial, sans-serif;
	letter-spacing: 3px;
}
.letter-container h2 a {
	text-align: center;
	font-size: 130px;
	line-height: 160px;
	display: block;
	padding-bottom: 30px;
	-webkit-mask: url(images/images4186/mask.png) repeat;
	-o-mask: url(images/images4186/mask.png) repeat;
	-moz-mask: url(images/images4186/mask.png) repeat;
	-ms-mask: url(images/images4186/mask.png) repeat;
	mask: url(images/images4186/mask.png) repeat;
}
.letter-container h2 a span {
	color: #fff;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
	-webkit-animation: sharpen 0.9s linear backwards;
	-moz-animation: sharpen 0.9s linear backwards;
	-ms-animation: sharpen 0.9s linear backwards;
	animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:hover{
	text-shadow: 0px 0px 40px #fff;
}
.letter-container h2 a span:nth-child(1) {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
	-webkit-animation-delay: 0.1s;
	-moz-animation-delay: 0.1s;
	-ms-animation-delay: 0.1s;
	animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	-ms-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(4) {
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	-ms-animation-delay: 0.3s;
	animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	-ms-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

@keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #fff;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #fff;
   	color: transparent;
 }
 100% {
    color: #fff;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-moz-keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #fff;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #fff;
   	color: transparent;
 }
 100% {
    color: #fff;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-webkit-keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #fff;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #fff;
   	color: transparent;
 }
 100% {
    color: #fff;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-ms-keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #fff;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #fff;
   	color: transparent;
 }
 100% {
    color: #fff;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}

</style>

 <div id="letter-container" class="letter-container">
				<h2>
					<a href="#">МОСКВА</a>
				</h2>
			</div>
<script type="text/javascript">
				$(function() {
					$("#letter-container h2 a").lettering();
				});
</script>
Нам понадобится применить изображение. Оно будет выполнять роль маски. Создайте белый квадрат размером 134х134 пикселя и загрузите его на свой сайт. Для этого воспользуйтесь кнопкой в правой панели.

Когда картинка будет загружена, узнайте ее путь. Для этого наведите на нее указатель мыши, нажмите правую кнопку и скопируйте URL в буфер обмена.
Вы получите путь.

Вставьте этот путь в стиль контейнера. Не забудьте убрать все лишнее, в том числе и папку mini:
.letter-container h2 a {
	text-align: center;
	font-size: 130px;
	line-height: 160px;
	display: block;
	padding-bottom: 30px;
	-webkit-mask: url(images/images4186/mask.png) repeat;
	-o-mask: url(images/images4186/mask.png) repeat;
	-moz-mask: url(images/images4186/mask.png) repeat;
	-ms-mask: url(images/images4186/mask.png) repeat;
	mask: url(images/images4186/mask.png) repeat;
}
Сохраните сайт и запустите. Вы увидите эффект размытия.

Эффект №5


Подсветка букв при наведении и изменение цвета контейнера. При этом остальные буквы становятся полупрозрачными. Чем светлее фон, тем хуже их видно.

Первый блок по-прежнему хранит в себе код скрипта Lettering.JS 0.6.1. Скопируйте во второй блок код:
<style>
.letter-container{
	border-bottom: 1px dashed rgba(255,255,255,0.3);
	border-top: 1px dashed rgba(255,255,255,0.3);
	margin: 20px;
	padding: 20px;
  	width:100%;
}
.letter-container h2{
	text-align: center;
}
.letter-container h2 a{
	text-align: center;
	padding: 20px;
	text-transform: uppercase;
}
.letter-container h2 a span{
	display: inline-block;
	background: #bfd4e2;
	color: #ecf0f2;
	text-shadow: 1px 1px 2px rgba(120,155,179,0.5);
	width: 200px;
	height: 200px;
	line-height: 200px;
	font-size: 100px;
	margin: 3px;
	cursor: pointer;
	-moz-border-radius:100px;
	-webkit-border-radius: 100px;
	border-radius: 50%;
	-webkit-box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 9px rgba(116,161,191,0.3) inset;
	-moz-box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 9px rgba(116,161,191,0.3) inset;
	box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 9px rgba(116,161,191,0.3) inset;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.letter-container h2 a:hover span{
	opacity: 0.3;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
}
/* Radial gradient, great intro: http://www.impressivewebs.com/css3-radial-gradient-syntax/ */
.letter-container h2 a span:hover{
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);
	-webkit-box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 0px #fedc3f inset, 0px 0px 100px 30px rgba(255,244,193,0.8);
	-moz-box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 0px #fedc3f inset, 0px 0px 100px 30px rgba(255,244,193,0.8);
	box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 0px #fedc3f inset, 0px 0px 100px 30px rgba(255,244,193,0.8);
	color: #ff8624;
	text-shadow: 1px 1px 2px rgba(166,97,41,0.5), 1px 1px 1px #e66212, 3px 3px 1px #fdff64, 4px 4px 6px #ff7420;
	background: #fedc3f; /* fallback for non-supporting browsers */
	background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
	background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
	background-image: -ms-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
	background-image: -o-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
	background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
}


</style>

 <div id="letter-container" class="letter-container">
				<h2>
					<a href="#">HELLO</a>
				</h2>
			</div>
<script type="text/javascript">
				$(function() {
					$("#letter-container h2 a").lettering();
				});
</script>
Фон изменяйте для области или блока, в котором размещен виджет «HTML-код».

Заключение
Даже при минимальных знаниях CSS вы сможете разобраться в стиле и изменять размеры и цвета. В конечном итоге это даст вам превосходный инструмент для управления вашими заголовками, делая их яркими и привлекательными.
15 июня 2017, 10:45    Ivan Web-дизайн 0    2 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.