Эффект размытого фона для соц. закладок

JS 23.04.2013

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

ДЕМО

ИСХОДНИКИ

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

Используем для socialProfiles:>

Для начала необходимо подключить стили:

<link rel="stylesheet" href="assets/stylesheets/arthref.css">

Непосредственно инициализация плагина:

<script src="assets/javascripts/socialProfiles.js"></script>

$('.selectorClass').socialProfiles({
email: 'example@example.com',
behance: 'gokhun'
facebook: 'tolgaergin',
twitter: 'tolgaergin',
pinterest: 'tolga',
dribbble: 'bbb',
scoutzie: 'gokhun-guneyhan'
});

Используем для socialShare:

Подключаем стили:

<link rel="stylesheet" href="assets/stylesheets/arthref.css">

Подключаем и вызываем сам плагин:

<script src="assets/javascripts/socialShare.js"></script>

$('.selectorClass').socialShare({
social: 'blogger,delicious,digg,facebook,friendfeed,google,
linkedin,myspace,pinterest,reddit,stumbleupon,
tumblr,twitter,windows,yahoo'
});