градиент css

Опубликовано Апр 28, 2012 в HTML/CSS, Создание сайтов | Нет комментариев

градиент css

С внедрением CSS3  верстка страниц стала удобнее и легче, многие узкие места, такие как градиенты, с приходом CSS3 стали уходить в прошлое. Многие современные браузеры поддерживают возможность создания градиента, прописав всего пару строчек кода в CSS стилях, раньше приходилось создавать градиентные картинки, помещая их на сервер, а потом описывать правила для данных картинок в стилях CSS, можно создать градиент любой сложности. CSS3 градиенты имеют преимущество перед картинками, так как уменьшают время загрузки страницы, а также ее размер. Кроме того для их редактирования не нужны сторонние программы такие как “Photoshop”, вместо этого можно, просто, поменять исходный код.  Проблема заключается в том, что данный стандарт поддерживаю не все браузеры, а те, кто поддерживает, делают это не стандартизованными правилами. Так чтоб создать кроссбраузерный градиент нужно прописать правила в CSS стилях индивидуально для каждого браузера. Здесь на помощь приходят сервисы и среды разработки, которые могут автоматизировать процесс создания градиента, который будет отображаться во всех, основных, браузерах одинаково.
Одним из таких сервисов является сервис: “CSS gradient generator”, указав нужные параметры сервис сгенерирует нужный код для градиента, останется, только, скопировать и вставить этот код в файл стилей.
На примере создания ссылки в виде кнопки я попытаюсь показать работу данного инструмента.
Прежде всего, нужно добавить class для ссылки, из которой мы хотим сделать кнопку и подключить файл стилей.

<!DOCTYPE html>
<html>
<head>
    <title>Background</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
    <div>
        <a class="button green" href="#">Buy</a>
    </div>
</body>
</html>


Следующим шагом зададим основные настройки для нашей кнопки.

.button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: arial, sans serif;
    padding: 11px 35px 11px 35px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


Переходим на сайт: “CSS gradient generator” и генерируем нужный цвет градиента.

Копируем с генерированный код и скачиваем картинку, которая нужна для совместимости с IE в которых не реализован градиент.

Осталось вставить скопированный код в файл стилей.

 
.button { 
         text-decoration: none; color: white; font-size: 18px; 
         font-family: arial, sans serif; 
         padding: 11px 35px 11px 35px; 
         -moz-border-radius: 10px; 
         -webkit-border-radius: 10px; 
         border-radius: 10px;
         -o-background-size: 100% 100%; 
         -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; 
}
.button { 
  text-decoration: none; color: white; 
  font-size: 18px; font-family: arial, sans serif; 
  padding: 11px 35px 11px 35px; 
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  border-radius: 10px;
  -o-background-size: 100% 100%; 
  -moz-background-size: 100% 100%; 
  -webkit-background-size: 100% 100%; }
.green { 
  border: 1px solid green; 
  background: darkgreen url("gradient-g-bg.png") repeat-x top; 
  background-size: 100% 100%;
  background: -webkit-gradient( linear, left top, left bottom, from(darkseagreen),
               to(darkgreen) ); 
  background: -webkit-linear-gradient( top, darkseagreen, darkgreen );  
  background: -moz-linear-gradient( top, darkseagreen, darkgreen ); 
  background: -o-linear-gradient( top, darkseagreen, darkgreen );
  background: linear-gradient( top, darkseagreen, darkgreen ); 
}


Посмотреть пример Скачать пример

Оставить комментарий

Ваш e-mail не будет опубликован.