Автор

Анимированные иконки соц. сетей на 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);
}

 

Вот и всё!

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Сегодняшний пример - это простой шаблон. На больших устройствах контент разделяется на два основных контейнера.


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

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


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close