Yahoo! Пользовательский интерфейс блог (YUIBlog)

CSS пограничной Трюки с Сложено Коробки

8 марта 2011 в 3:23 вечера Тьерри Кобленц | В CSS 101 , дизайна , развития | 8 Комментариев

Эти приемы помогут вам в достижении конструкций, не прибегая к использованию изображений, CSS3 градиент или посторонних разметки. По рушится ящиков с нулевой line-height и height значений, мы можем отображать содержимое за пределы содержания окна, через границы.

Би-цвет фона

Этот пример не включает в себя IE 6 / 7 обходные пути (проверьте исходный код этой демонстрационную страницу для IE, исправления).

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

Точки и труб между элементами списка

Этот пример показывает, должным образом во всех браузерах после несложных исправления IE.

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

Левый и правый указывая треугольников

Этот пример не включает в себя IE 6 / 7 обходные пути (проверьте исходный код этой демонстрационную страницу для IE, исправления).

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6 и пограничные прозрачности

IE 6 не поддерживает ключевое слово " transparent "для цвета границы. При использовании этого значения, IE 6 рисует черной рамкой.

Исправить это является использование цветовой фильтр , который отображает определенный цвет содержания объекта, как прозрачные. Например, чтобы создать правую стрелку, вы можете использовать это правило:

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

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

Стоп прессы я только что узнал новый трюк (спасибо Chungho Fang)!:

Магия [создать границы прозрачности в IE] это установить "границы стиля 'либо пунктирных или точечных

---

Вот и все! Это всего лишь еще один способ использования границ для достижения изображение менее дизайн.

Дальнейшее чтение

• Исследование регулярных полигонов
• slantastic
• Наклон

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!