Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 58
Сулит проблемы с выделением. Не смог выделить три нижних строки (если выделять начать в области этих строк).
В Хроме очень страшно выделяется, с градиентом на фоне выделения.
В Хроме очень страшно выделяется, с градиентом на фоне выделения.
Ага, в хроме выделение всегда ужасное)
Всё это придумано для избавления от js-а.
Всё это придумано для избавления от js-а.
Добавьте pointer-events: none для .fade, тогда в Firefox и webkit'ах фейд не будет мешать выделению текста.
спасибо
Тогда уж и ссылку на hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/ (пример — demos.hacks.mozilla.org/openweb/pointer-events/ )
Зачем так много кода и цсс?
Контейнеру { position: relative }, градиенту { position: absolute; bottom: 0; width: 100%; height: 60px; }
Контейнеру { position: relative }, градиенту { position: absolute; bottom: 0; width: 100%; height: 60px; }
а если текст умещается?
Градиент будет себе висеть внизу.
а если текст помещается ровно до упора?
последние строки будут скрыты градиентом, но это не будет корректно.
последние строки будут скрыты градиентом, но это не будет корректно.
Согласен, но в вашем случае это тоже происходит. А вот когда текста меньше — тогда да, у вас градиент «скрывается».
Что в этом некорректного? Так же как и в вашем случае пользователь увидит один и тот же текст, и в том и в другом случае он будет знать что это весь контент который он может увидеть т.к скрола вниз нет.
какого скрола?
Который мог быть если бы вы использовали overflow: auto; вместо hidden.
вы не поняли сути задачи.
Вы не правы, я все понял, и мой вопрос был адресован как раз к самой задаче, что плохого в том что мы увидим fade если текст влезает в аккурат под размер контейнера, зачем нам вообще ставить такую задачу? А к решению у меня вопросов нет, оно работает, хоть и громоздкое.
Ну так пользователь подумает, что контент можно развернуть, кликнет, а ничего не произойдёт, только fade пропадёт
Что значит «развернуть», и куда пользователь по-вашему захочет кликнуть?
Ну вот как тут: stillion.ru/masters/10/
Что общего вы находите у блока по вашей ссылке и у того что в вашем примере? У вас кажется нет кнопки «Продолжение...», так и не понял куда пользователь по-вашему будет кликать чтобы попытаться развернуть контент.
Вот здесь, наверное, лучше видно stillion.ru/masters/17/
Я замучаю вас своим вопросом, уж простите)
У вас по ссылке fade кликабелен (cursor: pointer;) + в нем недвусмысленно написано «Продолжение рассказа».
Еще раз, куда и почему по-вашему пользователь будет кликать в вашем примере, если fade не кликабелен и нет никакой кнопки «Продолжение...», особенно если учесть что на большинстве сайтов fade не кликабелен а лишь является элементом дизайна?
У вас по ссылке fade кликабелен (cursor: pointer;) + в нем недвусмысленно написано «Продолжение рассказа».
Еще раз, куда и почему по-вашему пользователь будет кликать в вашем примере, если fade не кликабелен и нет никакой кнопки «Продолжение...», особенно если учесть что на большинстве сайтов fade не кликабелен а лишь является элементом дизайна?
Тогда пользователь увидит внизу градиент от белого к белому :-)
А что за fade.png?
Соль сей дизайнерской фишки Вы не раскрыли. Кому интересно — habrahabr.ru/blogs/personal/31284/ (в сети можно найти перевод на русском)
Соль сей дизайнерской фишки Вы не раскрыли. Кому интересно — habrahabr.ru/blogs/personal/31284/ (в сети можно найти перевод на русском)
Красивый и вроде как нестандартный пример использования флоата для выталкивания другого флоата.
Абсолютно не изысканный метод. ПО мне лисно удобнее так
И стили конечно
.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;
}
Господа, о чем вы? Как это относится к данной теме?
напрямую: nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/
хотя градиент текст — это лишь одна из частей проблемы
хотя градиент текст — это лишь одна из частей проблемы
Топик никак не затрагивает реализацию самого градиента, он о совершенно о другом, fade.png в данном случае мог содержать полупрозрачные облака, или дым под который плавно уходит текст, css3-градиенты тоже бы тогда относились к теме «напрямую»?
Интересная реализация, спасибо за демку, а то пока в firebug не посмотрел, понять не мог что к чему.
Я думал будет про градиент, а тут про какой-то сложный метод позиционирования на все случаи жизни.
Почему ничего не сказано в каких браузерах работает?
Почему ничего не сказано в каких браузерах работает?
Отличное решение. Чтобы понять его пришлось напрячь мозг. Я бы решал эту задачу не без jquery.
Отлично! Я как-то сделал похожую штуку, но для однострочного варианта — kizu.ru/fun/overflower/
Советую ваш пример проапгрейдить задав контейнерам (ну и всей цепочке вверх до HTML) высоту в 100%, тогда можно будет изменяя размеры окна видеть момент когда появляется градиент.
Советую ваш пример проапгрейдить задав контейнерам (ну и всей цепочке вверх до HTML) высоту в 100%, тогда можно будет изменяя размеры окна видеть момент когда появляется градиент.
.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
зы: хочу заметить, но вы скорее всего увидели, решение, конечно же, не будет работать в ИЕ6
это почему не будет-то?
.fade {
position: absolute;
left: 0;
top: 160px;
width: 100%;
height: 50px;
}
всё показывается.
Смысл моего решения в том, что фейд никто не увидит, когда контента мало! И это без js.
.fade {
position: absolute;
left: 0;
top: 160px;
width: 100%;
height: 50px;
}
всё показывается.
Смысл моего решения в том, что фейд никто не увидит, когда контента мало! И это без js.
ничего подобного:
ведь контейнер с контентом имеет допустимую фикс высоту (сделано для гибкости)
ведь контейнер с контентом имеет допустимую фикс высоту (сделано для гибкости)
А сделайте фон красным) Или выложите куда-нибудь «потыкать»
фон не текста, а всего документа
Ну и что? вполне возможна ситуация, когда внутреннее содержимое будет умещаться, но чуть-чуть залезать на фейд, тем самым вводя пользователя в заблуждение.
Суть задачи была именно в том, чтобы показывать фейд только когда текст выходит за рамки, а если умещается, пусть и впритык, то не показывать фейд.
Суть задачи была именно в том, чтобы показывать фейд только когда текст выходит за рамки, а если умещается, пусть и впритык, то не показывать фейд.
вот это вод чуть-чуть можно компенсировать пару пикселями отступа и это себя оправдает больше, нежели делать предложенный вами вариант который существенно сложнее(!).
ну а если вы не настроены принимать сторонние решения, которые просты и юзабельны в 99% случаев, а стараетесь всеми силами, высасывая из пальца, показать преимущества вашего решения, то текущий диалог не имеет смысла продолжать.
ну а если вы не настроены принимать сторонние решения, которые просты и юзабельны в 99% случаев, а стараетесь всеми силами, высасывая из пальца, показать преимущества вашего решения, то текущий диалог не имеет смысла продолжать.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Делаем красивый fade для переполненного блока без js