Ok, este es un problema que me ha estado molestando por un tiempo y he visto algunas soluciones buenas y malas. Pero cuál es la mejor solución, y cuáles son las trampas, inconvenientes y grandes "No, Nos".Borde gráfico personalizado en DIV con CSS
Lo que quiero es crear bloques DIV dinámicos y flexibles con un borde gráfico personalizado. Para ejemplo una DIV-box con sombras, pero no necesariamente sombras.
Actualizado: Como, declaró @Jeroen abajo en un comentario, yo no sólo estoy pidiendo "la mejor manera de hacer que las sombras". Cualquier costumbre loca frontera gráfica.
Sé que hay algunas soluciones con CSS3 (box-shadow, border-image y border-radius), pero no es 100% multi-navegador, especialmente si no tienes que trabajar con uno o dos versiones de los navegadores antiguos.
imagen ejemplo de lo que quiero lograr:
o
El ejemplo anterior se hace realmente con un método I usar con frecuencia Hace el trabajo y cumple con todos los requisitos.
- Se adapta a bloques DIV de diferentes tamaños.
- Utiliza gráficos personalizados.
- Funciona con múltiples navegadores y versiones.
- Es bastante fácil y rápido de aplicar.
- Es libre de JavaScript, 100% CSS/HTML.
... pero por supuesto hay algunas desventajas:
- Requiere 8 imágenes.
- Requiere 8 bloques DIV adicionales sin contenido real.
- No muy bonito en la fuente.
HTML DIV ejemplo de bloque: ejemplo
<div class="flowBox">
<h1>Header 1</h1>
Vivamus tincidun...
<div class="border_t"></div>
<div class="border_b"></div>
<div class="border_l"></div>
<div class="border_r"></div>
<div class="border_br"></div>
<div class="border_bl"></div>
<div class="border_tr"></div>
<div class="border_tl"></div>
</div>
CSS:
<style type="text/css">
<!--
.flowBox {
background:#FFFFFF;
margin:10px;
float:left;
padding:10px;
width:250px;
position:relative;
}
.border_t {
background:url(border_t.png) repeat-x;
position:absolute;
top:-2px; left:0;
width:100%;
height:2px;
}
.border_b {
background:url(border_b.png) repeat-x;
position:absolute;
bottom:-6px; left:0;
width:100%;
height:6px;
}
.border_l {
background:url(border_l.png) repeat-y;
position:absolute;
top:0; left:-3px;
width:3px;
height:100%;
}
.border_r {
background:url(border_r.png) repeat-y;
position:absolute;
top:0; right:-6px;
width:6px;
height:100%;
}
.border_br {
background:url(border_br.png);
position:absolute;
bottom:-6px; right:-6px;
width:6px;
height:6px;
}
.border_bl {
background:url(border_bl.png);
position:absolute;
bottom:-6px; left:-3px;
width:3px;
height:6px;
}
.border_tr {
background:url(border_tr.png);
position:absolute;
top:-2px; right:-5px;
width:5px;
height:2px;
}
.border_tl {
background:url(border_tl.png);
position:absolute;
top:-2px; left:-2px;
width:2px;
height:2px;
}
-->
</style>
Como se puede ver, tal vez no es una solución óptima. ¿Pero hay una manera mejor?
ACTUALIZADO: Hay apoyo para las sombras en la mayoría de los navegadores y versiones, aunque no es una norma. Fuente que usa css-shadow: http://pastebin.com/LZHUQRW9 Pero mi pregunta se refiere no solo a las sombras.
código fuente completo:http://pastebin.com/wxFS2PHr
Escribe "por ejemplo [...] sombras". La mayoría de las respuestas probablemente irán hacia estilos de navegador cruzado para box-shadow, pero si quieres otros bordes "funky" (¿el patrón del arco iris bordea con hormigas rastreras encima de ellos?) También es aconsejable actualizar la pregunta para reflejar que ? – Jeroen
@Jeroen Buen punto. Actualicé la pregunta con más información y un nuevo ejemplo de imagen. ¡Gracias! – jamietelin
Jaja encanta el ejemplo: D – Jeroen