Обрезание блока с затемнением

[rb88]

Добрый вечер!

Есть задача обрезать контент внутри блока (делаю при помощи overflow: hidden;) далее нужно добавить красоты, плавного(градиентного) ухода текста, т.е. положить сверху див в png с градиентным фоном. Получается, что нужно два дива одинаковой высоты, т.к. контент тянется (что уже напрягает), плюс див с градиентом должен лежать поверх дива с контентом.

Дабы не возникало вопросов по поводу "коммерческого отдела" выкладываю код и изображение.

<style type="text/css">
div.round-box {background: url('i/t.gif') 0 0 repeat-x; height: 100%;}
div.round-box .line-l {background: url('i/l.gif') 0 0 repeat-y;}
div.round-box .line-r {background: url('i/r.gif') 100% 0 repeat-y;}
div.round-box .line-b {background: url('i/b.gif') 0 100% repeat-x;}
div.round-box .tl {background: url('i/tl.gif') 0 0 no-repeat;}
div.round-box .tr {background: url('i/tr.gif') 100% 0 no-repeat;}
div.round-box .bl {background: url('i/bl.gif') 0 100% no-repeat;}
div.round-box .br {background: url('i/br.gif') 100% 100% no-repeat; padding: 20px;}
div.round-box .content {padding: 15px 70px 15px 15px; background: url('i/overflow.png') repeat-y 100% 0;}
div.round-box .content div.l {overflow: hidden;}
</style>


	<div class="round-box">
	<div class="line-l"><div class="line-r"><div class="line-b">
	<div class="tl"><div class="tr"><div class="bl"><div class="br">
	<div class="content">	
		<div class="l">В 2007-м досрочный уход из профессионального тура 4-й ракетки мира Ким Клийстерс стал сенсацией. Или не стал. Уже и не припомнить. Много мячей с тех пор улетело, да и суперзвездой Клийстерс все-таки не была. И кто бы мог подумать, что, вернувшись два года спустя совсем взрослой женщиной, Ким с таким изяществом примерит на себя статус «icon».</div>
		</div></div></div></div>	
	</div></div></div></div>

Буду признателен за помощь!

[psywalker]

А просто сделать правым фоном нельзя? Один блок, фон справа тянется сверху вниз?

[mishka]

блок с пнг на абсолют. Ему top, right, bottom, для ие6 експрешн который высоту ему будет задавать отсчитывая от родителя.

[rb88]

А просто сделать правым фоном нельзя? Один блок, фон справа тянется сверху вниз?

В принципе сейчас так и осуществленно, только увы не работает прозрачность png фона, на втором примере в скриншоте это заметно, даже если поставить transparent в background.

div.round-box .content {padding: 15px 70px 15px 15px; background: url('i/overflow.png') repeat-y 100% 0;}

блок с пнг на абсолют. Ему top, right, bottom, для ие6 експрешн который высоту ему будет задавать отсчитывая от родителя.

и он будет тянуться по горизонтали и вертикали в зависимости от контента?

[psywalker]

В принципе сейчас так и осуществленно, только увы не работает прозрачность png фона, на втором примере в скриншоте это заметно, даже если поставить transparent в background.

div.round-box .content {padding: 15px 70px 15px 15px; background: url('i/overflow.png') repeat-y 100% 0;}

и он будет тянуться по горизонтали и вертикали в зависимости от контента?

Да, но только нужен экспрешан

height: expression(this.parentNode.offsetHeight+142+'px');}

Такой, тока выстави нужные отступы или без них

[mishka]

и он будет тянуться по горизонтали и вертикали в зависимости от контента?

по вертикали будет. Насчет по горизонтали - я на твоем скрине неувидел что по горизонтале пнг должен тянутся.

Edited December 9, 2009 by mishka2

[psywalker]

по вертикали будет. Насчет по горизонтали - я на твоем скрине неувидел что по горизонтале пнг должен тянутся по горизонтале.

Он наверное это и имел ввиду

[mishka]

Вобщет смотрю на задумку... Чтото мне вообще ненравится идея обрезать текст да еще и пнгешкой закрывать.

[rb88]

Он наверное это и имел ввиду

да, именно это.

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

