Эффект градиента с использованием CSS
Хотите создавать причудливые заголовки без использования программы Photoshop? Вот простой трюк CSS, который поможет Вам создавать эффекты градиента с помощью изображения PNG. (только код CSS без использования Javascript или Flash).
Все что для этого нужно, это пустой тег <span> в заголовке и применение наложения фона изображения с помощью CSS свойства position:absolute. Этот прием был опробован на большинстве веб браузерах: Firefox, Safari, Opera и даже Internet Explorer 6. Продолжайте читать эту статью, чтобы узнать, как работает данный способ.
Преимущества;
- Этот способ основан на CSS коде без использования JavaScript или Flash. Он работает в большинстве браузеров, включая IE6 (PNG рубить требуется).
- Он идеально подходит для создания заголовков рубрик. Вы не используете программу Photoshop, что экономит Ваше время и трафик.
- Вы можете использовать любую гарнитуру шрифта при этом размер шрифта остается масштабируемым.
Как же работает данный способ?
Способ очень простой. Мы просто добавляем 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>Применение текстуры
В качестве фонового изображения могут использоваться любые текстуры. Вот пример использования текстуры «зебра». Все зависит от вашего воображения!
Недостатки;
- Этот способ пригоден только для элементов со сплошным цветом. Цвет градиентного изображения должен совпадать с цветом фона вашей страницы.
- Для работы в IE6 необходимо применение специального хака.
- Если ваше градиентное изображение будет выше текста заголовка, то операция выделения текста будет невозможна.
Источник: www.webdesignerwall.com.
Перевод: explorer-soft.com.
