необычная тень текста
посоветуйте пожалуйста способ, которым можно оформить текст так чтобы верхняя половина каждого символа была немного темнее нижней. средствами css подобное сделать не получается, наверняка существует js-скрипт для такой типовой задачи
в результате текст должен выглядеть примерно так |
|
спасибо. но я забыл кое что в условии написать. дело в том, что за моим тестом будет фон со сложным узором. этом случае прямоугольный блок с градиентом будет слишком явно виден, поэтому приведённое решение мне не подходит
|
zlodiak,
Значит сажайте контекст в теги <p> c фоном отличным от заднего и без узора, а уж затем делайте градиент тексту |
заказчик не оценит) есть макет, утверждён фон. если его не будет даже всего лишь за символами, то придётся переделывать...
или я неверно понял ваш ответ?.. |
zlodiak,
Moжно наложить плавно упрозрачненный до нуля фон за буквами на верхнюю часть spanа с буквами (ежели фон темнее букв |
Тут бы в тему http://caniuse.com/#search=masks но поддержка ... Может svg поможет?
|
zlodiak,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
div{
padding: 15px 15px;
background-color: #030D46;
text-align: center;
font: 24px;
height: 50px;
width: 700px
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" src="http://www.mrnix.ru/pxgradient/pxgradient-1.0.2.jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="text">ВЕДУЩИЙ НА ВАШУ СВАДЬБУ</div>
<script type="text/javascript">
jQuery(function( $ ){
$(".text").pxgradient({
step: 10,
colors: ["#3366CC","#CCCCFF","#FFFFFF"],
dir: "y"
});});
</script>
</body>
</html>
|
рони, + (Плусы не ставятся
|
Цитата:
background:url(gradient_1.png) repeat-x; какой нах gradient_1.png ?? дальше не читал |
этим скриптом не получается сделать чёткий переход от серого к белому как в моей задаче. всё время получается плавный градиент, а мне бы этого не надо...
|
а если так попробовать?
http://css-tricks.com/snippets/css/gradient-text/ а для блока текста устанавливаете background-color: transparent. http://htmlbook.ru/css/background-color я правда сам не пробовал, и в цсс полный ноль, только осваиваю, но может же заработать? upd: неплохой еще вариант — тупо взять, да вырезать текст картинкой .png с прозрачным фоном в фотошопе. работает во всех браузерах, занимает мало место, не тратит вашего времени. и кроме того, имхо, это самое правильное решение для подобных заголовков. |
<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. только картинкой :) |
вот кстати нашёл http://dgreeze.ru/jscript/14-gradienty-dlya-teksta.html
может кому-нибудь тоже пригодится всем спасибо за помощь |
Цитата:
<!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>
Хотя, за ссылку спасибо, вдруг пригодится :) |
Цитата:
|
Цитата:
Хотя, кому, что интереснее. |
Цитата:
|
к сожалению, уважаемая общественность, ни один из предложенных способов не подходит
способ рони нехорош тем, что невозможно количественно регулировать градиент. например мне нужно чтобы он распространялся от верхней части буквы вниз на 30%. в способе, который я предложил тоже есть подвох. высота строки становится неконтролируемо большой. непонятно с чем это связано. это особенно заметно когда строк текста несколько. отступы по бокам пропадают. |
Цитата:
|
| Часовой пояс GMT +3, время: 18:41. |