Как стать автором
Обновить

Комментарии 58

Сулит проблемы с выделением. Не смог выделить три нижних строки (если выделять начать в области этих строк).
В Хроме очень страшно выделяется, с градиентом на фоне выделения.
Ага, в хроме выделение всегда ужасное)
Всё это придумано для избавления от js-а.
Добавьте pointer-events: none для .fade, тогда в Firefox и webkit'ах фейд не будет мешать выделению текста.
спасибо
Зачем так много кода и цсс?
Контейнеру { position: relative }, градиенту { position: absolute; bottom: 0; width: 100%; height: 60px; }
а если текст умещается?
Градиент будет себе висеть внизу.
а если текст помещается ровно до упора?
последние строки будут скрыты градиентом, но это не будет корректно.
Согласен, но в вашем случае это тоже происходит. А вот когда текста меньше — тогда да, у вас градиент «скрывается».
как раз не происходит. фейд появляется только если текст выходит на 1 и более пикселей
Что в этом некорректного? Так же как и в вашем случае пользователь увидит один и тот же текст, и в том и в другом случае он будет знать что это весь контент который он может увидеть т.к скрола вниз нет.
какого скрола?
Который мог быть если бы вы использовали overflow: auto; вместо hidden.
вы не поняли сути задачи.
Вы не правы, я все понял, и мой вопрос был адресован как раз к самой задаче, что плохого в том что мы увидим fade если текст влезает в аккурат под размер контейнера, зачем нам вообще ставить такую задачу? А к решению у меня вопросов нет, оно работает, хоть и громоздкое.
Ну так пользователь подумает, что контент можно развернуть, кликнет, а ничего не произойдёт, только fade пропадёт
Что значит «развернуть», и куда пользователь по-вашему захочет кликнуть?
Что общего вы находите у блока по вашей ссылке и у того что в вашем примере? У вас кажется нет кнопки «Продолжение...», так и не понял куда пользователь по-вашему будет кликать чтобы попытаться развернуть контент.

image
Вот здесь, наверное, лучше видно stillion.ru/masters/17/
Я замучаю вас своим вопросом, уж простите)

У вас по ссылке fade кликабелен (cursor: pointer;) + в нем недвусмысленно написано «Продолжение рассказа».
Еще раз, куда и почему по-вашему пользователь будет кликать в вашем примере, если fade не кликабелен и нет никакой кнопки «Продолжение...», особенно если учесть что на большинстве сайтов fade не кликабелен а лишь является элементом дизайна?
В моём, конечно, никуда. Это плейграунд такой. Но в реальности там может быть написано что-нибудь, курсор и т.д.
Тогда пользователь увидит внизу градиент от белого к белому :-)
А что за fade.png?

Соль сей дизайнерской фишки Вы не раскрыли. Кому интересно — habrahabr.ru/blogs/personal/31284/ (в сети можно найти перевод на русском)
а при чём тут png?
речь идёт о позиционировании fade при условии выезжания текста за контейнер
fade — с английского обесцвечивать. В данном пример fade — это постепенное обесцвечивание блока текста. Какое отношение оно имеет к позиционированию?
Красивый и вроде как нестандартный пример использования флоата для выталкивания другого флоата.
Абсолютно не изысканный метод. ПО мне лисно удобнее так

И стили конечно
.content {
width:400px;
height:400px;
position:relative}
.fade {
background: url(fade.png) repeat-x;
height:20px;
width:100%;
position:absolute;

}
Посмотрите ещё раз задачу. Она в другом состоит. Как вы написали каждый может))



И стили конечно

.content {
width:400px;
height:400px;
position:relative}

.fade {
background: url(fade.png) repeat-x;
height:20px;
width:100%;
position:absolute;
bottom:0;
left:0;
right:0;
}
НЛО прилетело и опубликовало эту надпись здесь
2 Кулаковка Идея очень юзабельна. (Например если нужно сократить заголовок)

