Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   необычная тень текста (https://javascript.ru/forum/misc/35687-neobychnaya-ten-teksta.html)

zlodiak 18.02.2013 17:55

необычная тень текста
 
посоветуйте пожалуйста способ, которым можно оформить текст так чтобы верхняя половина каждого символа была немного темнее нижней. средствами css подобное сделать не получается, наверняка существует js-скрипт для такой типовой задачи

в результате текст должен выглядеть примерно так

Deff 18.02.2013 19:20

http://www.art-shok.ru/tutorials/6-t...ient/demo.html
http://www.art-shok.ru/css/css-gradient-text/

zlodiak 18.02.2013 21:33

спасибо. но я забыл кое что в условии написать. дело в том, что за моим тестом будет фон со сложным узором. этом случае прямоугольный блок с градиентом будет слишком явно виден, поэтому приведённое решение мне не подходит

Deff 18.02.2013 21:40

zlodiak,
Значит сажайте контекст в теги <p> c фоном отличным от заднего и без узора, а уж затем делайте градиент тексту

zlodiak 18.02.2013 23:50

заказчик не оценит) есть макет, утверждён фон. если его не будет даже всего лишь за символами, то придётся переделывать...

или я неверно понял ваш ответ?..

Deff 18.02.2013 23:57

zlodiak,

Moжно наложить плавно упрозрачненный до нуля фон за буквами на верхнюю часть spanа с буквами (ежели фон темнее букв

danik.js 19.02.2013 00:22

Тут бы в тему http://caniuse.com/#search=masks но поддержка ... Может svg поможет?

рони 19.02.2013 01:09

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">ВЕДУЩИЙ&nbsp;НА&nbsp;ВАШУ&nbsp;СВАДЬБУ</div>
<script type="text/javascript">
jQuery(function( $ ){
 $(".text").pxgradient({
   step: 10,
  colors: ["#3366CC","#CCCCFF","#FFFFFF"],
   dir: "y"
});});
</script>
</body>
</html>

Deff 19.02.2013 01:13

рони, + (Плусы не ставятся

megaupload 19.02.2013 02:34

Цитата:

Сообщение от Deff
http://www.art-shok.ru/tutorials/6-t...ient/demo.html
http://www.art-shok.ru/css/css-gradient-text/

это чо за бред???????

background:url(gradient_1.png) repeat-x;

какой нах gradient_1.png ??

дальше не читал


Часовой пояс GMT +3, время: 10:44.