Bordes 3D con CSS

18/jul/2007 CSS 8 Comentarios
css

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 para bordes 3D con CSS sería similar al siguiente:

  1. .miborde{
  2. border-style:valor;
  3. }

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ía de la siguiente forma:

  1. .groove{
  2. border-style:groove;
  3. }

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:

  1. <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:

  1. img {
  2. border-color:#f00;
  3. border-width: 10px;
  4. }

Vídeos sobre CSS

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

8 comentarios en “Bordes 3D con CSS”

Víctor Cuervo

Mike

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

Víctor Cuervo

adumas

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.

Víctor Cuervo

adumas

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)

Víctor Cuervo

adumas

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…

Víctor Cuervo

nacho

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

Víctor Cuervo

Djdever5

Esta super

Víctor Cuervo

gerardo

en 3d

Víctor Cuervo

artu

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*