Создание кнопок на CSS3, подобно кнопкам, созданным в Photoshop
Сначала я покажу вам, что мы будем создавать. А потом я покажу шаг за шагом, как создавать кнопки, используя только HTML и CSS3 свойства.
Предварительный просмотр
Вот как выглядит финальный результат
Как видите, кнопка очень похожа на отлично проработанную кнопку, сделанную в Photoshop. Теперь поговорим о коде.
HTML
Начнем мы с создания контейнера для нашей кнопки
Code
<div class="button">
<p>Click Me</p>
</div>
CSS
А вот и все стили:
Code
body{
background:#f3f3f3;
}
p {
margin:0;
padding:0;
}
.button {
/*---- Настройки кнопки ----*/
width:200px;
height:30px;
background:#85bde1; /* fallback color for older browsers */
padding:20px 0;
margin:50px;
/*---- Настройки текста ----*/
font-family:Arial, sans-serif;
font-weight:bold;
font-size:20pt;
text-align:center;
color:#444;
/*---- Эффекты текста ----*/
text-shadow: 1px 1px 0px #bfdef3;
/*---- Закругленные углы ----*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*---- Градиент для кнопки ----*/
background-image: linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);
background-image: -o-linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);
background-image: -moz-linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);
background-image: -webkit-linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);
background-image: -ms-linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #85bde1),
color-stop(1, #d8e6f0)
);
/*---- Внутренняя и внешняя тени ----*/
-moz-box-shadow: inset 0px 1px 1px #999, 0px 2px 1px #fff;
-webkit-box-shadow: inset 0px 1px 1px #999, 0px 2px 1px #fff;
box-shadow: inset 0px 1px 1px #999, 0px 2px 1px #fff;
}
Заключение
Как видите, я прокомментировал всех области, которые настраивал в CSS3 для создания кнопки. Теперь, вместо того, чтобы создавать реальное изображение в Photoshop, вы сможете загружать ваши страницы быстрее и с меньшим количеством HTTP-запросов, что позволит вашему сайту гораздо быстрее загружаться.
Если вы не понимаете некоторые моменты CSS3 синтаксиса, вы можете узнать больше, прочитав статьи на этом сайте о свойстве box-shadow, а также о многих других свойствах CSS3.
Если у вас есть какие-либо вопросы, пожалуйста, напишите их ниже.
Перевод: PS-Studio.Info
Всего комментариев: 0
Оставь комментарий первым!
Оставь комментарий первым!
