feed twitter facebook LinkedIn facebook

CSS » Bordes 3D con CSS

julio 18, 2007 por Víctor Cuervo 8 Comentarios Imprimir Imprimir

Mediante CSS podemos llegar a parametrizar los bordes de múltiples maneras. Una de ellas es hacer que los bordes tengan un efecto 3D.

Hay que recordar que el borde es un atributo CSS que puede ser aplicado a varios elementos de una página HTML: tablas, imágenes, capas,...

El atributo que nos permite modificar la apariencia del borde es border-style. Para poder utilizarlo simplemente tendremos que definir una clase CSS. El código sería similar al siguiente:

<style type="text/css">
.miborde{
  border-style:valor; 
}
</style>

Los valores para los efectos de borde 3D son los siguientes:

  • groove, con forma de surco.
  • ridge, con forma de canto.
  • inset, con un efecto hacía dentro.
  • outset, con un efecto hacía afuera.

Así, por ejemplo, un borde 3D con forma de surco se definiría de la siguiente forma:

<style type="text/css">
.groove{
  border-style:groove; 
}
</style>

Solo quedará aplicarlo al elemento HTML mediante el atributo class. En el caso de hacerlo sobre una imagen tendríamos la siguiente línea de código:

<img src="imagen.jpg" class="groove">

Para poder ver el efecto 3D es recomendable utilizar bordes anchos. Para ello tenemos el atributo CSS border-width. De igual manera, si utilizamos colores, con el atributo border-color, veremos los efectos 3D en su máximo esplendor.

Podemos asociar estos atributos directamente a la etiqueta <IMG>

<style type="text/css">
img {
  border-color:#f00;
  border-width: 10px;
}
</style>

Visualizar el ejemplo | Descargar el código

tags:

Artículos relacionados:

8 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. artu
    noviembre 23, 2007 #

    sobre cajas como sudmenu en forma de animacion
    y poner varias cajas
    quisiera saver

  2. gerardo
    septiembre 27, 2008 #

    en 3d

  3. Djdever5
    noviembre 7, 2009 #

    Esta super

  4. nacho
    enero 19, 2010 #

    no entendi nada no ce como aplicarlo en las wap me pueden decir?????”

  5. adumas
    diciembre 24, 2012 #

    El primer ejemplo da lugar a equívoco:

    .miborde{
    border-style:valor;
    }

    …conllevaría que, en ese caso, usáramos:
    Después de eso, con cada cambio del valor de “valor” iríamos cambiando el tipo de borde elegido: groove, dashed, dotted, double…

  6. adumas
    diciembre 24, 2012 #

    Ha debido quedar subsumido parte de mi mensaje. Decía que conllevaría que, en ese caso, usáramos: //// (le he puesto unas barras laterales a ver si así lo visualiza…pero para el código sobran)

  7. adumas
    diciembre 24, 2012 #

    lo he intentado, no hay manera de visualizar el código aquí, lo explico de palabra: decía que conllevaría que, en ese caso, usaráramos donde pone img src= … class= ahí después de class no pondríamos groove sino miborde.

  8. Mike
    abril 3, 2014 #

    Una pasada!!! Esta me la apunto!!! :)

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*