Автор

23 01.2016
Анимированные иконки соц. сетей на CSS3

Анимированные иконки соц. сетей на CSS3


В передыдущих уроках «Интересные кнопки поделиться в соцсетях на CSS3»  и «Анимация кнопки читать в Twitter на CSS3» я писал как можно сделать интересные и необычные кнопки для соцсетей, а самое главное, что без скриптов и на чистом CSS. Продолжая эту тему хочу поделиться очередной рпример оформления своего сайта!

ДЕМО

 

В этом уроке мы будем использовать изображение.

Вставляете скопированный код в нужное вам место на сайте

HTML

<div class="section_center">
        <div class="section_blok social-share fb">
            <span class="fb-inner"></span>
            <a class="cta fb" href="https://www.facebook.com/groups/ssdrus/">Like</a>
        </div>
        <div class="section_blok social-share tw">
            <span class="tw-inner"></span>
            <a class="cta tw" href="http://twitter.com/ssdru">Tweet</a>
        </div>
</div>

Теперь подключаем стили

CSS

.section_center {
  width: 200px;
  display: block;
}
.section_blok {
  display: block;
  width: 50px;
  float:left;
}
span {
  position: absolute;
  top: 7px;
  left: 16px;
  text-align: center;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: block;
}
span.fb-inner {
  background: no-repeat url('http://s-sd.ru/templates/new-ssd/images/sprite.png') -41px 0;
  width: 40px;
  height: 40px;
}
span.tw-inner {
  background: no-repeat url('http://s-sd.ru/templates/new-ssd/images/sprite.png') 0 0;
  width: 40px;
  height: 40px;
}
.social-share {
  width: 72px;
  height: 54px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.social-share:first-of-type {
  margin-right: 10px;
}
.social-share.fb {
  background: -webkit-gradient(radial, 37 56, 25, 36 190, 144, from(rgba(51, 88, 144, 0.99)), to(rgba(51, 88, 144, 0.99))), -webkit-gradient(radial, -10 72, 10, 310 -72, 72, from(rgba(54, 93, 152, 0.99)), to(rgba(54, 93, 152, 0.99))), -webkit-gradient(radial, 72 72, 20, -275 -72, 72, from(rgba(54, 93, 152, 0.99)), to(rgba(54, 93, 152, 0.99))) rgba(61, 105, 171, 0.99) !important;
  background: no-repeat url('http://vsxed.github.com/Social-Slides/sprite.png') 0 -47px;
}
.social-share.tw {
  background: -webkit-gradient(radial, 37 56, 25, 36 1, 144, from(rgba(56, 168, 186, 0.99)), to(rgba(56, 168, 186, 0.99))), -webkit-gradient(radial, -10 72, 10, 310 -72, 72, from(rgba(58, 175, 194, 0.99)), to(rgba(58, 175, 194, 0.99))), -webkit-gradient(radial, 72 72, 20, -275 -72, 72, from(rgba(58, 175, 194, 0.99)), to(rgba(58, 175, 194, 0.99))) rgba(76, 184, 201, 0.99) !important;
  background: no-repeat url('http://vsxed.github.com/Social-Slides/sprite.png') -73px -47px;
}
.social-share:hover > span {
  top: -29px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.social-share:hover > .cta {
  bottom: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.cta {
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 0;
  text-align: center;
  width: 72px;
  position: absolute;
  border-radius: 0 0 6px 6px;
  bottom: -60px;
  display: block;
  box-shadow: inset 0 1px 0 0 #ffffff, 0 -1px 0 0 rgba(0, 0, 0, 0.3);
  background-color: #e8e8e8;
  background-image: -webkit-linear-gradient(top left, #e8e8e8, #ffffff);
  background-image: -moz-linear-gradient(top left, #e8e8e8, #ffffff);
  background-image: -ms-linear-gradient(top left, #e8e8e8, #ffffff);
  background-image: -o-linear-gradient(top left, #e8e8e8, #ffffff);
  background-image: linear-gradient(top left, #e8e8e8, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#ffffff', GradientType=0);;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.cta.tw {
  color: rgba(58, 175, 194, 0.99);
}
.cta.fb {
  color: rgba(54, 93, 152, 0.99);
}

 

Вот и всё!

Пользуйтесь! Буду рад если это Вам поможет в осуществлении своих проектов!


vk.com/club.ssdru

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


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

19 03.2013
Анимированные иконки соц. сетей на CSS3

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


04 12.2015
Анимированные иконки соц. сетей на CSS3

Формат SVG делает сайт, более интересным. Это действительно много творческих возможностей для интересных эффектов на веб-сайт с использованием SVG. Сегодня мы хотели бы поделиться с вами двумя экспериментальными понятиями, которые используют анимацию, ставших популярными благодаря анимации на PlayStation 4 и Xbox одновременно.


18 04.2013
Анимированные иконки соц. сетей на CSS3

Индикатор прогресса является неотъемлемой частью почти любого сайта. Обычно он используется для отображения состояния загрузки или какого либо другого процесса на сайте. Делаете ли вы веб-приложение или просто сайт, наверняка вам потребуется данный элемент интерфейса. В данном уроке мы сделаем стильный и анимированный индикатор прогресса с помощью правил CSS3. Все выглядит достаточно эффектно и будет радовать взор посетителей во время загрузки. Вот как это будет выглядеть..


31 03.2013
Анимированные иконки соц. сетей на CSS3

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close