Aquí un efecto sencillo que permite añadirle un borde al elemento en la parte inferior
de diferentes colores.
Efecto Borde Inferior
La muestra de este efecto la realizaremos con un contenedor blanco que ocupa un 100% del
tamaño de su contenedor padre.
Colores
La biblioteca contiene diversos colores para el efecto establecido en esta sección de la
documentación.
Español
Inglés
Español
Inglés
Alias en Inglés
Español
Inglés
Color
.efecto-borde-bodyui
.effect-border-bodyui
.efecto-borde-blanco
.effect-border-white
.efecto-borde-azul
.effect-border-blue
.efecto-borde-gris
.effect-border-grey
.efecto-borde-negro
.effect-border-black
.efecto-borde-verde
.effect-border-green
.efecto-borde-rojo
.effect-border-red
Dirección
Con algunas clases adicionales que veremos a continuación podremos
cambiar la dirección del efecto desde el centro, desde la derecha o desde la izquierda.
Centro
Para lograr este efecto le añadimos la clase .centro al
elemento o .center en inglés.
Derecha
Para lograr este efecto le añadimos la clase .derecha al
elemento o .right.
Centro
Para lograr este efecto le añadimos la clase .centro al
elemento o .center en inglés.
Derecha
Para lograr este efecto le añadimos la clase .derecha al
elemento o .right.
Bordes Derechos-Izquierdos
Existe dentro de la biblioteca dos estilos adicionales que permiten
agregar un borde a la izquierda del elemento o a la derecha.
Las clases utilizadas son:
.e-borde-izq-[color]-[px] [px (1-10)]
.e-border-left-[color]-[px] [px (1-10)]
.e-borde-der-[color]-[px] [px (1-10)]
.e-border-right-[color]-[px] [px (1-10)]
Izquierda
.e-border-left-bodyui-1
.e-border-left-bodyui-2
.e-border-left-bodyui-3
.e-border-left-bodyui-4
.e-border-left-bodyui-5
.e-border-left-bodyui-6
.e-border-left-bodyui-7
.e-border-left-bodyui-8
.e-border-left-bodyui-9
.e-border-left-bodyui-10
Izquierda
.e-border-left-bodyui-1
.e-border-left-bodyui-2
.e-border-left-bodyui-3
.e-border-left-bodyui-4
.e-border-left-bodyui-5
.e-border-left-bodyui-6
.e-border-left-bodyui-7
.e-border-left-bodyui-8
.e-border-left-bodyui-9
.e-border-left-bodyui-10
El ejemplo anterior se puede realizar con los mismos colores documentados en la sección anterior.
Derecha
.e-border-right-white-1
.e-border-right-white-2
.e-border-right-white-3
.e-border-right-white-4
.e-border-right-white-5
.e-border-right-white-6
.e-border-right-white-7
.e-border-right-white-8
.e-border-right-white-9
.e-border-right-white-10
Derecha
.e-border-right-white-1
.e-border-right-white-2
.e-border-right-white-3
.e-border-right-white-4
.e-border-right-white-5
.e-border-right-white-6
.e-border-right-white-7
.e-border-right-white-8
.e-border-right-white-9
.e-border-right-white-10
El ejemplo anterior se puede realizar con los mismos colores documentados en la sección anterior menos el color
bodyui que no está disponible.
Ejemplo Práctico
Vamos a hace un ejemplo práctico utilizado los grupos de botónes
documentados en la sección correspondiente Ver Doc