
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 atributostyle
.
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.
Daniel
Excelente!
Mike
Una pasada!!! Esta me la apunto!!! :)
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.
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)
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…
nacho
no entendi nada no ce como aplicarlo en las wap me pueden decir?????»
Djdever5
Esta super
gerardo
en 3d
artu
sobre cajas como sudmenu en forma de animacion
y poner varias cajas
quisiera saver