ВСЕ ДЛЯ НОВИЧКАЗдесь Вы найдете проблемы, с какими может столкнутся начинающий фрилансер.

Использование СSS3 для кнопок

Автор admin мая 14, 2010 Просмотров: 98

Что когда-то требовало фонового изображения теперь может быть создано с помощью

обычного CSS. Поскольку современные браузеры имеют возможность показывать тень,

градиенты, закругленные углы, тени в тексте. Мы можем, наконец, воспользоваться

этой возможностью при создании визуальных элементов, таких как кнопки!

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>CSS3 кнопка </title>
 <style>
 /* CUSTOM FONT */
 @font-face {
 font-family: 'EfonRegular';
/*здесь мы указываем название шрифта*/
 src: url('font/EFON-webfont.eot');
/*здесь путь к описывающему его файлу*/
 src: local('EfonRegular'),
 url('font/EFON-webfont.woff') format('woff'),
url('font/EFON-webfont.ttf') format('truetype'),
url('font/EFON-webfont.svg#webfont') format('svg');
 font-weight: normal;
/*здесь же можно указать другие типичные свойства шрифта.*/
 font-style: normal;
 }

 body {
 width: 400px;
 margin: 200px auto;
 background: #666;
 }

 .button {
 width: 400px;
 height: 100px;
 line-height: 100px;
 color: white;
 text-decoration: none;
 font-size: 50px;
 font-family: helvetica, arial;
 font-weight: bold;
 display: block;
 text-align: center;
 position: relative;

 /* BACKGROUND GRADIENTS */
 background: #014464;
 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E),
 color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));

 /* BORDER RADIUS */
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 border: 1px solid #368DBE;
 border-top: 1px solid #c3d6df;

 /* TEXT SHADOW */

 text-shadow: 1px 1px 1px black;

 /* BOX SHADOW */
 -moz-box-shadow: 0 1px 3px black;
 -webkit-box-shadow: 0 1px 3px black;
 box-shadow: 0 1px 3px black;
 }

 /* WHILE HOVERED */
 .button:hover {
 background: #014464;
 background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85),
color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
 }
 /* WHILE BEING CLICKED */
 .button:active {
 -moz-box-shadow: 0 2px 6px black;
 -webkit-box-shadow: 0 2px 6px black;
 }
 /* FONT GLYPH (MOSTLY FOR FUN) */
 .button:before {
 font-family: EfonRegular;
/*ну а здесь мы его уже используем*/ content: 'v';
 color: #09232F;
 font-size: 90px;
 float: left;
 margin-left: 35px;
 margin-right: -10px;
 text-shadow: 0 1px 0 #4190AF;
 }
 </style>
</head>
<body>
<a href="#"> Follow Me </a>
</body>
</html>

Follow Me

Правда, вероятно было бы разумнее использовать крошечные изображения Twitter-птички .
Но цель была добиться этого эффекта в CSS! Что вы думаете?
Справочник по css3 можно посмотреть http://zapomni.ru/css/

Download Source Files

Demo View It Online

Download

Demo

Мой блог находят по следующим фразам