Bonjour à tous!
Certes, certains d'entre vous ont remarqué que différents sites utilisent presque le même type d'ombre dans les blocs, les panneaux de navigation et autres conteneurs, plus ou moins quelques pixels dans le sens de la transparence. J'ai analysé un certain nombre de sites populaires, aussi bien les nôtres qu'étrangers, et j'ai essayé de rassembler le plus près possible les paramètres des ombres utilisées dans une grande collection ou bibliothèque. Pour qui c'est plus pratique. J'espère que quelqu'un vous sera utile.
L'objectif principal du projet est de faciliter le travail des concepteurs et développeurs Web novices dans la création d'un design agréable et moderne. Peut-être que des designers expérimentés tireront pour eux-mêmes quelque chose d'intéressant de ce développement.
La bibliothèque sera pratique pour ceux qui n'ont pas encore eu le temps de se plonger pleinement dans la mise en page, mais qui souhaitent créer de belles ombres sur les boutons, les blocs, etc. Ainsi, vous pouvez simplifier le travail avec des blocs et réduire le temps de sélection des ombres CSS dans le générateur.
Box-shadows.css
Box-shadows.css est une collection d'ombres css simples et agréables (box-shadow) pour vos projets. La classe principale utilise la classe simple
.bShadow . Maintenant, la collection a plus de 50 options pertinentes pour les ombres avec un nombre, ainsi que trois classes distinctes
.bShadow ,
.bShadow-light et
.bShadow-inset . Ils sont parfaits pour une utilisation dans les tableaux, pour le contenu des pages d'accueil, des conteneurs, de la navigation et d'autres blocs de votre site.
En supprimant un certain nombre de questions, j'expliquerai immédiatement pourquoi les nombres sont utilisés, et non les noms ou les classes comme
bShadow-01040-00 .
La collection n'utilise pas de noms indépendants, comme cela se fait dans animate.css, car pour ce projet c'est un peu inacceptable. L'ombre des blocs augmente progressivement, avec divers écarts, et en raison de la séquence des nombres, vous pouvez choisir la meilleure option pour vous-même, sans mémoriser les noms individuels. Cela simplifie considérablement le travail avec la collection.
La collection possède un
certain nombre d'autres fonctionnalités , par exemple, l'utilisation d'
effets de
survol , avec une commutation fluide entre les ombres.
Fonctions supplémentaires
Le site du projet est visuellement simple, mais il a suffisamment de fonctions pour personnaliser entièrement et sélectionner les classes et les styles nécessaires. Le site est écrit en anglais, mais pour ceux qui ne maîtrisent pas encore cette langue, il y a le passage au russe.
Sélection des ombres
Le site dispose d'une fonction d'aperçu dans laquelle vous pouvez spécifier la couleur d'arrière-plan et le conteneur de votre site pour une sélection supplémentaire des ombres. La sélection des ombres et des classes s'effectue en choisissant des options ou en survolant des blocs. Le résultat est affiché comme une ombre du conteneur du site principal.
Générateur de fichiers min.css
Le site dispose également d'
un générateur de fichier box-shadows.min.css avec des instructions qui permet à l'utilisateur de créer son propre fichier, composé uniquement des classes qu'il sélectionne. Cela contribuera à réduire la charge sur le site si votre projet utilise moins de deux ou trois ombres.
Générateur d'ombre de boîte CSS
Vous pouvez utiliser le
générateur classique d'
ombre de boîte CSS pour compléter votre collection avec vos propres styles. En cliquant sur le bouton Enregistrer et ajouter suivant, vous pouvez créer un nombre infini de classes. Les premières classes générées et suivantes reçoivent un numéro de série qui ne fait pas partie de la collection. Vous pouvez copier les styles résultants et les coller dans le css racine ou le fichier box-shadows créé sur le site.
min.css .
Essayez d'expérimenter. C'est un travail vraiment intéressant.
Maintenant, le développement est en cours de développement et un ensemble de 200 étoiles sur GitHub, pour un lien vers cdnjs. Je vous souhaite une agréable utilisation et un succès créatif. Si vous avez des suggestions, des commentaires ou des suggestions pour améliorer le projet, écrivez dans les commentaires.
GitHub ·
Site Web