Идея раздвижных дверей в CSS

8 June, 2006

XHTML/CSS

Наверное одна из первых статей про CSS, которая меня захватила, была “Раздвижные двери CSS” (и вторая часть)(оригинал). Мне понравилось, что для решения некоторых проблем верстки порой нужно хоть и чуть-чуть, но нестандартно мыслить. В результате эта идея(раздвижных дверей) несколько раз сэкономила мне время. Вот пара применений, из которых Вы, я надеюсь, уловите идею и может быть она кому то поможет. И хотя многие наверняка знакомы с ней, тем не менее…

Раздвижные двери на ukr.net

Когда то давно на сайте укр.нет, еще когда я его первый раз переделывал (вот тут вариант) была желтая область для поиска, она задавалась в фоне одной картинкой – вот такой вот большой и выглядело вот так:

Однако позднее понадобился редизайн, где эта область начинала занимать две трети колонки. А сейчас она вообще в ширину средней колонки – сами посмотрите:

Естественно, когда запахло первым изменением ее ширины мне было лень перерисовывать картинку в нужную ширину. Конечно захотелось сделать это как то более ширино-независимо.(наверно, потому что я знал, что ее ширина еще 10 раз изменится). На помощь пришли “раздвижные двери”.
Итак, задача: была область широкая с одной фоновой картинкой. Как, не перерисовывая картинку, сделать область уже, и тоже с круглыми краями?
Вот такой там был код HTML(и сейчас такой):

  1. <!– #searchrow –>
  2. <div id="searchrow">
  3. <form >
  4. </form>
  5. </div>
  6. <!–END #searchrow –>

Для начала зададим этот фон(большой который) для внешнего дива:

  1. #searchrow{
  2. height:60px;
  3. background: #fff url(pic/bg_search.gif) no-repeat 100% 0;

Вот что выйдет:

Слева край не круглый.
Тогда добавим еще для формы:

  1. #searchrow form{
  2. height:60px;/*для одинаковой высоты*/
  3. background: transparent url(pic/bg_search.gif) no-repeat 0 0;

Получим вот что:

Сейчас у нас две картинки фоновых – одна поверх другой. Осталось раздвинуть двери:

  1. #searchrow {
  2. padding-right:10px;

В результате:

То что нужно. Блок формы (#searchrow form) отодвинулся:

И если вы не умея рисовать в Фотошопе попробуете это изобразить для своего поста на блоге (что бы всем стало понятно), то выйдет(заодно прокляв маленькую ширину контент-области на блоге :)):

(а здесь чуть больше)
Если попытаться представить себе это то – мы как бы отодвинули одну дверку – из-за которой стал светить нижний фон.
Вот таким вот образом с помощью все той же большой картинки получилось сделать желтую область с круглыми краями для произвольной длины блока – ограниченной конечно шириной большой желтой картинки.

Может из-за многословности(многокартинковости) красота идеи немного смазалась – но оглянитесь, 3-4 строчки ЦСС сэкономили нам открытие фотошопа. Мне кажется это немало.

Вообще

Вообще же очевидно что присобачить эту идею(как и любую хорошую идею) можно к чему угодно. Раздвигать двери можно и по вертикали. Вот тут например я их развиднул по вертикали.(опять же для круглых краев, красным и зеленым обозначены “двери”)
Стоит вспомнить оригинальную статью Дага Баумана где он их раздвигал для навигации. Для ее(идеи) применения достаточно ее прочувствовать, сделать своей, или украсть как я это называю. :)
Впрочем не такая она сложная, и я уверен что многие ее с успехом применяли, но надеюсь кому то это все же поможет.

Ссылки по этой теме

Пытался быть максимально понятным, но вот еще информация по этой теме:

XHTML/CSS

15 комментариев к “Идея раздвижных дверей в CSS”

Flack | 1. 8 June, 2006

При увеличении шрифта ужасы происходят :)

akella | 2. 8 June, 2006

В курсе ( больше года назад как верстал… Но…
Лень, диплом, лето, руководство, для которого это не приоритет….. так что не казни сразу, когда-нибудь все будет Elastic ;)
PS Мне все равно стыдно.

ZeT | 3. 8 June, 2006

