Bordes degradados en CSS
4 seguidores
Hola!!
Quisiera darle al borde de una tabla un efecto de degradado a los lados, es decir, que el color de mas intenso fuese a mas claro, todo esto en css. El problema es que solo veo como hacer los fondos en degradado y no se seguro si sería posible hacer lo mismo a los bordes.
Alguien sabe si es posible o de alguna página que lo explique??
Gracias de antemano y saludos a todos!!! :P
ismael_gonzalez
Pero quieres hacer un menu o el que? no me termino de aclarar lo siento, postea un jpg de lo que quieres hacer.
vega_vega
La idea la cogí de esta web: http://www.betafence.es/
Ya veis como hace un degradado en el menu de la parte inferior. A mí me gustaría hacer algo parecido pero que en el fondo en general se vea una imagen, sin que sea un color plano. Claro al hacer con css el degradado me obliga a ponerle un color de fondo. No se si me pillais por donde voy....
Gracias a todos por la ayuda!!!! :P
hartum
con CSS puro y duro, no se puede.
Ni siquiera con navegadores que soporten CSS3, pero haciendo trucos se puede simular, pega una imagen de lo que quieres y es posible que podemos echarte una mano.
ismael_gonzalez
porque no nos posteas un jpg de como debería quedar? A lo mejor así te podemos ayudar mejor.
Un saludo
vega_vega
Ismael el tuyo está bien pero tengo un problemilla, el fondo debe ser transparente ya que tiene el contenido tiene una imagen de fondo. Estoy investigando de que manera se puede solucionar esto. Sino está muy bien, esta era la idea que yo tenía.
Saludos y muchas gracias por vuestra ayuda!!! :P
ismael_gonzalez
Si lo haces con puro CSS (usando css2) te recomiendo que uses un gif de 1px de ancho y del alto de que sea el degradado,
lo pones como fondo repetible en x y das un padding del ancho que quieras que sea el borde, y dentro pones otro contenedor con fondo sólido.
Esto mas o menos:
<style type="text/css">
.outer-border { background:#fff(color solido por si estira) url(rutadetuimagen.gif) repeat-x left bottom; padding: 0 2px;}
.inner { background:#fff;}
</style>
<div class="outer-border">
<div class="inner">
aquí va tu contenido
</div>
</div>
Te referías a esto?
marco_sansa
¿css filter?
http://www.cosassencillas.com/2008/01/18/bonito-efecto-de-degradado-con-solo-css/
http://xyberneticos.com/index.php/2007/09/23/bonita-tecnica-para-lograr-fondos-desvanecidos-o-degradados/