qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Социальная панель на css3

Социальная панель на css3
Просмотров: 969  Скачан: 201 раз  Комментариев в теме: 0

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели. Панель раскрывается с любой стороны и имеет вид прямоугольной и округленный. Социальная панель отлично работает во всех современных браузерах, в IE отображается неверно.

Шаг 1 - создание разметки

 

HTML

<div class="container">
    <div class="cell ">
        <div class="share-wrapper left">
            <div class="rc10 share-action icon-share"></div>
            <div class="share-container rc10">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper top">
        <div class="rc10 share-action icon-share"></div>
            <div class="share-container rc10">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="share-wrapper below">
        <div class="rc10 share-action icon-share"></div>
            <div class="share-container rc10 ">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper bottom">
        <div class="rc10 share-action icon-share"></div>
            <div class="share-container rc10">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper right">
        <div class="rc10 share-action icon-share"></div>
            <div class="share-container rc10">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper left">
        <div class="share-action icon-share"></div>
            <div class="share-container">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper top">
        <div class="share-action icon-share"></div>
            <div class="share-container">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper below">
        <div class="share-action icon-share"></div>
            <div class="share-container">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper bottom">
        <div class="share-action icon-share"></div>
            <div class="share-container">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper right">
        <div class="share-action icon-share"></div>
            <div class="share-container">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper left">
        <div class="rc50 share-action icon-share"></div>
            <div class="share-container rc50">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper top">
        <div class="rc50 share-action icon-share"></div>
            <div class="share-container rc50">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="share-wrapper below">
        <div class="rc50 share-action icon-share"></div>
            <div class="share-container rc50">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper bottom">
            <div class="rc50 share-action icon-share"></div>
            <div class="share-container rc50">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
    <div class="cell ">
        <div class="share-wrapper right">
        <div class="rc50 share-action icon-share"></div>
            <div class="share-container rc50">
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
            </div>
        </div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if gte IE]>
    <link rel="stylesheet" href="css/style_IE.css" media="screen" type="text/css" />
<![endif]-->
Материалы по теме:

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

Отличная кнопка на css3, кнопка реально классная и удобная, да и привлекает глаза посетителя....
Интересные публикации:

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Full Page Image GalleryFull Page Image Gallery

Красивая галерея для вашего сайта на css и JQuery, если вам нужна красивая галерея и вам хочется, что-то необычное......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить