Hola a todos!
En el diseño moderno, al crear sitios y aplicaciones, muchos desarrolladores aplican el efecto de profundidad y volumen, a menudo refiriéndose a propiedades css como
box-shadow y
drop-shadow . Algunos creen que
en 2018 esta es una tendencia. De hecho, hay muchos sitios extranjeros y rusos que en 2018 comenzaron a aplicar sombras con más frecuencia.
En este sentido, recientemente apareció una pequeña
colección de sombras CSS simples y agradables , que a menudo se encuentran en sitios web (más o menos un par de píxeles a un lado). La colección se llama
Box-shadows.css . Ella ya recibió algunas críticas positivas en la red y recientemente se actualizó a la versión 1.0.4, en la que aparecieron varias sombras más hermosas, divididas en grupos.
Después de la última actualización, la colección comenzó a contener más de 60 opciones relevantes para sombras, que son excelentes para usar en tablas, para el contenido de páginas de inicio, contenedores, barras de navegación y otros bloques de su sitio.
El objetivo principal de crear esta colección es facilitar el trabajo de los diseñadores y desarrolladores web novatos para crear un diseño agradable y moderno. Gracias a la colección, puede simplificar el trabajo con bloques y reducir el tiempo para seleccionar sombras CSS en el generador (que, por cierto, también está disponible). Por supuesto, es poco probable que los desarrolladores experimentados lo necesiten, pero tal vez puedan aprender algo interesante por sí mismos. La colección es útil para aquellos que aún no han logrado profundizar en el diseño, pero quieren crear hermosas sombras en los botones, bloques y contenedores de su sitio.
Conectar estilos
Para conectar una hoja de estilo, vaya al
sitio web del proyecto y descargue el archivo que necesita. Luego, adjunte el archivo a su página html, después de la etiqueta <head> de apertura, por un método conveniente para usted.
<head> <link rel="stylesheet" href="/box-shadows.css"> <link rel="stylesheet" href="/box-shadows.min.css"> </head>
Puede usar
el generador de archivos
min.css , que le permite crear su propio archivo que consta solo de las clases seleccionadas. Bueno, o simplemente seleccione el bloque que necesita y copie la sombra que desee en su sitio. Esto ayudará a reducir la carga si su proyecto usa menos de dos o tres sombras. Simplemente siga las instrucciones en el sitio y tendrá éxito.
Usando clases
Para conectar la sombra deseada a su bloque, simplemente agregue la clase
.bShadow con el número deseado:
<div class="bShadow-54"></div>
Efectos de desplazamiento
Para crear un efecto de desplazamiento para su bloque, agregue la clase que desee con el número, por ejemplo,
.bShadow-1 y escriba la letra latina
h después del número. Por ejemplo:
<div class="bShadow-38 bShadow-1h"></div>
Eche un vistazo
al ejemplo de la clase
.bShadow . Al pasar el
mouse , asigna valores de sombra a la clase vecina
.bShadow-1 . Si desea que la sombra no aparezca al pasar el mouse o al hacer clic en ella, agregue la clase
.bSnoneTransformación suave y animación
La clase
.bShadow por defecto usa animación suave en la
transition: transform 0.2s ease-in-out .2s
transition: transform 0.2s ease-in-out , y también incluye una propiedad que advierte al navegador acerca de una próxima sombra y la transformación de la posición
will-change: transform, box-shadow; .
Use esto para hacer hermosas animaciones de sus bloques. Por ejemplo, puede agregar su clase o propiedades con una transformación:
.transform-translateY-5:hover { -webkit-transform: translateY(-5px) translateZ(0); transform: translateY(-5px) translateZ(0); }
Luego, agregue al contenedor que necesita:
<div class="bShadow transform-translateY-5 bShadow-1h"> </div> y verá el
resultadoAgregar el parámetro de inserción
Para agregar un parámetro de sombra interno, simplemente pegue el script en la página html y especifique las clases para las que desea aplicarlo.
Por ejemplo
.bShadow-1 . Para especificar varias clases, sepárelas con comas, como en el siguiente ejemplo. ¡No te olvides de poner fin a la clase!
[].forEach.call(document.querySelectorAll('.bShadow-1, .bShadow-2h, .bShadow-3'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset " + bsh; });
DemoGenerador de sombra de caja css
La colección también implica un aumento en el número de clases con sombras creadas por el propio usuario. Es decir, puede usar el
clásico generador de sombras para complementar la colección con sus propios estilos. Al hacer clic en el botón Guardar y Agregar Siguiente, puede crear un número infinito de clases. A las primeras clases generadas y posteriores se les asigna un número de secuencia que no está en la colección. Los estilos resultantes se pueden copiar y pegar fácilmente en el archivo css raíz de su proyecto o en el archivo box-shadows.min.css creado en el sitio de colección.
Ahora estamos planeando expandir la colección y configurar el paquete npm, pero hay algunas dificultades menores con esto. Por lo tanto, mientras espero recibir el enlace
cdnjs y un mayor desarrollo del proyecto.
GitHubPagePage