Идея раздвижных дверей в CSS
Наверное одна из первых статей про CSS, которая меня захватила, была “Раздвижные двери CSS” (и вторая часть)(оригинал). Мне понравилось, что для решения некоторых проблем верстки порой нужно хоть и чуть-чуть, но нестандартно мыслить. В результате эта идея(раздвижных дверей) несколько раз сэкономила мне время. Вот пара применений, из которых Вы, я надеюсь, уловите идею и может быть она кому то поможет. И хотя многие наверняка знакомы с ней, тем не менее…
Раздвижные двери на ukr.net
Когда то давно на сайте укр.нет, еще когда я его первый раз переделывал (вот тут вариант) была желтая область для поиска, она задавалась в фоне одной картинкой - вот такой вот большой и выглядело вот так:
Однако позднее понадобился редизайн, где эта область начинала занимать две трети колонки. А сейчас она вообще в ширину средней колонки - сами посмотрите:
Естественно, когда запахло первым изменением ее ширины мне было лень перерисовывать картинку в нужную ширину. Конечно захотелось сделать это как то более ширино-независимо.(наверно, потому что я знал, что ее ширина еще 10 раз изменится). На помощь пришли “раздвижные двери”.
Итак, задача: была область широкая с одной фоновой картинкой. Как, не перерисовывая картинку, сделать область уже, и тоже с круглыми краями?
Вот такой там был код HTML(и сейчас такой):
- <!– #searchrow –>
- <div id="searchrow">
- <form >
- …
- </form>
- </div>
- <!–END #searchrow –>
Для начала зададим этот фон(большой который) для внешнего дива:
- #searchrow{
- height:60px;
- background: #fff url(pic/bg_search.gif) no-repeat 100% 0;
Вот что выйдет:
Слева край не круглый.
Тогда добавим еще для формы:
- #searchrow form{
- height:60px;/*для одинаковой высоты*/
- background: transparent url(pic/bg_search.gif) no-repeat 0 0;
Получим вот что:
Сейчас у нас две картинки фоновых - одна поверх другой. Осталось раздвинуть двери:
- #searchrow {
- padding-right:10px;
В результате:
То что нужно. Блок формы (#searchrow form) отодвинулся:
И если вы не умея рисовать в Фотошопе попробуете это изобразить для своего поста на блоге (что бы всем стало понятно), то выйдет(заодно прокляв маленькую ширину контент-области на блоге :)):
(а здесь чуть больше)
Если попытаться представить себе это то - мы как бы отодвинули одну дверку - из-за которой стал светить нижний фон.
Вот таким вот образом с помощью все той же большой картинки получилось сделать желтую область с круглыми краями для произвольной длины блока - ограниченной конечно шириной большой желтой картинки.
Может из-за многословности(многокартинковости) красота идеи немного смазалась - но оглянитесь, 3-4 строчки ЦСС сэкономили нам открытие фотошопа. Мне кажется это немало.
Вообще
Вообще же очевидно что присобачить эту идею(как и любую хорошую идею) можно к чему угодно. Раздвигать двери можно и по вертикали. Вот тут например я их развиднул по вертикали.(опять же для круглых краев, красным и зеленым обозначены “двери”)
Стоит вспомнить оригинальную статью Дага Баумана где он их раздвигал для навигации. Для ее(идеи) применения достаточно ее прочувствовать, сделать своей, или украсть как я это называю. :)
Впрочем не такая она сложная, и я уверен что многие ее с успехом применяли, но надеюсь кому то это все же поможет.
Ссылки по этой теме
Пытался быть максимально понятным, но вот еще информация по этой теме:
- Sliding Doors of CSS (part 2) - оригинальная статья Дага Баумана
- Раздвижные двери CSS (и вторая часть) - переводы Андрея Смирнова
При увеличении шрифта ужасы происходят :)
В курсе ( больше года назад как верстал… Но…
Лень, диплом, лето, руководство, для которого это не приоритет….. так что не казни сразу, когда-нибудь все будет Elastic ;)
PS Мне все равно стыдно.
такой приём не очень работает, если у фона вырезаны углы с прозрачностью…
Это не совсем правильно. Просто он чуть чуть усложняется.
Второй пример с вертикальными раздвижными дверями как раз с прозрачными углами. И, насколько видно, прием работает.
Если бы в данном случае картинка была с прозрачным углами достаточно было бы исправить для фона:
transparent#fff url(pic/bg_search.gif) no-repeat 0 0;И все было бы как надо.
Если же там обязательно был нужен какой то градиентный просвечивающий фон(кстати во втором примере именно так, в ФФ) то пришлось бы еще покумекать. Но целью я ставил показать идею, а не сделать супер универсальное решение одной желтой картинкой всё-всё-всё :)
А по большому счету, просто сказать что мне эта идея нравится.
Наверно в случае мегаважной прозрачности для этой желтой картинки было бы удобнее как то по-другому порезать её. Панацей не существует.
Хороша идея и очень доходчиво ты ее объясняешь. Я, например находился в плену парадигмы ul li для этой идеи :) а теперь очевидная вещь стала понятна как гром среди ясного неба.
А насчет прозрачности так это сами знаете почему отнюдь не универсальная вещь, надо будет iepngtransparencyfix.js писать еще :)
А почему не использовал скругленные углы без использования изображений?
Скругленные углы без изображений - это вы что имеете ввиду?
Для скругления используются несколько дивов - угол на смом деле не круглый, но расположение дивов создает попиксельную иллюзию того что он круглый.
Здесь подробнее - http://www.html.it/articoli/nifty/index.html
А кто-то вообще может подсказать книгу по css?
Почти все книги хороши для начала, хотя много информации сосредоточено например на alistpart.com и у многих зарубежных блоггеров. Книга Зельдмана “Designiing With Web Standards”(на русском) совсем не плоха, остальные современные книги в основном еще не переведены. Книги Дэна Цедерхолма тоже были бы очень полезны для прочтения.
Кстати, тот самый Седерхольм в своей книге “Пуленепробиваемый вебдизайн” описывает технику создания растягивания подобного бокса как по вертикали, так и по горизонтали одновременно + еще и шрифт задан не в пикселях. Вот пример, если кому интересно:
@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
не понял, почему вместо xhtml кода вывелось
@import url(”style.css”);
This box is:
Indestructible!
???
Ну… на самом деле это вариация на тему четырех вложенных дивов с прижатыми “уголками” для каждого из них. Ну и маргин для текста внутри него.