Вопрос к автору: А градиент от белого к прозрачному наложить сверху на текст нельзя?
НЛО прилетело и опубликовало эту надпись здесь
Господа, о чем вы? Как это относится к данной теме?
Топик никак не затрагивает реализацию самого градиента, он о совершенно о другом, fade.png в данном случае мог содержать полупрозрачные облака, или дым под который плавно уходит текст, css3-градиенты тоже бы тогда относились к теме «напрямую»?
Я как раз про такие градиенты. Задачи в топике две: сделать градинет и наложить его правильно (то есть, при каких-то граничных условиях)

Текущая реализация именно градиента вызывает проблемы в комментариях выше. Поэтому и всплыл вопрос о том, что «когда же наконец все будут поддерживать css3»
Не, я е ставил задачу делать градиент.
Задача:
Показывать fade только тогда, когда высота текста превышает высоту контейнера.
Ну, скажем, задача сделать fade все равно там была :) И по коду и по комментариям понятно, что лучше уж это был pure-css ;)
НЛО прилетело и опубликовало эту надпись здесь
Интересная реализация, спасибо за демку, а то пока в firebug не посмотрел, понять не мог что к чему.
Я думал будет про градиент, а тут про какой-то сложный метод позиционирования на все случаи жизни.
Почему ничего не сказано в каких браузерах работает?
Проверил, работает в IE6+ и во всех современных, знакомых мне. Только для IE6, как вы несомненно знаете, нужен pngfix.
Отличное решение. Чтобы понять его пришлось напрячь мозг. Я бы решал эту задачу не без jquery.
Отлично! Я как-то сделал похожую штуку, но для однострочного варианта — kizu.ru/fun/overflower/

Советую ваш пример проапгрейдить задав контейнерам (ну и всей цепочке вверх до HTML) высоту в 100%, тогда можно будет изменяя размеры окна видеть момент когда появляется градиент.
image

.content {
position: relative;
max-height: 200px;
width: 200px;
padding: 10px 10px 0;

overflow: hidden;

border: 1px solid #ccc;
}
.fade {
position: absolute;
left: 0;
top: 160px;
width: 100%;
height: 50px;

background: #feffff; /* old browsers */

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, #FFFFFF 100%); /* firefox */
}


имхо, так и не понял зачем так изощрятся с задачей.
А если контент умещается, в вашем варианте фейд будет показываться?
не будет, так как у него фикс отступ сверху (так же учтена максимальная высота).

зы: хочу заметить, но вы скорее всего увидели, решение, конечно же, не будет работать в ИЕ6
это почему не будет-то?
.fade {
position: absolute;
left: 0;
top: 160px;
width: 100%;
height: 50px;
}
всё показывается.
Смысл моего решения в том, что фейд никто не увидит, когда контента мало! И это без js.
ничего подобного:

image

ведь контейнер с контентом имеет допустимую фикс высоту (сделано для гибкости)
А сделайте фон красным) Или выложите куда-нибудь «потыкать»
фон не текста, а всего документа
Ну и что? вполне возможна ситуация, когда внутреннее содержимое будет умещаться, но чуть-чуть залезать на фейд, тем самым вводя пользователя в заблуждение.
Суть задачи была именно в том, чтобы показывать фейд только когда текст выходит за рамки, а если умещается, пусть и впритык, то не показывать фейд.
вот это вод чуть-чуть можно компенсировать пару пикселями отступа и это себя оправдает больше, нежели делать предложенный вами вариант который существенно сложнее(!).

ну а если вы не настроены принимать сторонние решения, которые просты и юзабельны в 99% случаев, а стараетесь всеми силами, высасывая из пальца, показать преимущества вашего решения, то текущий диалог не имеет смысла продолжать.
Есть определённая задача и вполне рабочее решение. Вы же мне предлагаете другую задачу со своим решением (которая, между прочим, достаточно проста и не заслуживала бы поста на хабре).
Согласен, смысла продолжать диалог нет.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории