Site icon Vavik96

Эффект градиента с использованием CSS

admin

Хотите создавать причудливые заголовки без использования программы Photoshop? Вот простой трюк CSS, который поможет Вам создавать эффекты градиента с помощью изображения PNG. (только код CSS без использования Javascript или Flash).

Все что для этого нужно, это пустой тег <span> в заголовке и применение наложения фона изображения с помощью CSS свойства position:absolute. Этот прием был опробован на большинстве веб браузерах: Firefox, Safari, Opera и даже Internet Explorer 6. Продолжайте читать эту статью, чтобы узнать, как работает данный способ.

Преимущества;

  1. Этот способ основан на CSS коде без использования JavaScript или Flash. Он работает в большинстве браузеров, включая IE6 (PNG рубить требуется).
  2. Он идеально подходит для создания заголовков рубрик. Вы не используете программу Photoshop, что экономит Ваше время и трафик.
  3. Вы можете использовать любую гарнитуру шрифта при этом размер шрифта остается масштабируемым.

Как же работает данный способ?

Способ очень простой. Мы просто добавляем 1 пиксельный градиент PNG (с альфа прозрачностью) перед текстом.

HTML

<h1><span></span>CSS Gradient Text</h1>

Ключевой пункт здесь: h1 { position: relative } и  h1 span { position: absolute }.

CSS

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Для работы в IE6

Так как IE6 не поддерживает прозрачность в PNG-24, то для решения данной проблемы необходимо использовать следующий код (добавьте данный код между тегами <head>):

CSS 

<!--[if lt IE 7]>

<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

jQuery вариант присоединения (для любителей семантики)

Если Вы не хотите иметь в заголовке пустые теги <span>, то можно использовать Javascript. Вот образец кода с использованием jQuery:

jQuery 

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

//prepend span tag to H1
$("h1").prepend("<span></span>");

});
</script>

Применение текстуры

В качестве фонового изображения могут использоваться любые текстуры. Вот пример использования текстуры «зебра». Все зависит от вашего воображения!

Недостатки;

  1. Этот способ пригоден только для элементов со сплошным цветом. Цвет градиентного изображения должен совпадать с цветом фона вашей страницы.
  2. Для работы в IE6 необходимо применение специального хака.
  3. Если ваше градиентное изображение будет выше текста заголовка, то операция выделения текста будет невозможна.

Демо   Исходники

Источник: www.webdesignerwall.com.
Перевод:  explorer-soft.com.

Exit mobile version