Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2013, 17:55
Кандидат Javascript-наук
Отправить личное сообщение для zlodiak Посмотреть профиль Найти все сообщения от zlodiak
 
Регистрация: 24.02.2012
Сообщений: 104

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

в результате текст должен выглядеть примерно так
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2013, 19:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

http://www.art-shok.ru/tutorials/6-t...ient/demo.html
http://www.art-shok.ru/css/css-gradient-text/
Ответить с цитированием
  #3 (permalink)  
Старый 18.02.2013, 21:33
Кандидат Javascript-наук
Отправить личное сообщение для zlodiak Посмотреть профиль Найти все сообщения от zlodiak
 
Регистрация: 24.02.2012
Сообщений: 104

спасибо. но я забыл кое что в условии написать. дело в том, что за моим тестом будет фон со сложным узором. этом случае прямоугольный блок с градиентом будет слишком явно виден, поэтому приведённое решение мне не подходит
Ответить с цитированием
  #4 (permalink)  
Старый 18.02.2013, 21:40
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

zlodiak,
Значит сажайте контекст в теги <p> c фоном отличным от заднего и без узора, а уж затем делайте градиент тексту
Ответить с цитированием
  #5 (permalink)  
Старый 18.02.2013, 23:50
Кандидат Javascript-наук
Отправить личное сообщение для zlodiak Посмотреть профиль Найти все сообщения от zlodiak
 
Регистрация: 24.02.2012
Сообщений: 104

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

или я неверно понял ваш ответ?..
Ответить с цитированием
  #6 (permalink)  
Старый 18.02.2013, 23:57
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

zlodiak,

Moжно наложить плавно упрозрачненный до нуля фон за буквами на верхнюю часть spanа с буквами (ежели фон темнее букв
Ответить с цитированием
  #7 (permalink)  
Старый 19.02.2013, 00:22
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Тут бы в тему http://caniuse.com/#search=masks но поддержка ... Может svg поможет?
Ответить с цитированием
  #8 (permalink)  
Старый 19.02.2013, 01:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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>

Последний раз редактировалось рони, 19.02.2013 в 01:20.
Ответить с цитированием
  #9 (permalink)  
Старый 19.02.2013, 01:13
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

рони, + (Плусы не ставятся
Ответить с цитированием
  #10 (permalink)  
Старый 19.02.2013, 02:34
Аватар для megaupload
Профессор
Отправить личное сообщение для megaupload Посмотреть профиль Найти все сообщения от megaupload
 
Регистрация: 18.01.2013
Сообщений: 1,098

Сообщение от 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 ??

дальше не читал
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как изменить цвет текста в таблице при наведении на нее? Amateur jQuery 3 01.09.2012 06:19
Как запретить отмену выделения текста от клика мышью? Маэстро Internet Explorer 0 03.04.2012 21:21
Чудеса математики js при padding borovik Элементы интерфейса 6 09.07.2011 22:02
Получение позиции текста по координатам traa Events/DOM/Window 20 08.02.2011 14:19
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 18:02