Сегодня я экспериментирую с 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>
- <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>
СSS для какие на нужно исполюзувать для создания символов.
.netvibes {
background: rgba(104,219,33,1);
background : -webkit-gradient(linear, left top, left 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-align: center;
border-color: #0c5f0c;
border-style: solid;
font-weight: bold;
font-size: 178px;
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-size: 88px;
}
#netvibes .s32 span{
font-size: 42px;
}
.s128 {
width: 128px;
height: 128px;
border-width: 3px;
line-height: 128px;
text-shadow: 0 -2px 0 rgba(0,0,0,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
}
.s64 {
width: 64px;
height: 64px;
border-width: 1px;
line-height: 64px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
border-radius: 5px;
-moz-border-radius: 5px;
}
.s32 {
width: 32px;
height: 32px;
border-width: 1px;
line-height: 32px;
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 в создании символов.





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