необычная тень текста
посоветуйте пожалуйста способ, которым можно оформить текст так чтобы верхняя половина каждого символа была немного темнее нижней. средствами 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 ?? дальше не читал |
| Часовой пояс GMT +3, время: 03:25. |