В данном уроке мы создадим простой эффект размытия текстовых пунктов. Идея заключается в организации набора блоков с текстом, которые будут размываться и уменьшаться в масштабе при наведении курсора мыши на один из них. Блок, который получает фокус ввода, наоборот будет увеличиваться. В результате получается эффект "фокусирования", который помогает выделить пункт с курсором мыши на нем. Для эффекта будут использоваться переходы CSS3 и немного jQuery для применения соответствующих классов. Так как переходы CSS3 не поддерживаются в старых браузерах, то демонстрацию лучше всего смотреть в Safari или Chrome (где трансформации выглядят наилучшим образом). Разметка HTML Структура разметки будет иметь секцию, в которой располагаются статьи. Каждый пункт статьи имеет заголовок и абзац с описанием: 01 <section class="ib-container" id="ib-container"> 02 <article> 03 <header> 04 <h3><a href="#">Заголовок</a></h3> 05 <span>Некоторый текст</span> 06 </header> 07 <p>Описание</p> 08 </article> 09 <article> 10 <!-- ... --> 11 </article> 12 <!-- ... --> 13 </section> CSS Основной контейнер имеет фиксированную ширину и центрирован: 1 .ib-container{ 2 position: relative; 3 width: 800px; 4 margin: 30px auto; 5 display: block; 6 } Избавимся от обтекания текста (наши статьи будут плавающими блоками) с помощью псевдо элементов :before и :after: 1 .ib-container:before, 2 .ib-container:after { 3 content:""; 4 display:table; 5 } 6 .ib-container:after { 7 clear:both; 8 } Теперь определим стили для пунктов статей. Они будут плавающими блоками и иметь две тени, из которых светлая будет распространяться на большем расстоянии. Также добавим переход трех свойств: тени, трансформации и непрозрачности. 01 .ib-container article{ 02 display: block; 03 width: 140px; 04 height: 220px; 05 background: #fff; 06 cursor: pointer; 07 float: left; 08 border: 10px solid #fff; 09 text-align: left; 10 text-transform: none; 11 margin: 15px; 12 z-index: 1; 13 box-shadow: 14 0px 0px 0px 10px rgba(255,255,255,1), 15 1px 1px 3px 10px rgba(0,0,0,0.2); 16 -webkit-transition: 17 opacity 0.4s linear, 18 -webkit-transform 0.4s ease-in-out, 19 box-shadow 0.4s ease-in-out; 20 -moz-transition: 21 opacity 0.4s linear, 22 -moz-transform 0.4s ease-in-out, 23 box-shadow 0.4s ease-in-out; 24 -o-transition: 25 opacity 0.4s linear, 26 -o-transform 0.4s ease-in-out, 27 box-shadow 0.4s ease-in-out; 28 -ms-transition: 29 opacity 0.4s linear, 30 -ms-transform 0.4s ease-in-out, 31 box-shadow 0.4s ease-in-out; 32 transition: 33 opacity 0.4s linear, 34 transform 0.4s ease-in-out, 35 box-shadow 0.4s ease-in-out; 36 37 } Для браузеров Webkit также добавим 1 -webkit-backface-visibility: hidden для того, чтобы избежать мерцания. Теперь зададим стили для текстовых элементов и улучшим типографику. Цвет и тень каждого элемента будут соответствовать: 01 .ib-container h3 a{ 02 font-size: 16px; 03 font-weight: 400; 04 color: #000; 05 color: rgba(0, 0, 0, 1); 06 text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); 07 opacity: 0.8; 08 } 09 .ib-container article header span{ 10 font-size: 10px; 11 font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 12 padding: 10px 0; 13 display: block; 14 color: #FFD252; 15 color: rgba(255, 210, 82, 1); 16 text-shadow: 0px 0px 0px rgba(255, 210, 82, 1); 17 text-transform: uppercase; 18 opacity: 0.8; 19 } 20 .ib-container article p{ 21 font-family: Verdana, sans-serif; 22 font-size: 10px; 23 line-height: 13px; 24 color: #333; 25 color: rgba(51, 51, 51, 1); 26 text-shadow: 0px 0px 0px rgba(51, 51, 51, 1); 27 opacity: 0.8; 28 } Теперь добавим переход для всех трех селекторов. Снова мы будем использовать три свойства: непрозрачность, тень текста и цвет.. 01 .ib-container h3 a, 02 .ib-container article header span, 03 .ib-container article p{ 04 -webkit-transition: 05 opacity 0.2s linear, 06 text-shadow 0.5s ease-in-out, 07 color 0.5s ease-in-out; 08 -moz-transition: 09 opacity 0.2s linear, 10 text-shadow 0.5s ease-in-out, 11 color 0.5s ease-in-out; 12 -o-transition: 13 opacity 0.2s linear, 14 text-shadow 0.5s ease-in-out, 15 color 0.5s ease-in-out; 16 -ms-transition: 17 opacity 0.2s linear, 18 text-shadow 0.5s ease-in-out, 19 color 0.5s ease-in-out; 20 transition: 21 opacity 0.2s linear, 22 text-shadow 0.5s ease-in-out, 23 color 0.5s ease-in-out; 24 } Класс blur будет использоваться для всех смежных пунктов рядом с тем, на котором располагается курсор мыши. Будем немного уменьшать масштаб пунктов и добавлять большую белую тень, чтобы сделать пункт размытым. Также немного уменьшим непрозрачность: 1 .ib-container article.blur{ 2 box-shadow: 0px 0px 20px 10px rgba(255,255,255,1); 3 -webkit-transform: scale(0.9); 4 -moz-transform: scale(0.9); 5 -o-transform: scale(0.9); 6 -ms-transform: scale(0.9); 7 transform: scale(0.9); 8 opacity: 0.7; 9 } Чтобы сделать текстовой элемент размытым, установим прозрачный цвет с помощью свойства rgba и увеличим дистанцию размытия тени текста: 01 .ib-container article.blur h3 a{ 02 text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9); 03 color: rgba(0, 0, 0, 0); 04 opacity: 0.5; 05 } 06 .ib-container article.blur header span{ 07 text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9); 08 color: rgba(255, 210, 82, 0); 09 opacity: 0.5; 10 } 11 .ib-container article.blur p{ 12 text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9); 13 color: rgba(51, 51, 51, 0); 14 opacity: 0.5; 15 } Пункт, на котором располагается курсор мыши, будет немного увеличен, и для него будет выровнена тень. Также установим большое значение свойства z.index для гарантированного вывода данного пункта поверх остальных: 01 .ib-container article.active{ 02 -webkit-transform: scale(1.05); 03 -moz-transform: scale(1.05); 04 -o-transform: scale(1.05); 05 -ms-transform: scale(1.05); 06 transform: scale(1.05); 07 box-shadow: 08 0px 0px 0px 10px rgba(255,255,255,1), 09 1px 11px 15px 10px rgba(0,0,0,0.4); 10 z-index: 100; 11 opacity: 1; 12 } Устанавливаем непрозрачность всех текстовых элементов равной 1: 1 .ib-container article.active h3 a, 2 .ib-container article.active header span, 3 .ib-container article.active p{ 4 opacity; 1; 5 } JavaScript Когда курсора мыши оказывается на статье, будем устанавливать ей класс active, а всем остальным пунктам - класс blur: 01 $(function() { 02 03 var $container = $('#ib-container'), 04 $articles = $container.children('article'), 05 timeout; 06 07 $articles.on( 'mouseenter', function( event ) { 08 09 var $article = $(this); 10 clearTimeout( timeout ); 11 timeout = setTimeout( function() { 12 13 if( $article.hasClass('active') ) return false; 14 15 $articles.not( $article.removeClass('blur').addClass('active') ) 16 .removeClass('active') 17 .addClass('blur'); 18 19 }, 65 ); 20 21 }); 22 23 $container.on( 'mouseleave', function( event ) { 24 25 clearTimeout( timeout ); 26 $articles.removeClass('active blur'); 27 28 }); 29 30 });