Вёрстка изогнутых блоков

[coldug]

Ребята помогите с такими вот вопросами.Я нуб если что =)

Есть блок ,нужно что бы он при добавлении текста расстягивался в длину и ширину .

Теперь вопросы:

1)Как правильно его нарезать в фотошопе ?(какой формат для сохранения ,кол-во частей которое получиться после нарезки)

2)Как позиционировать (float,margin,position?) его отрезаные части(бока,верх,низ) что бы они точно прилегали к блоку?

3)И как будет выглядить код html

Вот как я делал похожий блок, у него изогнуты только бока :

1) PNG24 ,градиент центра,левый и правый бок

2,3)

<div class="box">
<div class="box-right">
</div>
<div class="box-left">
</div>
</div> 

.box {
	position:absolute;



.box-right{

	position:absolute;
	right:0;

}
.box-left{

	position:absolute;
	left:0;

Я почти уверен что я сделал не правильно ,помогите разбораться и дайте пару советов по нарезке макета ,тоже не помешают.

Заранее благодарен.

Edited July 9, 2011 by coldug

[psywalker]

coldug,

Погоди, покажи лучше для начала скриншоты, того, как изначально, потом как должно быть, и скриншот - как не должно быть.

[DjTarik]

А вы уверены, что дизайнер хотел, чтобы этот блок тянулся?

его не нужно делать резиновым...

[coldug]

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

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

[ctpz]

1) нарезаешь примерно так:

2) Резина у тебы здесь не получится из-за нижней изогнутости. Такое лучше фикс делать. Хотя можно при помощи всяческих извращений сделать резиной и такое

[SelenIT]

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

[psywalker]

SelenIT, Дружище, а я не могу никак въехать, какие рисунки ты используешь для псевдоэлементов?

[coldug]

Тоже интересно какие изображения взяты для псевдоэлементов.

Как я понял позиционирование для склеивания блока применяеться и какие есть еще способы?

Покажите кому не сложно примеры склеивания разрезаного изогнутого блока ,можно фиксированого.

[buddah]

psywalker, а ты добавь цвет к body )

SelenIT, а почему первый рисунок для before такой кривой? Это какая-то магия или просто небрежность?

Edited July 10, 2011 by buddah

[psywalker]

psywalker, а ты добавь цвет к body )

Ага, понял, спасибо.

SelenIT, а почему ты вешаешь изображения именно на свойство content ?, а не на background, например так:

