необычная тень текста
посоветуйте пожалуйста способ, которым можно оформить текст так чтобы верхняя половина каждого символа была немного темнее нижней. средствами 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, время: 10:44. |