Cssing »архів - ідея розсувних дверей в css
Блог вебстандартіста і Вебразработчик Юрія "akella" Артюха.
Напевно одна з перших статей про CSS, яка мене захопила, була "Розсувні двері CSS" (і друга частина) (оригінал). Мені сподобалося, що для вирішення деяких проблем верстки часом треба хоч і трохи, але нестандартно мислити. В результаті ця ідея (розсувних дверей) кілька разів заощадила мені час. Ось пара застосувань, з яких Ви, я сподіваюся, уловите ідею і може бути вона кому то допоможе. І хоча багато хто напевно знайомі з нею, проте ...
Розсувні двері на ukr.net
Колись давно на сайті Укр.нет, ще коли я його перший раз переробляв (ось тут варіант) була жовта область для пошуку, вона ставила собі в тлі однієї картинкою - вот такой вот великий і виглядало ось так:
Однак пізніше знадобився редизайн, де ця область починала займати дві третини колонки. А зараз вона взагалі в ширину середньої колонки - самі подивіться:
Природно, коли запахло першим зміною її ширини мені було лінь перемальовувати картинку в потрібну ширину. Звичайно захотілося зробити це як то більш ширина-незалежно. (Напевно, тому що я знав, що її ширина ще 10 раз зміниться). На допомогу прийшли "розсувні двері".
Отже, завдання: була область широка з однієї фонової картинкою. Як, що не перемальовуючи картинку, зробити область вже, і теж з круглими краями?
Ось такий там був код HTML (і зараз такий):
Для початку поставимо це фон (великий який) для зовнішнього діва:
- #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 form) відсунувся:
І якщо ви не вміючи малювати в Фотошопі спробуєте це зобразити для свого поста на блозі (що б всім стало зрозуміло), то вийде (заодно прокляв маленьку ширину контент-області на блозі :)):
(А тут трохи більше)
Якщо спробувати уявити собі це те - ми як би відсунули одну дверку - через яку став світити нижній фон.
Ось таким ось чином за допомогою все тієї ж великий картинки вийшло зробити жовту область з круглими краями для довільної довжини блоку - обмеженою звичайно шириною великий жовтої картинки.
Може через багатослівності (многокартінковості) краса ідеї трохи смазалась - але озирніться, 3-4 рядки ЦСС заощадили нам відкриття фотошопа. Мені здається це немало.
Взагалі ж очевидно що присобачить цю ідею (як і будь-яку гарну ідею) можна до чого завгодно. Розсовувати двері можна і по вертикалі. Ось тут наприклад я їх развіднул по вертикалі. (Знову ж для круглих країв, червоним і зеленим позначені "двері")
Варто згадати оригінальну статтю Дага Баумана де він їх розсовував для навігації. Для її (ідеї) застосування досить її відчути, зробити своєю, або вкрасти як я це називаю. )
Втім не така вона складна, і я впевнений що багато її з успіхом застосовували, але сподіваюся кому то це все ж допоможе.
Посилання по цій темі
Намагався бути максимально зрозумілим, але ось ще інформація по цій темі:
При збільшенні шрифту жахи відбуваються :)
В курсі (більше року тому як верстав ... Але ...
Лінь, диплом, літо, керівництво, для якого це не пріоритет .... так що не страти відразу, коли-небудь все буде Elastic;)
PS Мені все одно соромно.
такий прийом не надто працює, якщо у фону вирізані кути з прозорістю ...
Це не зовсім вірно. Просто він чуть чуть ускладнюється.
Другий приклад з вертикальними розсувними дверима якраз з прозорими кутами. І, наскільки видно, прийом працює.
Якби в даному випадку картинка була з прозорим кутами досить було б виправити для фону:
- #searchrow form
- background: transparent #fff url (pic / bg_search.gif) no-repeat 0 0;
І все було б як треба.
Якщо ж там обов'язково був потрібен якийсь градієнтний просвічує фон (до речі в другому прикладі саме так, в ФФ) то довелося б ще поміркувати. Але метою я ставив показати ідею, а не зробити супер універсальне рішення однієї жовтої картинкою все-все-все :)
А за великим рахунком, просто сказати що мені ця ідея подобається.
Напевно в разі мегаважной прозорості для цієї жовтої картинки було б зручніше як то по-іншому порізати її. Панацеї не існує.
Хороша ідея і дуже дохідливо ти її пояснюєш. Я, наприклад знаходився в полоні парадигми ul li для цієї ідеї :) а тепер очевидна річ стала зрозуміла як грім серед ясного неба.
А щодо прозорості так це самі знаєте чому аж ніяк не універсальна річ, треба буде iepngtransparencyfix.js писати ще :)
А чому не використав закруглені кути без використання зображень?
Закруглені кути без зображень - це ви що маєте на увазі?
А хтось взагалі може підказати книгу по css?
Майже всі книги гарні для початку, хоча багато інформації зосереджено наприклад на alistpart.com і у багатьох зарубіжних блогерів. Книга Зельдман "Designiing With Web Standards" (російською) зовсім не погана, інші сучасні книги в основному ще не переведені. Книги Дена Цедерхолма теж були б дуже корисні для прочитання.
До речі, той самий Седерхольм в своїй книзі "Куленепробивний веб-дизайн" описує техніку створення розтягування подібного боксу як по вертикалі, так і по горизонталі одночасно + ще і шрифт заданий не в пікселях. Ось приклад, якщо кому цікаво:
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 коду вивелося
This box is:
Indestructible!
Ну ... насправді це варіація на тему чотирьох вкладених Дивов з притиснутими "куточками" для кожного з них. Ну і Маргинем для тексту всередині нього.
Величезне спасибі за статтю, все написано ясно і зрозуміло! Але у мене закрався питання: як зробити такий блок гумовим? Наприклад: робимо гумову верстку з умовою, що в ряд йдуть кілька блоків фіксованої ширини, а останній блок повинен займати все залишився. Ширина контенту всередині не змінюється.
Буду дуже вдячний за відповідь
Потрібно просто взяти таку ж картинку але набагато більшого ніж потрібно розміру - все решта техніки залишаються такими ж.