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
styledentro 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.
