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



 

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'
});

 

Вот и все. Готово!

Материал взят из зарубежного источника - www.rudebox.org.ua/blur-background-social-share-plugin/www.script-tutorials.com/nice-css3-lightbox-gallery-with-jquery и представлен исключительно в ознакомительных целях.


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!