Панель социальных сетей для сайта на CSS3 | RUDEBOXСоциальные сети широко популярны в наши дни, сейчас мало кто может представить себя без них, это весьма удобная среда для общения пользователей, а там, где много пользователей, там заинтересован разработчик в привлечении аудитории. В данном уроке мы рассмотрим процесс построения панели социальных сетей для сайта с помощью css. По умолчанию панель будет создать эффект небольшой выпуклости, но при наведении курсора будет происходить небольшая 3d трансформация, что будет заметно радовать взор посетителя.

В демонстрации мы рассмотрели несколько вариантов, одна из которых плоская панель, а вторая с округлыми углами и с эффектом глянцевого покрытия.

Шаг 1. HTML

Разметка будет состоять из двух классов, класса » кнопка» и класса «иконка»:

В исходниках можно просмотреть пример второй разметки, она немного отличается от первой наличия span.

Панель социальных сетей для сайта на CSS3 | RUDEBOX

Шаг 2. CSS

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

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

Читайте также: