Hola a todos!
Seguramente, algunos de ustedes han notado que diferentes sitios usan casi el mismo tipo de sombra en bloques, paneles de navegaci贸n y otros contenedores, m谩s o menos un par de p铆xeles en la direcci贸n de la transparencia. Analic茅 varios sitios populares, tanto nuestros como extranjeros, e intent茅 recopilar lo m谩s cerca posible los par谩metros de las sombras utilizadas en una gran colecci贸n o biblioteca. Para quien es m谩s conveniente. Espero que alguien sea 煤til.
El objetivo principal del proyecto es facilitar el trabajo de los dise帽adores y desarrolladores web novatos en la creaci贸n de un dise帽o agradable y moderno. Quiz谩s los dise帽adores experimentados sacar谩n algo interesante de este desarrollo.
La biblioteca ser谩 conveniente para aquellos que a煤n no han tenido tiempo de profundizar en el dise帽o, pero desean crear hermosas sombras en botones, bloques, etc. Por lo tanto, puede simplificar el trabajo con bloques y reducir el tiempo para seleccionar sombras CSS en el generador.
Box-shadows.css
Box-shadows.css es una colecci贸n de sombras CSS simples y agradables (box-shadow) para sus proyectos. La clase principal utiliza la clase simple
.bShadow . Ahora la colecci贸n incluye m谩s de 50 opciones relevantes para sombras con un n煤mero, as铆 como tres clases separadas
.bShadow ,
.bShadow-light y
.bShadow-inset . Son excelentes para usar en tablas, para el contenido de p谩ginas de inicio, contenedores, navegaci贸n y otros bloques de su sitio.
Suprimiendo una cantidad de preguntas, explicar茅 de inmediato por qu茅 se usan los n煤meros, y no nombres o clases como
bShadow-01040-00 .
La colecci贸n no usa nombres independientes, como se hace en animate.css, ya que para este proyecto es un poco inaceptable. La sombra de los bloques aumenta gradualmente, con varias desviaciones, y debido a la secuencia de n煤meros, puede elegir la mejor opci贸n para usted, sin memorizar nombres individuales. Esto simplifica enormemente el trabajo con la colecci贸n.
La colecci贸n tiene una
serie de otras caracter铆sticas , por ejemplo, el uso de
efectos de
desplazamiento , con un cambio suave entre las sombras.
Funciones adicionales
El sitio del proyecto es visualmente simple, pero tiene suficientes funciones para personalizar completamente y seleccionar las clases y estilos necesarios. El sitio est谩 escrito en ingl茅s, pero para aquellos que a煤n no dominan este idioma, hay un cambio al ruso.
Selecci贸n de sombras
El sitio tiene una funci贸n de vista previa en la que puede especificar el color de fondo y el contenedor de su sitio para una mayor selecci贸n de sombras. La selecci贸n de sombras y clases se lleva a cabo eligiendo opciones o pasando el cursor sobre los bloques. El resultado se muestra como una sombra del contenedor del sitio principal.
Min.css generador de archivos
El sitio tambi茅n tiene
un generador de archivos box-shadows.min.css con instrucciones que le permite al usuario crear su propio archivo, que consta solo de las clases que selecciona. Esto ayudar谩 a reducir la carga en el sitio si su proyecto usa menos de dos o tres sombras.
Generador de sombra de caja css
Puede usar el cl谩sico
generador de css box-shadow para complementar su 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 serie que no forma parte de la colecci贸n. Puede copiar los estilos resultantes y pegarlos en el css ra铆z o en el archivo de recuadro creado en el sitio.
min.css .
Intenta experimentar. Este es un trabajo realmente interesante.
Ahora el desarrollo est谩 en desarrollo y un conjunto de 200 estrellas en GitHub, para un enlace a cdnjs. Les deseo un uso agradable y 茅xito creativo. Si tiene sugerencias, comentarios o sugerencias para mejorar el proyecto, escriba los comentarios.
GitHub 路
Sitio web