такой приём не очень работает, если у фона вырезаны углы с прозрачностью…

akella | 4. 9 June, 2006

Это не совсем правильно. Просто он чуть чуть усложняется.
Второй пример с вертикальными раздвижными дверями как раз с прозрачными углами. И, насколько видно, прием работает.

Если бы в данном случае картинка была с прозрачным углами достаточно было бы исправить для фона:

  1. #searchrow form{
  2. background: transparent #fff url(pic/bg_search.gif) no-repeat 0 0;

И все было бы как надо.
Если же там обязательно был нужен какой то градиентный просвечивающий фон(кстати во втором примере именно так, в ФФ) то пришлось бы еще покумекать. Но целью я ставил показать идею, а не сделать супер универсальное решение одной желтой картинкой всё-всё-всё :)
А по большому счету, просто сказать что мне эта идея нравится.

Наверно в случае мегаважной прозрачности для этой желтой картинки было бы удобнее как то по-другому порезать её. Панацей не существует.

ganges | 5. 9 June, 2006

Хороша идея и очень доходчиво ты ее объясняешь. Я, например находился в плену парадигмы ul li для этой идеи :) а теперь очевидная вещь стала понятна как гром среди ясного неба.
А насчет прозрачности так это сами знаете почему отнюдь не универсальная вещь, надо будет iepngtransparencyfix.js писать еще :)

Setti @ PlayStation | 6. 14 July, 2006

А почему не использовал скругленные углы без использования изображений?

Merle | 7. 18 August, 2006

Скругленные углы без изображений – это вы что имеете ввиду?

akella | 8. 18 August, 2006

Для скругления используются несколько дивов – угол на смом деле не круглый, но расположение дивов создает попиксельную иллюзию того что он круглый.
Здесь подробнее – http://www.html.it/articoli/nifty/index.html

ShmaToK | 9. 20 August, 2006

А кто-то вообще может подсказать книгу по css?

akella | 10. 20 August, 2006

Почти все книги хороши для начала, хотя много информации сосредоточено например на alistpart.com и у многих зарубежных блоггеров. Книга Зельдмана “Designiing With Web Standards”(на русском) совсем не плоха, остальные современные книги в основном еще не переведены. Книги Дэна Цедерхолма тоже были бы очень полезны для прочтения.

Zigzag | 11. 24 August, 2006

Кстати, тот самый Седерхольм в своей книге “Пуленепробиваемый вебдизайн” описывает технику создания растягивания подобного бокса как по вертикали, так и по горизонтали одновременно + еще и шрифт задан не в пикселях. Вот пример, если кому интересно:

@import url(“style.css”);

This box is:
Indestructible!

.container {
float: left;
color: #666;
background: url(images/rounded-right.gif) no-repeat top right;
}
.desc {
margin: 0;
padding: 9px 9px 0 9px;
background: url(images/rounded-left.gif) no-repeat top left;
}
.link {
margin: 0;
padding: 0 0 0 9px;
background: url(images/rounded-left.gif) no-repeat bottom left;
}
.link em {
display: block;
padding: 0 9px 9px 0;
font-style: normal;
background: url(images/rounded-right.gif) no-repeat bottom right;
}
.container a {
font-size: 130%;
color: #E70;
}

изображения:

1.rounded-left.gif 9х200 (WxH)
2.rounded-right.gif 400×200

Zigzag | 12. 24 August, 2006

не понял, почему вместо xhtml кода вывелось

@import url(”style.css”);

This box is:
Indestructible!

???

0lympian | 13. 13 October, 2006

Ну… на самом деле это вариация на тему четырех вложенных дивов с прижатыми “уголками” для каждого из них. Ну и маргин для текста внутри него.

Denys | 14. 14 May, 2012

Огромное спасибо за статью, все написано ясно и понятно! Но у меня закрался вопрос:как сделать такой блок резиновым? Например: делаем резиновую верстку с условием, что в ряд идут несколько блоков фиксированной ширины, а последний блок должен занимать все оставшееся пространство. Ширина контента внутри не меняется.
Буду очень признателен за ответ

akella | 15. 14 May, 2012

Нужно просто взять такую же картинку но намного бОльшего чем нужно размера – все остальные техники остаются такими же.

Оставить комментарий