Затухание текста средствами CSS

[MindMinimal]

Было б неплохо добавить изображения в сам пост.

[mannaro]

Вы смеетесь?

[SerafimArts]

У меня примерно такая-же мысль возникла. Я бы понял, если бы что-то действительно находчивое было (вроде тултипов средствами чистого css)…

Скрытый текст

код на scss

*[data-title]{
  $bg: rgba(#11171c, .8);
  $arrowIndex: 19px;
  position: relative;

  &:after,
  &:before{
    opacity: 0;
    @include transition(
      bottom .2s $swift .6s,
      opacity .2s $swift .6s
    );
  }

  &:hover{
    &:after,
    &:before{
      opacity: 1;
      @include transition(
          bottom .2s $swift .3s,
          opacity .2s $swift .3s
      );
    }
    &:after{
      bottom: -30px;
    }
    &:before{
      bottom: -30px + $arrowIndex;
    }
  }

  &:after {
    @include font(content);
    font-weight: 300;
    bottom: -20px;
    content: attr(data-title);
    color: #fff;
    background: $bg;
    border-radius: 2px;
    padding: 3px 8px;
    position: absolute;
    left: -15px;
    font-size: 9px;
    height: 13px;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
    pointer-events: none;
    min-width: 30px;
  }

  &:before{
    bottom: -20px + $arrowIndex;
    content: '';
    width: 0;
    height: 0;
    border: transparent 5px solid;
    border-bottom: $bg 5px solid;
    left: 5px;
    position: absolute;
    pointer-events: none;
  }
}

[SerDIDG]

А я ожидал «затухание» средствами наложения альфа канала и тп, который очень давно видел, и уже не помню где.

[bohdaniel]

Почему обязательно нужно все обгадить? Приведите лучший пример и, может, я с вами соглашусь.

[AndersonDunai]

Да потому, что это — не статья, а заметка. На stackoverflow в ответах и то больше пишут. Давайте все будем постить куски кода сюда и превратим хабр в pastebin?

[webinside]

Я понимаю ваше негодование, но скажу, что я лично просто боюсь что то писать на хабру именно ввиду, что услышу только негатив. Есть ряд наработок, исследований.
Вижу как это происходит с другими постерами и желание пропадает полностью. Хотя много топиков из ряда «минусовых» приносили мне реальную пользу.

[vintage]

Если они не столь тривиальны, как предложенные тут, и не задевают чьих-то религиозных чувств, то нечего бояться :-)

[webinside]

Вот именно что могут быль задеты «религиозные чувста», типа: этот КОД ты выносишь СЮДА… где читают мегаГУРУ. Стыдись. Иди на горшок.

[AndersonDunai]

Просто статьи должны быть интересны и познавательны. Я захожу почитать хабр в своё удовольствие, например. Про какие-то интересные вещи. Не стоит ожидать, что вашу статью заплюсуют сотнями, если там что-то совсем не новое и довольно примитивное: рейтинг статьи — это довольно объективная оценка её интересности.

Например, я очень часто минусую статью, но сразу после этого плюсую карму автора: таким образом я показываю неинтерес к статьеьи в то же время поощряю автора писать лучше.

[webinside]

Я с вами полностью согласен — не все топики вызывают интерес.
Хабру уже растерзали на под-проекты: Toster, Geektimes может быть именно по этой причине. Проще написать обзор нового гаджета или перевести статью.
Можно быть немного толерантнее к тем кто писал. Да — не шедевр.
Или давайте сделаем habr-Junior, habr-Middle, habr-Senior.

[ecl]

Зачем вы привязываетесь к высоте внешенего блока и ограничиваете max-height? Ещё и танцы с отступами и следом идущим отрицательным margin-top…
Можно просто поставить элемент на нижнюю позицию bottom: 0; и указывать какую угодно высоту как самого затухания, так и не лимитировать внешний блок. jsfiddle.net/be279n4o/1/

Кстати, таким же методом, но блоком в 20-30 пикселей ширины и высотой в одну букву, несколько лет назад яндекс делал затухание текста в конце строки в своей почте (для резиновости средней колонки с заголовками писем).

[bolk]

Не работает в IE до 9 версии включительно (кто б сомневался)

Если не сделать, чтобы работало, оно и не будет работать (кто бы сомневался). В IE есть фильтр gradient и возможность задавать цвета в формате #AARRGGBB.

Например: progid:DXImageTransform.Microsoft.gradient (startColorstr=#00ffffff, endColorstr=#ffffffff, GradientType=1);

[bohdaniel]

Если не сделать, чтобы работало, оно и не будет работать
Но все нужно делать через одно место…
Хорошо, что Microsoft одумалась и покорилась общепринятым стандартам. Надеемся, что про браузеры ниже IE10 скоро все забудут

[bolk]

О чём вы говорите, дорогой мой? Какие стандарты? Когда Микрософт это делала, никто другой и не задумывался ни о каких градиентах и фильтрах, они это придумали. А теперь, оказывается, это у Микрософта всё не по стандартам.

[neolink]

ну да только закончилось все тем что браузеры теперь вообще все отрисовывают с помощью gpu. А на тот момент другого способа кроме DirectX задействовать видеокарту не было

[bohdaniel]

Вся суть в том, что блок должен иметь определенную высоту. У себя в проекте я ниже ставлю ссылку «показать полностью» и блок разворачивается с помощью javascript на всю высоту текста.

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

Вот пример: temperaments.org/tests/temperament/temperament-test.html

[ecl]

вы вообще понимаете работу блочной модели, что вами движет, когда вы приводите такой аргумент? это же азы.

чтобы сделать то, что у вас по ссылке, нужно просто к внешнему блоку добавить height: 100px; overflow:hidden;, и вы по-прежнему избежите избыточного кода с ненужной математикой.

[bohdaniel]

Если вам нужна поддержка IE9 можно воспользоваться примером, который только что-предложил товарищ bolk

progid:DXImageTransform.Microsoft.gradient (startColorstr=#00ffffff, endColorstr=#ffffffff, GradientType=1);

А насчет второго примера, то я не вижу в нем необходимости: зачем прятать затухание, если там нет текста и его и так не будет видно?

[dshster]

pointer-events: none;

К блоку с градиентом применить нужно, чтобы при выделении текста курсор не спотыкался.

[vintage]

Профессиональных успехов вам! :-)
jsfiddle.net/bLud7zpq/63/

[begemot_nn]

если пример автора, хоть и криво, но работает.
то ваш — не работает совсем. (то есть никак)

Chromium 37.0.2062.120 Ubuntu 14.04 (281580) (64-bit)

кроссбраузерность, она такая…

[neolink]

я тоже сначала так подумал, нужно окошко уменьшить по высоте, так как размер div'a не ограничен

[begemot_nn]

Согласен. если в примере vintage блоку задать height — то начинает работать.

[vintage]

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

[Psychosynthesis]

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

[piumosso]

habrahabr.ru/post/116646/ — во, посмотрите, аналогичная задача