How to become an author
Search
Write a publication
Pull to refresh

Comments 32

Было б неплохо добавить изображения в сам пост.
Total votes 8: ↑8 and ↓0+8
У меня примерно такая-же мысль возникла. Я бы понял, если бы что-то действительно находчивое было (вроде тултипов средствами чистого 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;
  }
}

Total votes 1: ↑1 and ↓0+1
А я ожидал «затухание» средствами наложения альфа канала и тп, который очень давно видел, и уже не помню где.
Total votes 2: ↑0 and ↓2-2
Почему обязательно нужно все обгадить? Приведите лучший пример и, может, я с вами соглашусь.
Total votes 5: ↑3 and ↓2+1
Да потому, что это — не статья, а заметка. На stackoverflow в ответах и то больше пишут. Давайте все будем постить куски кода сюда и превратим хабр в pastebin?
Total votes 11: ↑10 and ↓1+9
Я понимаю ваше негодование, но скажу, что я лично просто боюсь что то писать на хабру именно ввиду, что услышу только негатив. Есть ряд наработок, исследований.
Вижу как это происходит с другими постерами и желание пропадает полностью. Хотя много топиков из ряда «минусовых» приносили мне реальную пользу.

Total votes 6: ↑6 and ↓0+6
Если они не столь тривиальны, как предложенные тут, и не задевают чьих-то религиозных чувств, то нечего бояться :-)
Total votes 1: ↑0 and ↓1-1
Вот именно что могут быль задеты «религиозные чувста», типа: этот КОД ты выносишь СЮДА… где читают мегаГУРУ. Стыдись. Иди на горшок.
Total votes 3: ↑2 and ↓1+1
Просто статьи должны быть интересны и познавательны. Я захожу почитать хабр в своё удовольствие, например. Про какие-то интересные вещи. Не стоит ожидать, что вашу статью заплюсуют сотнями, если там что-то совсем не новое и довольно примитивное: рейтинг статьи — это довольно объективная оценка её интересности.

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

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

Кстати, таким же методом, но блоком в 20-30 пикселей ширины и высотой в одну букву, несколько лет назад яндекс делал затухание текста в конце строки в своей почте (для резиновости средней колонки с заголовками писем).
Total votes 2: ↑2 and ↓0+2
Не работает в IE до 9 версии включительно (кто б сомневался)
Если не сделать, чтобы работало, оно и не будет работать (кто бы сомневался). В IE есть фильтр gradient и возможность задавать цвета в формате #AARRGGBB.

Например: progid:DXImageTransform.Microsoft.gradient (startColorstr=#00ffffff, endColorstr=#ffffffff, GradientType=1);
Total votes 3: ↑3 and ↓0+3
Если не сделать, чтобы работало, оно и не будет работать
Но все нужно делать через одно место…
Хорошо, что Microsoft одумалась и покорилась общепринятым стандартам. Надеемся, что про браузеры ниже IE10 скоро все забудут
Total votes 6: ↑1 and ↓5-4
О чём вы говорите, дорогой мой? Какие стандарты? Когда Микрософт это делала, никто другой и не задумывался ни о каких градиентах и фильтрах, они это придумали. А теперь, оказывается, это у Микрософта всё не по стандартам.
Total votes 5: ↑5 and ↓0+5
UFO just landed and posted this here
UFO just landed and posted this here
ну да только закончилось все тем что браузеры теперь вообще все отрисовывают с помощью gpu. А на тот момент другого способа кроме DirectX задействовать видеокарту не было
This comment wasn’t rated yet0
UFO just landed and posted this here
Вся суть в том, что блок должен иметь определенную высоту. У себя в проекте я ниже ставлю ссылку «показать полностью» и блок разворачивается с помощью javascript на всю высоту текста.

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

Вот пример: temperaments.org/tests/temperament/temperament-test.html
Total votes 2: ↑0 and ↓2-2
вы вообще понимаете работу блочной модели, что вами движет, когда вы приводите такой аргумент? это же азы.

чтобы сделать то, что у вас по ссылке, нужно просто к внешнему блоку добавить height: 100px; overflow:hidden;, и вы по-прежнему избежите избыточного кода с ненужной математикой.
This comment wasn’t rated yet0
UFO just landed and posted this here
Если вам нужна поддержка IE9 можно воспользоваться примером, который только что-предложил товарищ bolk

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

А насчет второго примера, то я не вижу в нем необходимости: зачем прятать затухание, если там нет текста и его и так не будет видно?
This comment wasn’t rated yet0
UFO just landed and posted this here
pointer-events: none;


К блоку с градиентом применить нужно, чтобы при выделении текста курсор не спотыкался.
This comment wasn’t rated yet0
если пример автора, хоть и криво, но работает.
то ваш — не работает совсем. (то есть никак)

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

кроссбраузерность, она такая…
This comment wasn’t rated yet0
я тоже сначала так подумал, нужно окошко уменьшить по высоте, так как размер div'a не ограничен
Total votes 1: ↑1 and ↓0+1
Согласен. если в примере vintage блоку задать height — то начинает работать.
This comment wasn’t rated yet0
Там как бы демонстрируется, что решение подходит для блоков с не только фиксированной высотой, но и динамической.
Total votes 2: ↑0 and ↓2-2
Предлагаю автору допилить статью, дополнив её вариантами, озвученными в камментах и сделав оценочное тестирование каждого варианта в итоге разложив плюсы и минусы каждого решения, тогда получится вполне полноценная и даже полезная статья.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr