Bonjour à tous!
Dans la conception moderne, lors de la création de sites et d'applications, de nombreux développeurs appliquent l'effet de profondeur et de volume, faisant souvent référence à des propriétés CSS telles que
shadow-box et shadow -shadow . Certains pensent qu'en
2018, c'est une tendance. En effet, il y a beaucoup de sites étrangers et russes qui en 2018 ont commencé à appliquer des ombres plus souvent.
À cet égard, une petite
collection d'ombres CSS simples et agréables , souvent trouvées sur les sites Web, est récemment apparue (plus ou moins quelques pixels sur le côté). La collection s'appelle
Box-shadows.css . Elle a déjà reçu des critiques positives sur le réseau et a récemment été mise à jour vers la version 1.0.4, dans laquelle plusieurs ombres plus belles sont apparues, divisées en groupes.
Après la dernière mise à jour, la collection a commencé à contenir plus de 60 options pertinentes pour les ombres, qui sont idéales pour une utilisation dans les tableaux, pour le contenu des pages d'accueil, des conteneurs, des barres de navigation et d'autres blocs de votre site.
L'objectif principal de la création de cette collection est de faciliter le travail des concepteurs et développeurs Web novices dans la création d'un design agréable et moderne. Grâce à la collection, vous pouvez simplifier le travail avec des blocs et réduire le temps de sélection des ombres CSS dans le générateur (qui, soit dit en passant, existe également). Bien sûr, les développeurs expérimentés n'en auront probablement pas besoin, mais ils peuvent peut-être apprendre quelque chose d'intéressant par eux-mêmes. La collection est utile à ceux qui n'ont pas encore réussi à se plonger pleinement dans la mise en page, mais qui souhaitent créer de belles ombres sur les boutons, blocs et conteneurs de leur site.
Connecter les styles
Pour connecter une feuille de style, accédez au
site Web du projet et téléchargez le fichier dont vous avez besoin. Ensuite, attachez le fichier à votre page html, après la balise d'ouverture <head>, par une méthode qui vous convient.
<head> <link rel="stylesheet" href="/box-shadows.css"> <link rel="stylesheet" href="/box-shadows.min.css"> </head>
Vous pouvez utiliser
le générateur de fichiers
min.css , qui vous permet de créer votre propre fichier composé uniquement des classes sélectionnées. Eh bien, ou sélectionnez simplement le bloc dont vous avez besoin et copiez l'ombre que vous aimez sur votre site. Cela contribuera à réduire la charge si votre projet utilise moins de deux ou trois ombres. Suivez simplement les instructions sur le site et vous réussirez.
Utiliser des classes
Pour connecter l'ombre souhaitée à votre bloc, ajoutez simplement la classe
.bShadow avec le numéro souhaité:
<div class="bShadow-54"></div>
Effets de survol
Pour créer un effet de survol pour votre bloc, ajoutez la classe que vous aimez avec le nombre, par exemple,
.bShadow-1 et écrivez la lettre latine
h après le nombre. Par exemple:
<div class="bShadow-38 bShadow-1h"></div>
Jetez un œil
à l' exemple de la classe
.bShadow . En survol, il affecte des valeurs d'ombre à la classe voisine
.bShadow-1 . Si vous souhaitez que l'ombre n'apparaisse pas lorsque vous survolez ou cliquez dessus, ajoutez la classe
.bSnoneTransformation et animation fluides
La classe
.bShadow utilise par défaut une animation fluide dans la
transition: transform 0.2s ease-in-out .2s
transition: transform 0.2s ease-in-out , et inclut également une propriété qui avertit le navigateur d'une prochaine transformation d'ombre et de position
will-change: transform, box-shadow; .
Utilisez-le pour créer de belles animations de vos blocs. Par exemple, vous pouvez ajouter votre classe ou vos propriétés avec une transformation:
.transform-translateY-5:hover { -webkit-transform: translateY(-5px) translateZ(0); transform: translateY(-5px) translateZ(0); }
Ensuite, ajoutez au conteneur dont vous avez besoin:
<div class="bShadow transform-translateY-5 bShadow-1h"> </div> et vous verrez le
résultatAjout du paramètre d'encart
Pour ajouter un paramètre d'ombre interne, collez simplement le script dans la page html et spécifiez les classes auxquelles vous souhaitez l'appliquer.
Par exemple
.bShadow-1 . Pour spécifier plusieurs classes, séparez-les par des virgules, comme dans l'exemple ci-dessous. N'oubliez pas de mettre fin au cours!
[].forEach.call(document.querySelectorAll('.bShadow-1, .bShadow-2h, .bShadow-3'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset " + bsh; });
DémoGénérateur d'ombre de boîte CSS
La collection implique également une augmentation du nombre de classes avec des ombres créées par l'utilisateur lui-même. Autrement dit, vous pouvez utiliser le
générateur d'ombres classique pour compléter la 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équence qui ne se trouve pas dans la collection. Les styles résultants peuvent être facilement copiés et collés dans le fichier css racine de votre projet ou dans le fichier box-shadows.min.css créé sur le site de collecte.
Nous prévoyons maintenant d'étendre la collection et de configurer le package npm, mais cela pose quelques problèmes mineurs. Par conséquent, alors que j'espère recevoir le lien
cdnjs et le développement du projet.
GitHubPagePage