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

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

ОБСУЖДЕНИЕ

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

Социальная панель на css3
Просмотров: 862  Скачан: 179 раз  Комментариев в теме: 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]-->
Материалы по теме:

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на ...

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

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

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

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

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

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

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

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

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

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

WebDesignWebDesign

Стильный шаблон построенный на HTML5, в шапке располагается слайдер, по всей ширине страницы, есть портфолио......

Облако теговОблако тегов на css

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

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью JQuery...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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