Hola, el siguiente aporte es para aquellos que no quieran utilizar los bordes tradicionlaes.
Me lo encontré curioseando en el CSS Play que Infinity nos posteó alguna ocasión.
Lo coloqué como archivo adjunto.
Hay 3 tipos de Bordes o esquinas mejor sea dicho.
Dentro del adjunto encontrarán una página con los ejemplos de las esquinas y una descripción de cada una.
Pueden cambiar el texto y adecuarlas a su gusto en tamaño y colores, además de introducir dentro de ellas imágenes, marquesinas, o cualquier cosa que prefieran.
Solamente observan el código fuente y encontrarán que el archivo está dividido en dos partes.
EL CSS Y EL HTML
Para identificarlos ya sabemos que el CSS está dentro de las etiquetas: <style type="text/css"> </style>
Vamos a ver un ejemplo. El de la caja con esquinas cuadradas:
Square cutout Border
El CSS:
/* Square cutout Borders*/
.square {background: transparent; width:40%; margin:0 auto;}
.square h1, .square p {margin:0 10px;}
.square h1 {font-size:2em; color:#00c; letter-spacing:1px;}
.square p {padding-bottom:0.5em;}
.square .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;}
.square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;}
.square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;}
.square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;}
EL HTML:
<div class="square">
<b class="top"><b class="b1t"></b><b class="b2"></b></b>
<div class="boxcontent">
<h1>Square cutout Border</h1>
<p>A box with cutout corners</p>
</div>
<b class="bottom"><b class="b2"></b><b class="b1b"></b></b>
</div>
Algunos aún tendrán la duda de cuál es el CSS que le corresponde a cada HTML.
Pues bien, para saberlo simplemente tienen que fijarse en los ID's y en las Clases.
en este caso el CSS me indica que el estilo se lo aplican a cualquier elemento con Clase ".square"
Por tanto, en el HTML debo localizar los elementos que contengan la Clase .square
En este caso fue:
<div class="square">
Asà que si siempre nos fijamos en este detalle, nos será fácil encontrar los elementos a los cuales se les aplica el estilo CSS.
Utilicenlo a conveniencia ;)
-------------------------------------
Creo que es una buena idea poder implementar este código en los menus que ya tenÃamos.
¿No es as�
Se verÃan mucho mejor.
Con un poco más de tiempo podré compaginar ambos códigos, el del menu y algun borde, y me darán su opinión.
Aunque el código crecerá enormemente y quizá muchos ya no quieran utilizarlo para HI5.
