Затухание текста на CSS3

    Привет всем. Сегодняшний пост будет коротким, но, думается мне, полезным.
    Часто приходится слышать о том, как сделать «затухание» текста к низу, верху и т.д.
    Есть варианты на js, есть варианты с картинкой и просто css-градиентом наложенными поверх текста.
    Сегодня в голову пришел несколько другой подход к решению этой проблемы.
    Его реализация проста как три копейки

    Нам понадобится два блока — контейнер и блок с текстом.
    <div class="shadow">
    		<div class="text">
    			----------------------------
    		</div>
    	</div>
    


    И всего два класса в css
    .shadow{
    width:400px;
    margin:20px auto;
    cursor:text;
    box-shadow:inset 0px -190px 190px -50px #add7f8;
    }
    
    .text{
    color:#000;
    position:relative;
    z-index:-1;
    background:#f9fca3;
    }
    


    Теперь суть.
    Вкладываем блок с текстом в контейнер, которому задаем внутреннюю тень. Саму тень смещаем туда, где нам необходимо «затухание». Однако, внутренняя тень будет распределяться по всему контуру блока, и чтобы этого избежать, задаем ей отрицательное растяжение. За счет того, что у нас большое рассеивание и огромный сдвиг - затухание тень окажется только там, где она и нужна.
    Текстовому блоку необходимо задать отрицательный z-index, чтобы тень контейнера была поверх него.
    Вот и все дела.

    Из плюсов:
    1)текст полностью выделяемый
    2)текстовый блок не выпадает из потока и в див-обертку можно добавлять любой контент(но затухания у него уже не будет)
    3)затухание не зависит от размера блока и останется всегда там, где мы его добавили.

    Из минусов:
    1)из-за отрицательного z-index пришлось добавить значок курсора для текста(для явности)
    2)в опере(11.52) несколько иначе отрабатывается растяжение, в результате чего тень становится очень интенсивной.
    3)не работает в ИЕ до 8 включительно

    Соответственно цвета, интенсивность и размеры можно выставить в параметрах тени.

    Пример здесь

    upd товарищ VitaZheltyakov предлагает накладывать еще одну тень для более плавного слияния с основным фоном.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 38

      –30
      Ubuntu, Google Chrome 7.0.517.41. Не работает пример. Обычные блоки с текстом без «затухания».
        +17
        Chrome 7? Вы серьезно?
        Ubuntu, Google Chrome 16.0.912.0 dev. Работает пример. Обычные блоки с текстом с «затуханием».
          +1
          Ubuntu, Google Chrome 16.0.912.12 dev, текст затемнен )
          Windows 7, Google Chrome 16.0.912.12 dev, текст затемнен )
            +40
            Протестируйте с Netscape 3.0, пожалуйста.
              0
              А в IE 3 под wine?
                –7
                Отличный юмор, спасибо поблевал…
                Хром установлен был год назад, а не 15 лет. Если в то время он настолько сырой был… то уж извиняйте, вопросы не ко мне.
                  +1
                  Дело не в «сырости» браузера, а в том, что год назад мало браузеров поддерживало хоть какие-то возможности CSS3.
                  Пытаться проверить возможности CSS3 на старом браузере это всё равно, что пытаться воткнуть в современную материнскую плату процессор из прошлого века. Это выглядит глупо, нелепо и безнадёжно.
              0
              Цвет тени должен совпадать с цветом основного фона?
              Т.е. предложенным способом не получится сделать затухание на фоне, отличающемся от сплошной заливки?
                +1
                Нет, не получится, т.к. сделать прозрачными буквы(без фона) вроде бы никому еще не удалось. Без вмешательства js, конечно.
                +2
                Для того, чтобы работало в IE делаем это используя внешнюю тень у дополнительного блока и прикручиваем CSS3 PIE (внутреннюю тень не поддерживает).
                  0
                  Спасибо, отличный эффект, особенно для сайтов с фэнтезийно-приключенческой тематикой!
                    +1
                    Проблема в том, что никогда не нужно затухание всего текста, текст обрывается на последней строчке, её и нужно затухать. Пример, о чем я говорю:

                      0
                      В этом я вообще не вижу проблемы. Если надо затенить одно-два слова, то можно на блок с текстом накинуть псевдоэлемент с внешней тенью и прибить его в нужный угол. Единственный минус — это нельзя будет выделить эти слова, но он нивелируется самим наличием эффекта.
                        0
                        А теперь в первом примере поменяйте местами последнюю и предпоследнюю строчку:



                        «Прибить тень в нужный угол» не катит, нужно расположить тень строго за последним словом на определенной строчку.
                          +3
                          Мы точно об одном и том же говорим?
                          Вот вариант с затуханием последнего слова jsfiddle.net/49Pdp/
                          Хоть к диву, хоть к параграфу прибивайте этот псевдоэлемент. Сейчас сделал грубо, лишь бы показать, но отрегулировать размеры вполне можно, чтобы затухало именно последнее слово.
                            0
                            И что это? Невнятное затухание на предпоследней строчке, а после него текст продолжается.

                              +1
                              Я понял, о чем вы.
                              Вот вам вариант, когда затухать будет всегда последнее слово в тексте. jsfiddle.net/49Pdp/20/
                              Во всяком случае это абсолютно решаемо и не сложно.
                                0
                                Дак надо не последнее слово в тексте, а последнее слово на последней строчке. Текст больше 4-х строк — обрезаем, четвертую строчку затеняем.
                                  0
                                    0
                                    Слушайте, вы издеваетесь. У вас там ровно 4 строчки, четвертая затеняется. Зачем? Текст же не обрезается. Вот будет у вас 10 строчек, вам на четвертой нужно обрезать, и последнюю строчку засветлить. Никак.
                                      +1
                                      ответил в ЛС, вариант, предложенный ниже работоспособный, беру свои слова назад.
                        +1
                        jsfiddle.net/jwkBX/
                        высотой спана можно регулировать количество видимых строк
                        тоже грубый пример, но понятно как работает )
                          0
                          небольшое пояснение — текста может быть сколько угодно много — будут показываться только N строк + последняя уходящая в fade.
                          пример с использованием box-shadow считаю некрасивым (идеально не получится затухание сделать) — поэтому я обычно кладу пнг-градиент. и позиционирую абсолютно справа внизу с нужными размерами.
                            0
                            И в чем отличие? Все те же проблемы:



                            Затухает не текст, и не только на последней строчке.
                              +2
                              в данном случае проблема в том что у вас шрифт увеличенный.
                              надо подгонять правильный размер span по высоте. яж на скорую руку делал пример )



                              но если нужны строго две строчки то можно вот так — jsfiddle.net/jwkBX/1/ — обновил
                                0
                                Теперь стало ясно, на чем основывается ваш метод. Да, имеет право на жизнь.
                                  +1
                                  даже не так: сколько строк надо показывать — столько br и ставить в span.
                                  тогда не будет разницы какой шрифт используется
                                    –1
                                    В том виде, как вы поставили задание, такой вариант не имеет права на жизнь. Попробуйте сделать ширину блока-родителя большую. Скажем, 1000пк.
                                    Я выше показал вариант. Там псевдоэлемент цепляется именно к последнему слову, всегда. И всегда его будет затенять.
                                    Просто сразу не совсем понял задачу. Сейчас, вернувшись, собрал вариант, подходящий к вашим требованиями.
                            0
                            Если говорить о JS, то у меня было сделано вот так: riamatic.com/labs/mooshort/
                              0
                              Таки тени способны убить FF <4.
                                0
                                Использование тени вместо градиента для сохранения кликабельности — хороший момент.

                                А так — чаще нужно использовать затухание только тогда когда это действительно нужно, т.е. когда длина текста превышает высоту соответствующего блока. На этот счёт на хабре была хорошая статья: habrahabr.ru/blogs/css/116646/ — возможно, можно тот метод проапгрейдить тенью, это будет более кроссбраузерный «проклик», чем pointer-events: none;
                                  0
                                  При выделении всего блока текста со стороны затухания, и после снятия выделения, затухание пропадает.
                                  Как-то по костыльному, да и «нужность» сомнительна.

                                  Safari 5.1.1 (7534.51.22)
                                  MAC OS X 10.7.2
                                    +1
                                    Не знаю, а приведите пример, где это круто смотрится?
                                      0
                                      Статья и пример. Собственно, если кроссбраузерность не нужна, то смысл костылей?
                                      +2
                                      Минусованные посты и без CSS3 затухают :)
                                        0
                                        В Nightly (а может и в стабильных версиях лисы тоже) — они затухают по тупому: если навести и увести курсор на такое сообщение быстро и много раз — то потом если остановиться — некоторое время коммент всё ещё будет мигать, т.к. собралась очередь из ещё невыполненных действий. В хроме вроде такого нет.
                                        +1
                                        Советую ознакомиться с css3 mask image.

                                        Пример для webkit:

                                        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(90%, rgba(0, 0, 0, 1)), to(transparent))

                                        Only users with full accounts can post comments. Log in, please.