<style>
div.round-box {background: url('i/t.gif') 0 0 repeat-x; height: 100%; border: 0px solid red;}
div.round-box .line-l {background: url('i/l.gif') 0 0 repeat-y;}
div.round-box .line-r {background: url('i/r.gif') 100% 0 repeat-y;}
div.round-box .line-b {background: url('i/b.gif') 0 100% repeat-x;}
div.round-box .tl {background: url('i/tl.gif') 0 0 no-repeat;}
div.round-box .tr {background: url('i/tr.gif') 100% 0 no-repeat;}
div.round-box .bl {background: url('i/bl.gif') 0 100% no-repeat;}
div.round-box .br {background: url('i/br.gif') 100% 100% no-repeat; padding: 20px;}

div#test {position: absolute; width: 70px; height: 100%; top: 0; right: 0; bottom: 0; background: transparent url('i/overflow.png') repeat-y 100% 0;}

div.round-box .content {padding: 15px 70px 15px 15px; background: transparent url('i/overflow.png') repeat-y 100% 0;}
div.round-box .content div.l {overflow: hidden;}
</style>

	<div class="round-box">
	<div class="line-l"><div class="line-r"><div class="line-b">
	<div class="tl"><div class="tr"><div class="bl"><div class="br">

		<div id="test"></div>

	<div class="content">	
		<div class="l">В 2007-м досрочный уход из профессионального тура 4-й ракетки мира Ким Клийстерс стал сенсацией. Или не стал. Уже и не припомнить. Много мячей с тех пор улетело, да и суперзвездой Клийстерс все-таки не была. И кто бы мог подумать, что, вернувшись два года спустя совсем взрослой женщиной, Ким с таким изяществом примерит на себя статус «icon».</div>
		</div></div></div></div>	
	</div></div></div></div>

Вобщет смотрю на задумку... Чтото мне вообще ненравится идея обрезать текст да еще и пнгешкой закрывать.

это достаточно стандартно, с помощью таблиц легко осуществить, как в новой почте Яндекса, например.

Edited December 9, 2009 by rb88

[mishka]

это достаточно стандартно, с помощью таблиц легко осуществить, как в новой почте Яндекса, например.

Я не про реализацию говорю. Блоками это тоже легко сделать. Я говорю вообще про саму идею обрезать и скрыть кусок текста.

[rb88]

Разобрался! Спасибо большое, парни!

Я не про реализацию говорю. Блоками это тоже легко сделать. Я говорю вообще про саму идею обрезать и скрыть кусок текста.

А чем смущает, в принципе?

[psywalker]

Разобрался! Спасибо большое, парни!

А чем смущает, в принципе?

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

[Great Rash]

Согласен с mishka2, какой-то это отстой - прятать текст под градиент... Как его читать то?

[psywalker]

Согласен с mishka2, какой-то это отстой - прятать текст под градиент... Как его читать то?

Есть вариант сделать градиент нижним слоем, и зафиксить внизу прям в блоке див. Далее текст просто всегда будет плавно уходить в градиент, вот эта вещь покрасивее. А то что сбоку, это конеш не прикольно.

[Justnewone]

Не, наверна была мысль типа уходит текст в небытие, но не откровенно. а вроде как со смыслом.

Ваще неюзабельный прием, на мой взгляд.

[rash]

Я не про реализацию говорю. Блоками это тоже легко сделать. Я говорю вообще про саму идею обрезать и скрыть кусок текста.

Ну если это не основной контент — то почему бы нет.

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

Если блок имеет какую-то разумную высоту, то можно задать высоту «обрезалки» с запасом, абсолютно спозиционировать ее и скрыть лишнее с помощью overflow.

[psywalker]

Не, наверна была мысль типа уходит текст в небытие, но не откровенно. а вроде как со смыслом.

Ваще неюзабельный прием, на мой взгляд.

Вот такая тема короче, только по круче надо сделать

http://psywalker.ru/Forum/Shadow_bg_bottom/main.html

[Clayton]

Нормалек

[psywalker]

Нормалек

Ну так

[Justnewone]

Вот такая тема короче, только по круче надо сделать

http://psywalker.ru/Forum/Shadow_bg_bottom/main.html

не, ну со скроллом все путем, канечна

[psywalker]

не, ну со скроллом все путем, канечна

Так мы же не вредные

http://psywalker.ru/Forum/Shadow_bg_bottom/main2.html