CSS3 советы – кнопки и закругленные изображения

Подробности

Создано 18.12.2011 14:47

Автор: Pawel Frankowski, Перевод: Евгений Гальчук

Просмотров: 863

CSS можно использовать во многих видах медиа; почти любое устройство, которое может отображать HTML или XML может отображать правила CSS. При помощи CSS, также можно быстро изменить любой рисунок или фотографию чем редактировать его в графических редакторах. Вот почему многие современные веб-сайты использует его.

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

Округленные изображения  CSS3

Чтобы получить эффект любого изображения с закругленными краями, вам не нужно использовать какую-либо программу, просто  вы будете использовать чистый CSS. Всё, что вам нужно сделать, это добавить один класс к ссылке изображения, например: class="rounded".

<a class="rounded" title="Заголовок" href="/ваша_ссылка">
    <img alt="Альтернативный текст" src="/ссылка_на_изображение">
</a>

Теперь добавьте css-правило, особенно если рисунок должен иметь заданный размер:

.rounded:link, .rounded:visited {
    border-radius: 5px 5px 5px 5px;
    display: block;
    height: 150px;
    margin-bottom: 15px;
    overflow: hidden;
    width:  280px;
} 

И теперь вы должны получить вот такое изображение:

Красивые CSS3 кнопки

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

Так что давайте сделаем два красивых стиля для кнопок (Очистить и Отправить), вот пример:

<input class="button red medium submit" type="reset"  value="Очистить">
<input class="button blue medium  submit" type="submit" value="Отправить">

А теперь добавим css-правила:

.button.medium {
    font-size: 120%;
    font-weight: bold;
    padding: 7px 16px;
}
.button.red {
    border-color: #9e0b0f;
    background: #e41d24;
    background: -moz-linear-gradient(top, #fb4e55 0%, #d7020a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fb4e55),  color-stop(100%, #d7020a));
    background: -webkit-linear-gradient(top, #fb4e55 0%, #d7020a 100%);
    background: -o-linear-gradient(top, #fb4e55 0%, #d7020a 100%);
    background: -ms-linear-gradient(top, #fb4e55 0%, #d7020a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#fb4e55', endColorstr='#d7020a', GradientType=0 );
    background:  linear-gradient(top, #fb4e55 0%, #d7020a 100%);
    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 rgba(0,  0, 0, 0.2);
}
.button.blue {
    border-color: #0076a3;
    background: #49b3fc;
    background: -moz-linear-gradient(top, #76c7ff 0%, #1da0fa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76c7ff),  color-stop(100%, #1da0fa));
    background: -webkit-linear-gradient(top,  #76c7ff 0%, #1da0fa 100%);
    background: -o-linear-gradient(top, #76c7ff 0%, #1da0fa 100%);
    background: -ms-linear-gradient(top, #76c7ff 0%, #1da0fa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#76c7ff', endColorstr='#1da0fa', GradientType=0 );
    background: linear-gradient(top, #76c7ff 0%, #1da0fa 100%);
    color: #fff !important;
    text-shadow: 0 -1px 0  rgba(0,0,0,.1);
}
.button.blue:hover { background: #76c7ff; }
.button.red:hover { background: #fb4e55; }
input[type="submit"], input[type="reset"] {
    cursor: pointer;
    margin: 0;
    outline: medium none;
}
.button {
    border: 1px solid #AAAAAA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 0 rgba(0, 0,  0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255,  0.3) inset;
    display: inline-block;
    font: 100% Arial, Helvetica,  sans-serif;
    text-decoration: none  !important;
    vertical-align: middle;    
}

Конечный результат должен быть следующим:

• < Назад
• Вперёд >