Автор

04 04.2013
Эффект размытия элементов сайта на jQuery

Эффект размытия элементов сайта на jQuery


 

Порой на сайте хочется выделить красиво какую либо информацию, тем самым привлечь внимание пользователя к необходимой информации. Все это можно сделать с помощью различных эффектов, в данном уроке мы рассмотрим как создать эффект размытия элементов сайта сайта с помощью CSS3 и jQuery.  Идея заключается в организации набора блоков с текстом, которые будут размываться и уменьшаться в масштабе при наведении курсора мыши на один из них. Блок, который получает фокус ввода, наоборот будет увеличиваться.

 

ДЕМО
ИСХОДНИКИ

 

В результате получается эффект "фокусирования", который помогает выделить пункт с курсором мыши на нем. Необходимо заметить что переходи и различные трансформации не поддерживают старые браузеры, по этому для корректного отображения используйте браузеры Safari или Chrome (где трансформации выглядят наилучшим образом).

Для начала рассмотрим HTML-структуру, разметки которой будет иметь секцию, в которой располагаются статьи. Каждый пункт статьи имеет заголовок и абзац с описанием:

<section id="ib-container">
    <article>
        <header>
            <h3><a href="#">Заголовок</a></h3>
            <span>Некоторый текст</span>
        </header>
        <p>Описание</p>
    </article>
    <article>
        <!-- ... -->
    </article>
    <!-- ... -->
</section>

 

Как видите все достаточно просто, теперь разберемся со стилями CSS, в котором основной контейнер имеет фиксированную ширину и центрирован:

.ib-container{
	position: relative;
	width: 800px;
	margin: 30px auto;
	display: block;
}

 

Далее избавимся от обтекания текста (наши статьи будут плавающими блоками) с помощью псевдо элементов :before и :after:

.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}

 


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

.ib-container article{
	display: block;
	width: 140px;
	height: 220px;
	background: #fff;
	cursor: pointer;
	float: left;
	border: 10px solid #fff;
	text-align: left;
	text-transform: none;
	margin: 15px;
	z-index: 1;
	box-shadow:
		0px 0px 0px 10px rgba(255,255,255,1),
		1px 1px 3px 10px rgba(0,0,0,0.2);
	-webkit-transition:
		opacity 0.4s linear,
		-webkit-transform 0.4s ease-in-out,
		box-shadow 0.4s ease-in-out;
	-moz-transition:
		opacity 0.4s linear,
		-moz-transform 0.4s ease-in-out,
		box-shadow 0.4s ease-in-out;
	-o-transition:
		opacity 0.4s linear,
		-o-transform 0.4s ease-in-out,
		box-shadow 0.4s ease-in-out;
	-ms-transition:
		opacity 0.4s linear,
		-ms-transform 0.4s ease-in-out,
		box-shadow 0.4s ease-in-out;
	transition:
		opacity 0.4s linear,
		transform 0.4s ease-in-out,
		box-shadow 0.4s ease-in-out;

}

 

Чтобы красочно все отображалось для браузеров Webkit добавляем:

-webkit-backface-visibility: hidden

 

Затем зададим стили для текстовых элементов и улучшим типографику. Цвет и тень каждого элемента будут соответствовать:

.ib-container h3 a{
	font-size: 16px;
	font-weight: 400;
	color: #000;
	color: rgba(0, 0, 0, 1);
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
	opacity: 0.8;
}
.ib-container article header span{
	font-size: 10px;
	font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
	padding: 10px 0;
	display: block;
	color: #FFD252;
	color: rgba(255, 210, 82, 1);
	text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
	text-transform: uppercase;
	opacity: 0.8;
}
.ib-container article p{
	font-family: Verdana, sans-serif;
	font-size: 10px;
	line-height: 13px;
	color: #333;
	color: rgba(51, 51, 51, 1);
	text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
	opacity: 0.8;
}

 

Теперь добавим переход для всех трех селекторов. Снова мы будем использовать три свойства: непрозрачность, тень текста и цвет:

.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
	-webkit-transition:
		opacity 0.2s linear,
		text-shadow 0.5s ease-in-out,
		color 0.5s ease-in-out;
	-moz-transition:
		opacity 0.2s linear,
		text-shadow 0.5s ease-in-out,
		color 0.5s ease-in-out;
	-o-transition:
		opacity 0.2s linear,
		text-shadow 0.5s ease-in-out,
		color 0.5s ease-in-out;
	-ms-transition:
		opacity 0.2s linear,
		text-shadow 0.5s ease-in-out,
		color 0.5s ease-in-out;
	transition:
		opacity 0.2s linear,
		text-shadow 0.5s ease-in-out,
		color 0.5s ease-in-out;
}

 

Теперь самое интересное, рассмотрим класс blur будет использоваться для всех смежных пунктов рядом с тем, на котором располагается курсор мыши. Будем немного уменьшать масштаб пунктов и добавлять большую белую тень, чтобы сделать пункт размытым. Также немного уменьшим непрозрачность:

.ib-container article.blur{
	box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0.7;
}

 

Чтобы сделать текстовой элемент размытым, установим прозрачный цвет с помощью свойстваrgba и увеличим дистанцию размытия тени текста:

.ib-container article.blur h3 a{
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
	color: rgba(0, 0, 0, 0);
	opacity: 0.5;
}
.ib-container article.blur header span{
	text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
	color: rgba(255, 210, 82, 0);
	opacity: 0.5;
}
.ib-container article.blur  p{
	text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
	color: rgba(51, 51, 51, 0);
	opacity: 0.5;
}

 

Также установим большое значение свойства z.index для гарантированного вывода данного пункта поверх остальных:

.ib-container article.active{
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
	box-shadow:
		0px 0px 0px 10px rgba(255,255,255,1),
		1px 11px 15px 10px rgba(0,0,0,0.4);
	z-index: 100;
	opacity: 1;
}

 

Устанавливаем непрозрачность всех текстовых элементов равной 1:

.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
	opacity; 1;
}

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

14 07.2014
Эффект размытия элементов сайта на jQuery

Все чаще я замечаю использования видео для фона сайта, дизайнеров уже не смущает такой нюанс как весомость сайта, с современным интернетом такой вопрос уже не стоит остро, по этому дизайнеры разрешают себе фантазировать в любых направлениях, не является и исключением "живые" фоны сайта, а именно использование видео в качестве фона. В данном уроке мы рассмотрим один из замечательных примеров реализации фонового видео в виде морской глубины с помощью небольших манипуляций HTML5.


21 03.2013
Эффект размытия элементов сайта на jQuery

В этой статье подготовлены 8 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код.


28 05.2017
Эффект размытия элементов сайта на jQuery

Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.


19 04.2013
Эффект размытия элементов сайта на jQuery

Создавая сайт необходимо помнить о всем мелочах, ведь именно они бросаются в глаза первыми, как бы это странно не звучало. Именно маленькая деталь может стать залогом успеха или ее отсутствие обернется вам полным провалом. В сегодняшнем уроке речь пойдет о создании индикатора загрузки, или как их еще называют индикатор прогрузки. Если вы используете медленный интернет, то соответственно и элементы на странице загружаются медленно. Если вы разработчик, то вы можете скрасить загрузку элементов на вашем сайте с помощью красивого индикатора.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close