Artículos
CSS

Bordes 3D con CSS

18/Jul/2007

Mediante CSS podemos llegar a configurar los bordes de múltiples maneras. Una de ellas es hacer que los bordes tengan un efecto 3D. Así que hoy vamos a ver cómo podemos definir bordes 3D con CSS. Lo primero que 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 para bordes 3D con CSS sería similar al siguiente:

.miborde{
  border-style:valor;
}

Recordar que los estilos se pueden definir dentro de un fichero asociado de CSS, en un elemento style dentro de la página o directamente sobre un elemento HTML con el atributo 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, bordes 3D con CSS y con forma de surco se definirían de la siguiente forma:

.groove{
  border-style:groove;
}

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 sobre una imagen manipulando el elemento img:

img {
  border-color:#f00;
  border-width: 10px;
}

Espero que os haya quedado más claro cómo utilizar los bordes 3D. ¿Los has utilizado o piensas utilizar en alguno de tus diseños? Cuéntanoslo en los comentarios para conocer y compartir las experiencias.

Código Fuente

Descárgate el código fuente de Bordes 3D con CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
9 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios