Создайте социальные символы с помощью CSS

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

Просмотреть демо

Типовое повышение, используемое в создании символа NetVibes.

<div id="netvibes">
<div class="netvibes s128 fl">
<span>+</span>
</div>
<div class="netvibes s64 fl">
<span>+</span>
</div>
<div class="netvibes s32 fl">
<span>+</span>
</div>
 </div> 
  1. <div id="netvibes">
  2. <div class="netvibes s128 fl">
  3. <span>+</span>
  4. </div>
  5. <div class="netvibes s64 fl">
  6. <span>+</span>
  7. </div>
  8. <div class="netvibes s32 fl">
  9. <span>+</span>
  10. </div>
  11. </div>

СSS для какие на нужно исполюзувать для создания символов.

.netvibes {
background: rgba(104,219,33,1);
background : -webkit-gradient(linear, left topleft bottombottom, from(rgba(104,219,33,1)), to(rgba(19,130,16,1)));
background : -moz-linear-gradient(top, rgba(104,219,33,1), rgba(19,130,16,1));
color#fff;
text-aligncenter;
border-color#0c5f0c;
border-stylesolid;
font-weightbold;
font-size178px;
box-shadow: 0 0 4px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

#netvibes .s64 span{
font-size88px;
}

#netvibes .s32 span{
font-size42px;
}

.s128 {
width128px;
height128px;
border-width3px;
line-height128px;
text-shadow: 0 -2px 0 rgba(0,0,0,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
}

.s64 {
width64px;
height64px;
border-width1px;
line-height64px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
border-radius: 5px;
-moz-border-radius: 5px;
}

.s32 {
width32px;
height32px;
border-width1px;
line-height32px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
border-radius: 3px;
-moz-border-radius: 3px;
} 

Я также создал inkedin, urkot, delicious, flickr и google. Проверьте демонстрационный пример и скажите мне, что Вы хотите добавить.

Я использую новые свойства border-radiustext-shadow, box-shadow , gradients в создании символов.


Категория: CSS Теги: 

Популярные записи:

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

Один комментарий "Создайте социальные символы с помощью CSS"

  1. Проблема в том, что только только браузеры поддерживают css3, и не все пользователи меняют их

Оставить комментарий или два

Отправить коментарий

Test

Яндекс.Метрика