Градиентный текст с помощью CSS
Иногда бывают дни, когда не хватает времени, иногда бывают моменты, когда не хочется ничего выдумывать. Тогда приходят спасительный копи-пэйст!
В этом посте я не буду ничего исследовать, придумывать, обучать и выбирать. Просто поделюсь с вами ссылкой на замечательный пост дизайнера Nick La. Nick получит на свой пост очередной трекбек, а расслаблюсь ещё на пару дней.
Итак, если вы хотите создать градиентный заголовок не заморациваясь с картинками в Photoshop, вам поможет очень простой CSS трюк использующий картинку в формате PNG (никаких Javascript или Flash, только чистый CSS). Всё что вам нужно — это пустой тэг <span> в заголовочном тэге, который будет накладываться на буквы с помощью свойства position:absolute.Тестировано на Firefox, Safari, Opera, и даже на Internet Explorer 6.
Пример:
ГРАДИЕНТ С ПОМОЩЬЮ CSS
Как же это работает?
А очень просто. Рисуем в фотошопе градиент, в высоту шрифта и ширину 1-го пикселя, причём базовый цвет должен быть такой же как и фон у страницы, вверху прозрачность можно варьировать по своему усмотрению, внизу — полная прозрачность. С помощью CSS эта картинка множится по горизонтали и закрывает весь текст. А наложение происходит уже знакомым вам методом, правда тэг <span> здесь должен уже писаться перед текстом, но это дело верстальщика — можно сделать и по-другому. Главное — идея:
HTML
<h1><span></span>CSS Gradient Text</h1>
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;
}
Ну и поправка к Internet Explorer 6.
<!--[if lt IE 7]>
<style type="text/css">
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->
Автор так же предлагает маньякам валидности использовать jquery функцию для вставки тэга <span> в заголовок.
$(document).ready(function(){
$("h1").prepend("");
});
]]>deni2s]]>Nekotoroje vremja nazad ja opisal, kak ispoljzuju pohozhuju fishku (s Nick La ne znakom, sam pridumal) v svoih proektah (pravda na latishskom):
»http://web.hc.lv/kods/css/raks.....spidigumu/ )
]]>zigmat]]>Ну к сожалению с латышским мы на ты, только в рабочей среде и терминологии. За Ником я слежу ещё с его первого блога http://www.ndesign-studio.com, но про дизайнерскую стену совсем забыл. А если перейти к тому, что я хотел сказать, то – Спасибо, будем прикручивать
»]]>zigmat]]>Не по теме, но твои плагины работают под WP 2.3.1?
»]]>Олег]]>Здоровско!!! Мерси!
»]]>Alex]]>Здорово, спасибо! Только если там поправка для IE6, то должно быть <!–[if lt IE 6]>–>
»]]>Никита]]>zigmat, для своего WP 2.3.1 движка я слегка дописывал. А тот который выложен — нет.
»Alex, «lt» — означает знак меньше «<». Т. е. если IE версии меньшей чем 7.
]]>Alex]]>Спасибо, просто с толку сбил заголовок, что поправка именно к IE6
»]]>Artem.Chertov]]>Текстурирование уже давно не новость, но за статью спасибо. Повторение мать учения
»Метод плох тем, что текстура накладывается не только на текст, но и на фон заголовка.
]]>ICH_BIN_STROGIJ]]>
»]]>Максим Покровский]]>Хороший метод. Надо будет попробовать в очередной работе.
»]]>Олег]]>опечатка…. надо
»]]>Современная электроника » Blog Archive » Рынок электроники2]]>[...] электроники Не надо простых слов, просто пишите в темуРынок электроники Не надо простых слов, просто пишите в темуРынок [...]
»]]>Велосипедные фонари » Blog Archive » Фонари из китая4]]>[...] фонари производства китай, Гарантия доставкаВелосипедные фонари Приольные велосипедные фонари производства китай, [...]
»]]>Вася]]>Никита,проблема такая : я пишу CSS стиль на Denwer’e,фотошопа нет.Мне нужно сделать градиентную надпись логотипа сайта вот этим цветом #00e174.Шрифт размером 18px,сделал на мобильном пэйнте полоску png 1*18px я правильно понимаю?.И теперь нужно этот логотип прикрепить в див-блоке,который сам силами CSS градиентно залит,не робит это только в Опере,а Хром,Сафари,Мозилла,Комодо поддерживают нормально.Но ничего собственно не работает,логотип не окрашивается градиентно.Быстрее всего я неправильно путь прописываю в Денвере к gradient.png.Растолкуй самую нижнюю строку,это цвет чего именно?И зачем он если есть png файлик с цветом?
»h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
]]>Никита]]>PNG файл должен быть цвета фона с полупрозрачностью (у меня он белый). А то, о чём вы спрашиваете, это цвет текста заголовка.
»]]>Вася]]>В смысле в png цвет фона body или дива куда я хочу приклеить логотип?И про png еще,в мобильном редакторе можно нужный мне png сваять? например если цвет фона черный,а градиент нужен вертикальный то,то просто сохраняю полоску 1*18 px в формате png с уточнением полупрозрачность?
»]]>Никита]]>В смысле PNG того фона на котором расположен логотип. Касательно мобильного редактора не в курсе, не использую. Да просто сохраняете полоску цвета фона, но с градиентной полупрозрачностью.
»]]>Вася]]>Дружище,еще вопрос в общем нашаманил я градиен и радиуса для Геко,Вебкита,Эппла силами браузера без картинок png ,с Оперой сам понимаешь не работает такое.С компа все хорошо.Вопрос такие :
»1 Можно ли и трудно ли сделать скрипт опознающий ядро браузера и можно ли вследствие этого сделать для Оперы набор градиентных дивов-клонов.Т.е. чтобы если человек не с Оперы подключались дивы-градиенты css,a если с Оперы дивы-картинки.Это для того нужно чтобы люди не с Оперы траф не тратили зря,а те кто с Оперы наблюдали диз каким я задумал.
]]>Никита]]>Есть готовые скрипты распознающие браузеры, например у библиотеки jQuery. http://jquery.com
»Вообще насчёт Оперы я не понял, что у неё не работает?
]]>Вася]]>Нет поддержки градиентной заливки силами цсс,она градиент в картинках распознает.Я не прав?
»]]>Никита]]>http://dev.opera.com/articles/.....gradients/
»]]>Вася]]>А теперь мне нужно сделать градиентные дивы для отображения в мобильных телефонах.
»Я правильно понимаю,что телефоны видят градиент только на png,gif и прочих файлах,т.е. только на картинках?Или есть способы оформления градиентных дивов без картинок, именно для телефонов?
Если на картинках то какой размер у нее должен быть?
]]>Никита]]>Всё зависит от мобильного телефона. Браузеры же там тоже разные. Opera Mobile уже поддерживает большую часть CSS3. Насчёт остальных надо всё тестировать. У меня небыло ещё достаточного опыта. Если картинка, то размер должен быть по высоте блока, а ширина 1px и в css background-repeat: repeat-x
»]]>Вася]]>т.е. выгоднее на картинках?Просто сейчас сами пишем переключатель,т.е. когда юзер с телефона заходит,то оформление на градиентных див-картинках,а если с ПК то цссесные див-градиенты (экономия трафа,да и быстрее загрузка)
»Попробую нарисовать png-полоску
]]>Вася]]>И еще вопрос, полоска какого цвета должна быть?
»У меня в градиенте используется 2 цвета.
]]>Никита]]>Я уже всё объяснил по полоскам. Пройдите по ссылке в посте и возьмите пример. Там всё написано.
»За использование моего мозга по конкретной задаче, за которую вы получаете деньги я тоже требую денег!
]]>Вася]]>Я бесплатно делаю,для друга,и сайт некоммерческий,а творческий)
»Спасибо за помощь.Отстал.