.block:after {
    background: url(http://img51.imageshack.us/img51/4601/bottomzd.png) no-repeat;
    position: absolute;
    bottom: -1px;
    left: 0;
    display: block;
    width: 100%;
    height: 20px;
    z-index: 1;
    content: '';
}

[amelice]

SelenIT, а почему ты вешаешь изображения именно на свойство content ?, а не на background, например так:

Я думаю, что для этого есть специальный функционал (url) для content'а, то зачем писать лишнюю строчку?

SelenIT, в книге Мейера написано(дословано):

Может показаться, что позиционирование содержимого элементов :before и :after позволило бы добиться желаемого результата, но CSS2 и CSS2.1 специально запрещают перемещение или позиционирование содержимого элементов :before и :after.

А у тебя :before и :after позиционированы абсолютно. Может, я что-то не понимаю?

Поэкспериментировав поняла, что :before и :after располагаются в content-box'e блока. это правильно?

Еще вопрос- чем отличаются нововеденные ::before и ::after от :before и :after?

Edited July 10, 2011 by cheburek

[psywalker]

cheburek,

Я думаю, что для этого есть специальный функционал (url) для content'а, то зачем писать лишнюю строчку?

Возможно, но тогда почему намного чаще делают именно наоборот? Вот это и хочется понять, понять разницу, все плюсы и минусы этих подходов.

Еще вопрос- чем отличаются нововеденные ::before и ::after от :before и :after?

Да, тоже интересно узнать.

[buddah]

Еще вопрос- чем отличаются нововеденные ::before и ::after от :before и :after?

Ничем. :after - это синтаксис CSS2.1 а ::after - CSS3.

Дословно:

The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

То есть такой синтаксис был введен в CSS3 для определения различий между псевдо-классами и псевдо-элементами.

[SelenIT]

почему первый рисунок для before такой кривой? Это какая-то магия или просто небрежность?

Должна быть правая половина эллипса 30?400, позиционируется по середине блока. При высоте блока до 400px должно быть приемлемое закругление, при большей высоте получается фигня. Я надеялся, что мне удастся растянуть псевдоэлемент по высоте (тогда хватило бы и меньшей исходной картинки), но почему-то не удалось. По моим интуитивным представлениям, псевдоэлемент с внешним содержимым должен вести себя как полный аналог <img>, но, похоже, это не так...

CSS2 и CSS2.1 специально запрещают перемещение или позиционирование содержимого элементов :before и :after

В CSS2, действительно, такое написано, но из CSS2.1, судя по всему, за долгие годы развития спеки это нелепое ограничение убрали. Возможно, не до конца

:before и :after располагаются в content-box'e блока. это правильно?

Они дописываются к содержимому блока (до и после него соответственно), поэтому по умолчанию — да, так и есть.

тогда почему намного чаще делают именно наоборот?

Вероятно, из-за спрайтов. Хотя с content:url(...) спрайты тоже можно использовать, разве что у clip синтаксис неудобный...

P.S. Буду безумно благодарен за помощь в выяснении причин отличия позиционированного псевдоэлемента от аналогичного <img>!

[psywalker]

тогда почему намного чаще делают именно наоборот?

Вероятно, из-за спрайтов. Хотя с content:url(...) спрайты тоже можно использовать, разве что у clip синтаксис неудобный...

А выходит, что если мы делаем так content:url(...), то мы автоматом делаем <img> в контенте псевдоэлемента? Расскажи плиз поподробнее.

P.S. Буду безумно благодарен за помощь в выяснении причин отличия позиционированного псевдоэлемента от аналогичного <img>!

И я!

[amelice]

SelenIT, buddah спасибо.

[SelenIT]

cheburek, тебе спасибо — я сам не задумывался о принципиальных отличиях псевдоэлементов от настоящих и не думал, что они могут/могли быть прописаны в спеке...

[SelenIT]

Да, насчет аналогии псевдоэлементов с content:url(...) и img я заблуждался. Зато, оказывается, синтаксис псевдоэлементов позволяет комбинировать картинки и текст. И больше того — можно комбинировать content:url с фоном, добавляя одним псевдоэлементом 2 картинки (т.е.до 5 картинок на один элемент средствами чистого CSS2.1)!

[psywalker]

Да, насчет аналогии псевдоэлементов с content:url(...) и img я заблуждался. Зато, оказывается, синтаксис псевдоэлементов позволяет комбинировать картинки и текст. И больше того — можно комбинировать content:url с фоном, добавляя одним псевдоэлементом 2 картинки (т.е.до 5 картинок на один элемент средствами чистого CSS2.1)!

Да, но тогда как же нам например позиционировать в псевдоэлементе этот самый content:url(...) вместе с background по разным углам? Не мог бы ты замутить небольшой примерчик?

[Dinow]

psywalker, вот тут примеры использования

[buddah]

Вообще полезная тема получилась, в мемориз!

[psywalker]

psywalker, вот тут примеры использования

Спасибо, но хотелось бы всё же увидеть отдельный мини-пример от SelenIT-а. Этот парень всегда бьёт прямо в цель и наверняка

[coldug]

Спасибо всем за помощь ,но всё таки то что хотелось не разобрал.Вот перефразирую вопросы.

Вот блок, изогнутый в центре и справа.

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

Вопросы:

1)Как бы вы нарезали этот блок?

2)Как лечге всего склеить между собой части блока (желательно приммер html,css)как сделать резиновым не обязательно.

Очень нужно разобраться как склеивать блоки ,не обязательно резиновые ,любые...

Еще раз всем спасибо.

[amelice]

Да, насчет аналогии псевдоэлементов с content:url(...) и img я заблуждался. Зато, оказывается, синтаксис псевдоэлементов позволяет комбинировать картинки и текст. И больше того — можно комбинировать content:url с фоном, добавляя одним псевдоэлементом 2 картинки (т.е.до 5 картинок на один элемент средствами чистого CSS2.1)!

Да, но тогда как же нам например позиционировать в псевдоэлементе этот самый content:url(...) вместе с background по разным углам? Не мог бы ты замутить небольшой примерчик?

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

Очень хочу, чтоб примерчик был.

Вообще полезная тема получилась, в мемориз!

Да, и ждем продолжения

Edited July 11, 2011 by cheburek

[ctpz]

Знаю, что это бред сумасшедшего, но вот вариант того, как можно сделать изонутость сверху. Может это можно сделать по-другому, но я пока что догадался сделать только так.

Скоро выложу ще вариант изготовления изогнутости справа, слева и снизу.

Edited July 11, 2011 by ctpz

[ctpz]

Вот новый вариант: http://jsfiddle.net/e3YbS/7/

Никак не могу скруглить справа. Не могу правильный отступ задать.