All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок

Всё для компа

chat

Видео дня

Популярное

Реклама

Хочешь помочь проекту? Установи наш баннер!

Партнёры



Развлекательный портал по игре Dota 2. У нас вы первым узнаете о последних игровых новостях, сможете почитать интересные статьи и гайды, посмотреть стримы популярных комментаторов и многое другое.

Про-софт - сайт професионального софта. Ето сайт не только софта но также игровых дополнений, музыки, фильмов, игр для ПК а также читов для ПК игр. Постоянное обновление материалов и каждый день появляется чтото новенькое!

Авторизация


Реклама

Хочешь помочь проекту? Установи наш баннер!

Опрос

На сколько оцениваете сайт?

1. Лучший из лучших
2. Круто
3. отлично
4. пойдёт
5. так себе
6. О_о

Реклама

Хочешь помочь проекту? Установи наш баннер!

Популярные тэги

Комментарии

Счетчики

На сайте: 1
Прохожие: 1
Пользователей: 0
Статус:

Счётчик тИЦ и PR Rambler's Top100
HTML и DHTML [2] JavaScript [5]
Mootools [2] JQuery [22]
Разное [2] CSS [4]
PHP [1]
АвторАвтор: leonP4 | ДатаДата: 28.09.2010 |Голосов: 0


Стандартные кнопки, созданные через тег <button> или <input type="button">,
выглядят, конечно, хорошо, но попытка изменить их вид через стили
приводит к ужасному результату. Кнопки становятся приветом интерфейсам
десятилетней давности с их угловатостью (рис. 1). Разумеется, такая
метаморфоза возникает только при использовании свойств background и border, иными словами, нельзя изменить цвет фона кнопки и рамку вокруг нее.


Рис. 1. Исходная и измененная кнопка


Чтобы кардинально поменять вид кнопки можно воспользоваться
изображениями, но по сравнению с возможностями CSS 3 этот вариант теперь
кажется доморощенным.


За основу возьму оригинальную кнопку в браузере, которая содержит линейный вертикальный градиент и скругленные края.


Самое простое сделать закругление уголков, для чего используем свойство border-radius,
задавая ему нужный радиус скругления. Как обычно, работает не во всех
браузерах, поэтому придется добавлять полный комплект. В итоге
получается следующее.

Code

-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari 4 */
border-radius: 5px; /* IE 9, Safari 5, Chrome */

Вид кнопок в разных браузерах показан на рис. 2.

Рис. 2. Кнопки со скругленными уголками

В общем, все ожидаемо. Старые версии IE не поддерживают CSS 3, остальные корректно делают нужные мне уголки. Опера почему-то не отображает фон по умолчанию, как это делают другие браузеры, но про Оперу еще зайдет особый разговор.

Теперь самое интересное, делаем вертикальный линейный градиент. Для этого опять в ход пойдут индивидуальные стили для каждого браузера.

Firefox

Code

background: -moz-linear-gradient(#00BBD6, #EBFFFF);

В градиенте указывается исходная точка, угол градиента, начальный и конечный цвет. В нашем случае, когда градиент идет вертикально сверху вниз, достаточно задать только цвета, остальные параметры используются по умолчанию.

Chrome, Safari

Code

background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));

Здесь указывается тип градиента (linear), стартовая точка приложения градиента (левый верхний угол), финальная точка (левый нижний угол), а также начальный и конечный цвет.

Internet Explorer

Code

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');

Браузер IE идет своим путем и для разных эффектов применяет свойство filter, в том числе и для градиента. Здесь все тривиальнее, пишется только начальный и конечный цвет градиента.

Опера отдыхает, в ней градиенты еще не реализованы.

Собираем воедино все свойства для браузеров, уголков и градиентов (пример 1).

Пример 1. Кнопки с линейным градиентом

Code

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Кнопки</title>
  <style type="text/css">
  button.new {
  background: -moz-linear-gradient(#00BBD6, #EBFFFF);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');
  padding: 3px 7px;
  color: #333;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #666;
  }
  </style>
  </head>  
  <body>  
  <form action="">
  

<button>Исходная кнопка</button></p>
  

<button class="new">Новая кнопка</button></p>
  </form>  
  </body>  
</html>

Получилось довольно симпатично (рис. 3), но есть и явные отличия от первоначальной кнопки — она выглядит плоской, как доска.

Рис. 3. Вид кнопки с градиентом

Сделать кнопку нужной формы можно опять же градиентом, «играя» цветами. Двумя значениями градиента уже не обойтись, к счастью, Firefox и Safari предлагают решение.

Firefox

Code

background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

Вместо двух значений вставляем желаемое количество цветов, градиент будет плавно переходить от одного цвета к другому.

Chrome, Safari

Code

background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));

Параметр color-stop указывает точку приложения нового цвета. Значение варьируется от 0 до 1.

Пример 2. Кнопки с улучшенным градиентом

Code

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Кнопки</title>
  <style type="text/css">
  button.new {
  background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');
  padding: 3px 7px;
  color: #333;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #666;
  }
  </style>
  </head>  
  <body>  
  <form action="">
  

<button>Исходная кнопка</button></p>
  

<button class="new">Новая кнопка</button></p>
  </form>  
  </body>  
</html>

Результат примера показан на рис. 4.

Рис. 4. Градиент, какой надо градиент

Аналогично можно создавать любые другие градиенты на кнопке или другом элементе (рис. 5). Но это уже сделайте самостоятельно.


Рис. 5. Такие разные кнопки

Подведу итоги. Кнопку с градиентом и скругленными уголками без изображений сделать можно. Однако с браузерами разброд и шатание. Опера вообще не умеет работать с градиентами, в IE 9 наблюдается неприятный баг при сочетании градиента с уголками (рис. 6).


Рис. 6. Наложение фона на уголки в IE 9

Что ж, пока будем делать «красивости» для браузеров Firefox, Safari и Chrom.


Теги к статье:

| : css, Стили, Button, Кнопки
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Популярные файлыНовые файлы
Call of Duty 5: World at ...[ Скачали 67375 раз ]
Амфибии, Гайд по ассасина...[ Скачали 31758 раз ]
Амфибии, Гайд по шаманам.[ Скачали 30663 раз ]
cs 1.6 patch v48 full[ Скачали 29045 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17192 раз ]
Огромный пак глюков и баг...[ Скачали 12743 раз ]
civilization 5 скачать бе...[ Скачали 11941 раз ]
PW MP5[ Скачали 11147 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 10403 раз ]
Niko Bellic (нико белич) ...[ Скачали 10005 раз ]
Inkbound (2024/En/MULTI/R...[ Добавлен 13.04.2024 ]
The Planet Crafter (2024/...[ Добавлен 13.04.2024 ]
My Life: Farm Vet (2024/R...[ Добавлен 12.04.2024 ]
Headquarters: World War I...[ Добавлен 12.04.2024 ]
Ereban: Shadow Legacy (20...[ Добавлен 11.04.2024 ]
Broken Roads (2024/Ru/En/...[ Добавлен 11.04.2024 ]
Wallpapers Girls №1042[ Добавлен 11.04.2024 ]
Children of the Sun (2024...[ Добавлен 09.04.2024 ]
Wallpapers Girls №1041[ Добавлен 09.04.2024 ]
Wallpapers Girls №1040[ Добавлен 08.04.2024 ]