RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

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

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

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

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

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

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

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

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

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

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

FolderFolder

Универсальный html шаблон Folder, на главной странице располагается слайдер с миниатюрами и комментариями к изображению, есть галерея......

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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