19.02.2013, 10:54
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.02.2012
Сообщений: 104
|
|
|
этим скриптом не получается сделать чёткий переход от серого к белому как в моей задаче. всё время получается плавный градиент, а мне бы этого не надо...
|
|
19.02.2013, 10:55
|
|
Профессор
|
|
Регистрация: 07.06.2011
Сообщений: 315
|
|
а если так попробовать?
http://css-tricks.com/snippets/css/gradient-text/
а для блока текста устанавливаете background-color: transparent.
http://htmlbook.ru/css/background-color
я правда сам не пробовал, и в цсс полный ноль, только осваиваю, но может же заработать?
upd: неплохой еще вариант — тупо взять, да вырезать текст картинкой .png с прозрачным фоном в фотошопе. работает во всех браузерах, занимает мало место, не тратит вашего времени. и кроме того, имхо, это самое правильное решение для подобных заголовков. |
|
19.02.2013, 11:04
|
|
Профессор
|
|
Регистрация: 07.06.2011
Сообщений: 315
|
|
<style>
h1#demo {
font-size: 60px;
background: -webkit-linear-gradient(top, #DDD 30%,#000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<h1 id="demo">
Example</h1>
upd. только картинкой 
Последний раз редактировалось tadjik1, 19.02.2013 в 11:13.
|
|
19.02.2013, 11:25
|
|
Аспирант
|
|
Регистрация: 01.04.2008
Сообщений: 52
|
|
В принципе, задачу можно решить как то так:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body{
background-color: #030D46;
text-align: center;
font-size: 24px;
height: 50px;
width: 700px
}
div {
overflow:hidden;
position:absolute;
left: 5px;
white-space:nowrap;
}
.text {
color: #999;
height: 17px;
top:5px;
}
.text2 {
color: #fff;
height: 9px;
top:22px
}
.text2 span {
display: block;
position:relative;
left:0;
top:-17px;
height: 18px;
}
</style>
</head>
<body>
<div class="text"><span>Привет мир!</span></div>
<div class="text2"><span>Привет мир!</span></div>
</body>
</html>
Хотя, за ссылку спасибо, вдруг пригодится |
|
19.02.2013, 11:38
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от vashurin
|
|
В принципе, задачу можно решить как то так:
|
Такой способ уже предлагал рони. Только у него все проще - подключил скрипт, задал опции - и готово |
|
19.02.2013, 11:42
|
|
Аспирант
|
|
Регистрация: 01.04.2008
Сообщений: 52
|
|
Сообщение от danik.js
|
|
Такой способ уже предлагал рони. Только у него все проще - подключил скрипт, задал опции - и готово
|
Ну автора топика, тот скрипт не устроил (почему то zlodiak не смог задавать цвета без переходов). А тут и скриптов не надо, чистая верстка HTML .
Хотя, кому, что интереснее. |
|
19.02.2013, 12:30
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от vashurin
|
|
Хотя, кому, что интереснее.
|
Я верстальщик. Но я бы выбрал вариант со скриптом. Зачем вручную проделывать всю эту рутинную работу, когда есть готовый скрипт? Да и с точки зрения семантики со скриптом предпочтительней. Еще более предпочтителен вариант с css-mask, но его пока рано применять. |
|
21.02.2013, 22:26
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.02.2012
Сообщений: 104
|
|
|
к сожалению, уважаемая общественность, ни один из предложенных способов не подходит
способ рони нехорош тем, что невозможно количественно регулировать градиент. например мне нужно чтобы он распространялся от верхней части буквы вниз на 30%.
в способе, который я предложил тоже есть подвох. высота строки становится неконтролируемо большой. непонятно с чем это связано. это особенно заметно когда строк текста несколько. отступы по бокам пропадают.
|
|
21.02.2013, 22:52
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от zlodiak
|
|
невозможно количественно регулировать градиент
|
Всмысле плавный градиент? Да, там только шагами. Да и то, задавать неудобно - там задается не в процентах, а в шагах |
|
|
|
