Комментарии 58
Сулит проблемы с выделением. Не смог выделить три нижних строки (если выделять начать в области этих строк).
В Хроме очень страшно выделяется, с градиентом на фоне выделения.
В Хроме очень страшно выделяется, с градиентом на фоне выделения.
+2
Ага, в хроме выделение всегда ужасное)
Всё это придумано для избавления от js-а.
Всё это придумано для избавления от js-а.
0
Добавьте pointer-events: none для .fade, тогда в Firefox и webkit'ах фейд не будет мешать выделению текста.
+7
спасибо
+1
Тогда уж и ссылку на hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/ (пример — demos.hacks.mozilla.org/openweb/pointer-events/ )
+2
Зачем так много кода и цсс?
Контейнеру { position: relative }, градиенту { position: absolute; bottom: 0; width: 100%; height: 60px; }
Контейнеру { position: relative }, градиенту { position: absolute; bottom: 0; width: 100%; height: 60px; }
+7
а если текст умещается?
+1
Градиент будет себе висеть внизу.
+1
а если текст помещается ровно до упора?
последние строки будут скрыты градиентом, но это не будет корректно.
последние строки будут скрыты градиентом, но это не будет корректно.
+2
Согласен, но в вашем случае это тоже происходит. А вот когда текста меньше — тогда да, у вас градиент «скрывается».
+1
Что в этом некорректного? Так же как и в вашем случае пользователь увидит один и тот же текст, и в том и в другом случае он будет знать что это весь контент который он может увидеть т.к скрола вниз нет.
0
какого скрола?
0
Который мог быть если бы вы использовали overflow: auto; вместо hidden.
0
вы не поняли сути задачи.
0
Вы не правы, я все понял, и мой вопрос был адресован как раз к самой задаче, что плохого в том что мы увидим fade если текст влезает в аккурат под размер контейнера, зачем нам вообще ставить такую задачу? А к решению у меня вопросов нет, оно работает, хоть и громоздкое.
0
Ну так пользователь подумает, что контент можно развернуть, кликнет, а ничего не произойдёт, только fade пропадёт
0
Что значит «развернуть», и куда пользователь по-вашему захочет кликнуть?
0
Ну вот как тут: stillion.ru/masters/10/
0
Что общего вы находите у блока по вашей ссылке и у того что в вашем примере? У вас кажется нет кнопки «Продолжение...», так и не понял куда пользователь по-вашему будет кликать чтобы попытаться развернуть контент.
![image](https://habrastorage.org/r/w1560/getpro/habr/comment_images/5d5/3c9/052/5d53c90522b19376ac556f54ff8164d2.png)
![image](https://habrastorage.org/getpro/habr/comment_images/5d5/3c9/052/5d53c90522b19376ac556f54ff8164d2.png)
0
Вот здесь, наверное, лучше видно stillion.ru/masters/17/
0
Я замучаю вас своим вопросом, уж простите)
У вас по ссылке fade кликабелен (cursor: pointer;) + в нем недвусмысленно написано «Продолжение рассказа».
Еще раз, куда и почему по-вашему пользователь будет кликать в вашем примере, если fade не кликабелен и нет никакой кнопки «Продолжение...», особенно если учесть что на большинстве сайтов fade не кликабелен а лишь является элементом дизайна?
У вас по ссылке fade кликабелен (cursor: pointer;) + в нем недвусмысленно написано «Продолжение рассказа».
Еще раз, куда и почему по-вашему пользователь будет кликать в вашем примере, если fade не кликабелен и нет никакой кнопки «Продолжение...», особенно если учесть что на большинстве сайтов fade не кликабелен а лишь является элементом дизайна?
0
Тогда пользователь увидит внизу градиент от белого к белому :-)
+2
А что за fade.png?
Соль сей дизайнерской фишки Вы не раскрыли. Кому интересно — habrahabr.ru/blogs/personal/31284/ (в сети можно найти перевод на русском)
Соль сей дизайнерской фишки Вы не раскрыли. Кому интересно — habrahabr.ru/blogs/personal/31284/ (в сети можно найти перевод на русском)
-4
Красивый и вроде как нестандартный пример использования флоата для выталкивания другого флоата.
+1
Абсолютно не изысканный метод. ПО мне лисно удобнее так
И стили конечно
.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;
}
0
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Господа, о чем вы? Как это относится к данной теме?
+1
напрямую: nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/
хотя градиент текст — это лишь одна из частей проблемы
хотя градиент текст — это лишь одна из частей проблемы
0
Топик никак не затрагивает реализацию самого градиента, он о совершенно о другом, fade.png в данном случае мог содержать полупрозрачные облака, или дым под который плавно уходит текст, css3-градиенты тоже бы тогда относились к теме «напрямую»?
0
Я как раз про такие градиенты. Задачи в топике две: сделать градинет и наложить его правильно (то есть, при каких-то граничных условиях)
Текущая реализация именно градиента вызывает проблемы в комментариях выше. Поэтому и всплыл вопрос о том, что «когда же наконец все будут поддерживать css3»
Текущая реализация именно градиента вызывает проблемы в комментариях выше. Поэтому и всплыл вопрос о том, что «когда же наконец все будут поддерживать css3»
0
Интересная реализация, спасибо за демку, а то пока в firebug не посмотрел, понять не мог что к чему.
0
Я думал будет про градиент, а тут про какой-то сложный метод позиционирования на все случаи жизни.
Почему ничего не сказано в каких браузерах работает?
Почему ничего не сказано в каких браузерах работает?
0
Отличное решение. Чтобы понять его пришлось напрячь мозг. Я бы решал эту задачу не без jquery.
0
Отлично! Я как-то сделал похожую штуку, но для однострочного варианта — kizu.ru/fun/overflower/
Советую ваш пример проапгрейдить задав контейнерам (ну и всей цепочке вверх до HTML) высоту в 100%, тогда можно будет изменяя размеры окна видеть момент когда появляется градиент.
Советую ваш пример проапгрейдить задав контейнерам (ну и всей цепочке вверх до HTML) высоту в 100%, тогда можно будет изменяя размеры окна видеть момент когда появляется градиент.
0
![image](https://habr.com/images/px.gif#%3D%22http%3A%2F%2Fimg8.imageshack.us%2Fimg8%2F1204%2Funledei.png%22)
.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 */
}
имхо, так и не понял зачем так изощрятся с задачей.
0
не будет, так как у него фикс отступ сверху (так же учтена максимальная высота).
зы: хочу заметить, но вы скорее всего увидели, решение, конечно же, не будет работать в ИЕ6
зы: хочу заметить, но вы скорее всего увидели, решение, конечно же, не будет работать в ИЕ6
0
это почему не будет-то?
.fade {
position: absolute;
left: 0;
top: 160px;
width: 100%;
height: 50px;
}
всё показывается.
Смысл моего решения в том, что фейд никто не увидит, когда контента мало! И это без js.
.fade {
position: absolute;
left: 0;
top: 160px;
width: 100%;
height: 50px;
}
всё показывается.
Смысл моего решения в том, что фейд никто не увидит, когда контента мало! И это без js.
0
ничего подобного:
![image](https://habr.com/images/px.gif#%3D%22http%3A%2F%2Fimg857.imageshack.us%2Fimg857%2F1376%2Funledhch.png%22)
ведь контейнер с контентом имеет допустимую фикс высоту (сделано для гибкости)
![image](https://habr.com/images/px.gif#%3D%22http%3A%2F%2Fimg857.imageshack.us%2Fimg857%2F1376%2Funledhch.png%22)
ведь контейнер с контентом имеет допустимую фикс высоту (сделано для гибкости)
0
А сделайте фон красным) Или выложите куда-нибудь «потыкать»
0
фон не текста, а всего документа
0
0
Ну и что? вполне возможна ситуация, когда внутреннее содержимое будет умещаться, но чуть-чуть залезать на фейд, тем самым вводя пользователя в заблуждение.
Суть задачи была именно в том, чтобы показывать фейд только когда текст выходит за рамки, а если умещается, пусть и впритык, то не показывать фейд.
Суть задачи была именно в том, чтобы показывать фейд только когда текст выходит за рамки, а если умещается, пусть и впритык, то не показывать фейд.
0
вот это вод чуть-чуть можно компенсировать пару пикселями отступа и это себя оправдает больше, нежели делать предложенный вами вариант который существенно сложнее(!).
ну а если вы не настроены принимать сторонние решения, которые просты и юзабельны в 99% случаев, а стараетесь всеми силами, высасывая из пальца, показать преимущества вашего решения, то текущий диалог не имеет смысла продолжать.
ну а если вы не настроены принимать сторонние решения, которые просты и юзабельны в 99% случаев, а стараетесь всеми силами, высасывая из пальца, показать преимущества вашего решения, то текущий диалог не имеет смысла продолжать.
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Делаем красивый fade для переполненного блока без js