При длином тексте, затухание

Тема в разделе "Веб-дизайн", создана пользователем xkspy, 18 апр 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. xkspy

    xkspy Постоялец

    Регистр.:
    25 июл 2007
    Сообщения:
    104
    Симпатии:
    1
    Нужен такой эффект css как и в Яндекс.Почте, точнее при достижение n-максимума длины текста, происходила бы затухание текста.
    [​IMG]
    P.S. Желательно, чтобы при наведение на текст, если он длинный, сам текст бы как бегущая строка двигался, чтобы увидеть полностью текст
     
  2. lexxxter

    lexxxter Постоялец

    Регистр.:
    20 мар 2008
    Сообщения:
    96
    Симпатии:
    31
    подобная идея реализована здесь:
    http://explorer-soft.com/css/effekt-gradienta-s-ispolzovaniem-css.html
    только там вертикальное применение, переделать в горизонтальное несложно
     
  3. xkspy

    xkspy Постоялец

    Регистр.:
    25 июл 2007
    Сообщения:
    104
    Симпатии:
    1
    Да, это градиент на весь текст, но мне нужно чтобы грдиент применялся при достижения определёного максимума букв, т.е. чтобы буквы перед границей получали весь этот эффект, а не весь текст, как Вашем варинте.

    Как видно, в Яндекс почте, заголовок длинее чем на самом деле и при этом используется эффект градиента, мне аналогично нужно, т.к. у меня тоже много заголовков которые длинее самой длины таблицы, за которую он заходит.
     
  4. mittus

    mittus Создатель

    Регистр.:
    12 июл 2009
    Сообщения:
    72
    Симпатии:
    11
    css:
    .myClass {background:url(...) repeat-y right;z-index:10;}
    .myClass2 {white-space:nowrap;z-index:1;}
    и хтмл:
    <div class="myClass"><span class="myClass2">здесь текст</span></div>

    url(...) - картинка шириной в n пикселей и высотой 1 пиксель, прозрачный png-24.
     
    xkspy нравится это.
  5. xkspy

    xkspy Постоялец

    Регистр.:
    25 июл 2007
    Сообщения:
    104
    Симпатии:
    1
    Картинка прозрачная или полупрозрачная с переходящим градиентом белого?
     
  6. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    781
    Симпатии:
    153
    полупрозрачная с переходящим градиентом белого

    только в данном примере не будет такого эффекта как в первом сообщении. Будет просто последние буквы закрашиваться.
     
  7. xkspy

    xkspy Постоялец

    Регистр.:
    25 июл 2007
    Сообщения:
    104
    Симпатии:
    1
    Значит этот эффект не подойдёт при достижение определённого максимума, идёт затухание.
    Как же организовать как на почте в Яндексе?
     
  8. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    781
    Симпатии:
    153
    Через php
    PHP:
    $tema 'Проверка длинного сообщения траляля оочень длинное сообщениеhhh';
    if (
    strlen($tema) >= 20) {echo '<div class="myClass"><span class="myClass2">'.substr($tema,0,25).'</span></div>';}
    else {echo 
    $tema;}
    Если переменная содержит больше 20 символов, то выполняется код, который делает затухание и при этом строка обрезается до 25 символов.
     
    xkspy нравится это.
  9. xkspy

    xkspy Постоялец

    Регистр.:
    25 июл 2007
    Сообщения:
    104
    Симпатии:
    1
    Нашёл ещё вот такой вариант http://weblab.pro/tenshi/ без градиента, но эффектно, сам определяет размер и ставит "..."
     
    UDAV нравится это.
  10. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    781
    Симпатии:
    153
    Интересно... на одном css без js даже ;)
    А градиент туда уже и без проблем можно подставить в css -)
     
Статус темы:
Закрыта.