Yahoo! interfaz de usuario de blog (YUIBlog)

CSS Tricks frontera con cajas colapsadas

08 de marzo 2011 a las 3:23 pm por Thierry Koblentz | En CSS 101 , Diseño , Desarrollo | 8 Comentarios

Estos trucos te ayudarán a lograr los diseños sin necesidad de recurrir al uso de imágenes, el gradiente de CSS3 o marcas extrañas. Por el colapso de las cajas con cero line-height y height los valores, se puede mostrar el contenido fuera de la caja de contenido, a lo largo de las fronteras.

Bi-color de fondo

Este ejemplo no incluye Internet Explorer 7.6 soluciones (ver el código fuente de esta página de demostración para los arreglos de 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> 

Los puntos y las tuberías entre elementos de la lista

En este ejemplo se muestra correctamente en navegadores IE después de algunas correcciones de simple.

 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> 

Triángulos izquierdo y derecho de puntero

Este ejemplo no incluye Internet Explorer 7.6 soluciones (ver el código fuente de esta página de demostración para los arreglos de 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 y la transparencia de la frontera

IE 6 no es compatible con la palabra clave " transparent "para el color del borde. Cuando se utiliza este valor, es decir 6 dibuja un borde negro.

La solución a esto es utilizar el filtro de croma que muestra un color específico del contenido del objeto de la mayor transparencia. Por ejemplo, para crear una flecha hacia la derecha señalando que puede utilizar esta regla:

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

La declaración de font-size es otra solución para IE 6. Es para asegurarse de que este navegador no aumentar la altura de la caja.

Parar las prensas que acabo de aprender un nuevo truco (gracias Chungho Fang)!

La magia [para crear transparencia en la frontera IE] es establecer 'border-style' a cualquiera de guiones o de puntos

---

Eso es todo! Esto es sólo una forma más de utilizar los bordes para lograr la imagen-less.

Para leer más

• Un estudio de polígonos regulares
• slantastic
• Se inclina

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg it! | reddit!