Автор

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

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


 

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

 

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

Очередная выдвижная панель с любым необходимым для вас контентом! В примерах 3 варианта: фиксированная, выезжающая с лева и третья выезжающая с права. В исходных файлах есть все варианты СSS. Мы рассмотрим один с фиксированной кнопкой и панелью.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close