Bien que les tendances de conception varient chaque année, vous pouvez compter sur l'utilisation des effets d'ombre de base comme boîte ombre et ombre portée de contribuer positivement à l'esthétique d'un site Web. Vous pouvez utiliser des ombres portées pour créer des effets agréables et magnifiquement rendus sans paraître ringard.
Examinons de plus près la propriété CSS drop-shadow .
drop-shadow() est un effet CSS qui affiche une ombre autour de la forme d'un objet spécifié. Voici la syntaxe pour appliquer un CSS drop-shadow .
Syntax: filter: drop-shadow(offset-x offset-y blur-radius color);
Il existe un large éventail de fonctions de filtrage, notamment blur ( ) , bright ( ) et drop-shadow ( ) .
offset-x détermine la distance horizontale et offset-y détermine la distance verticale. Notez que les valeurs négatives placent l'ombre à gauche ( offset-x ) et au-dessus ( offset-y ) de l'objet.
Les deux derniers paramètres sont facultatifs. Vous pouvez spécifier le rayon de flou de l'ombre en tant que longueur. Par défaut, il est défini sur 0. Vous ne pouvez pas avoir un rayon de flou négatif.
La couleur de l'ombre est spécifiée comme . Si vous n'avez pas spécifié de couleur, elle suit la valeur de la propriété color .
Vous savez peut-être déjà que box-shadow fait plutôt bien le travail. Alors, vous pensez peut-être, pourquoi avons-nous besoin d' ombres portées ? Il existe de nombreux cas où la fonction drop-shadow ( ) est une bouée de sauvetage. Jetons un coup d'œil à quelques-uns d'entre eux :
Contrairement à un box-shadow , vous pouvez ajouter une ombre portée aux formes non rectangulaires. Par exemple, nous avons un SVG ou PNG transparent avec une forme non rectangulaire, une étoile par exemple. Ici, l'ajout d'une ombre qui correspond à l'objet lui-même peut être complété avec box-shadow ou drop-shadow . Considérez les deux scénarios :
HTML
CSS
.star-img img { display: inline-block; height: 15em; width: 25em; } .box-shadow { color: red; box-shadow: 0.60em 0.60em 0.2em; } .drop-shadow { filter: drop-shadow(0.60em 0.60em 0.2em); }
Sortie :
Lorsque l'on compare les deux effets, il est évident qu'une ombre-boîte donne une ombre rectangulaire ; peu importe que l'image soit transparente ou qu'elle possède déjà un arrière-plan. D'autre part, l' ombre portée vous permet de créer une ombre conforme à la forme de l'image elle-même.
Les facteurs limitatifs sont que la fonction drop-shadow() accepte tous les paramètres de type à l'exception du mot-clé inset et du paramètre spread .
Il existe plusieurs cas où vous devrez peut-être créer des composants en superposant certains éléments. Si vous utilisez box-shadow , vous serez confronté au problème d'essayer de projeter une ombre de la bonne manière. Voici comment cela fonctionne lors du regroupement d'une image et d'un composant texte :
HTML
Live in the moment
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.
CSS de base
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } h2 { font-size: 2rem; } p { font-size: 0.8rem; } .parent-container { display: flex; flex-direction: column; height: 17rem; width: 50em; } .image-container img { width: 15em; position: absolute; z-index: 1; top: 2em; left: 1.5em; } .text-container { color: rgb(255, 236, 236); background-color: rgb(141 0 35); width: 30rem; padding: 3rem; align-self: flex-end; position: relative; }
Maintenant, appliquez le box-shadow et le drop-shadow pour voir la différence.
.drop-shadow { filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5)); } .box, .box img { box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3); }
Sortir:
Comme vous pouvez le voir, l' ombre-boîte est appliquée sur chaque élément individuellement tandis que l' ombre portée les regroupe tous les deux et applique l'ombre.
Vous pouvez utiliser la propriété clip-path pour découper une certaine région qui détermine quelles parties d'une image ou d'un élément doivent être affichées. Le filtre d'ombre portée nous permet de créer une ombre portée sur l'élément découpé en l'appliquant au parent de cet élément :
HTML
CSS
.parent-container { filter: drop-shadow(0rem 0rem 1.5rem maroon); } .clipped-element { width: 50em; height: 50em; margin: 0 auto; background-image: url(smiling-girl.jpg); clip-path: circle(50%); background-size: cover; background-repeat: no-repeat; }
Sortir:
Nous avons découpé 50 % de l'image avec un chemin circulaire. Par conséquent, le filtre d'ombre portée est appliqué uniquement à la partie visible de l'image. N'est-ce pas génial ?
Comme nous l'avons vu ci-dessus, l' ombre portée ne prend pas en charge le paramètre spread . Cela signifie que la création d'un effet de contour ne serait pas possible en utilisant la fonction drop-shadow( ) car elle est tuée partout. Il rend également différents effets d'ombre de la boîte ombre et text-shadow (avec les mêmes paramètres). Vous pouvez penser que les différences entre box-shadow et drop-shadow se résument au CSS Box Model . L'un le suit, l'autre non. Voici un exemple :
HTML
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
CSS de base
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .parent-container { width: 72rem; } p { font-size: 3em; font-style: bold; }
Appliquer des effets d'ombre
.drop-shadow { filter: drop-shadow(0.5em 0.5em 0.1em #555); } .box-shadow { box-shadow: 0.5em 0.5em 0.1em #555; } .text-shadow { text-shadow: 0.5em 0.5em 0.1em #555; }
Sortir:
Vous pouvez voir que box-shadow donne une ombre plus épaisse et plus sombre que text-shadow et drop-shadow . De plus, il existe une légère différence dans le positionnement de l'ombre entre text-shadow et drop-shadow . Néanmoins, vous pouvez préférer différents effets d'ombre selon vos besoins.
La fonction drop-shadow( ) est prise en charge dans tous les navigateurs modernes, à l'exception des navigateurs plus anciens comme Internet Explorer. Bien que ce ne soit pas quelque chose qui entraverait sérieusement l'UX, vous pouvez ajouter une requête de fonctionnalité avec un repli box-shadow .
La popularité de box-shadow est assez évidente en raison de la multitude de cas d'utilisation. Cependant, la fonction drop-shadow() est fortement sous-utilisée. Nous espérons que vous expérimenterez différents effets d'ombre et essayerez d'implémenter l' ombre portée dans vos futurs projets.
Les pseudo-classes ajoutent une toute nouvelle gamme de fonctionnalités à CSS et à votre répertoire personnel de développement Web. Apprenez-en plus à leur sujet pour devenir un développeur Web plus compétent et efficace.
Bien que vous puissiez utiliser une calculatrice graphique sur votre ordinateur, l'interpréteur du langage de programmation Python peut également servir de calculatrice de bureau. C'est une blague si populaire dans la communauté Python qu'elle est mentionnée dans le didacticiel officiel. Voici comment vous pouvez utiliser Python comme calculatrice.
En tant que programmeur, vous devez relever des défis pour survivre et créer des merveilles dans le domaine du développement ou de la programmation. Par conséquent, si vous cherchez à apprendre un langage de programmation avancé pour améliorer vos compétences professionnelles, Java est l'une des meilleures perspectives.
Apprendre un nouveau langage de programmation comme Python devient facile si vous disposez d'une feuille de route complète détaillant les concepts à apprendre en tant que débutant et comment progresser davantage pour atteindre le prochain jalon. Même les programmeurs intermédiaires devraient fréquemment réviser leurs bases pour se construire une base solide.
De nos jours, il est courant de créer un site Web ou une application qui ajuste son interface utilisateur en fonction du navigateur ou de l'appareil. Il existe deux approches pour atteindre cet objectif. La première consiste à créer différentes versions de votre site Web ou de votre application pour différents appareils. Mais c'est inefficace et peut conduire à des erreurs imprévisibles.
Travailler avec des nombres fait partie intégrante de la programmation. Chaque langage de programmation prend en charge la manipulation des nombres de différentes manières. Dans cet article, vous apprendrez à trouver le nombre total de chiffres dans un entier à l'aide d'approches itératives, basées sur les journaux et basées sur les chaînes.
Les conteneurs sont très utiles pour le développement, le déploiement et la gestion de logiciels dans un environnement virtuel. Docker est utile dans le processus de conteneurisation, mais ce n'est pas la seule plate-forme disponible. Si vous recherchez des alternatives à Docker, ne cherchez pas plus loin. Cette liste présente des alternatives Docker riches en fonctionnalités et efficaces à utiliser dans votre prochain projet.
SQL vs NoSQL : quelle est la meilleure base de données pour votre prochain projet ?
L'intégration de services tiers dans vos publications WordPress est un moyen passionnant de captiver l'intérêt d'un visiteur. Le contenu intégré fournit également des repères visuels qui facilitent la numérisation. WordPress a facilité l'ajout de ce type de contenu.
Node.js est un environnement d'exécution JavaScript qui vous permet d'exécuter JavaScript en dehors des navigateurs Web, ce qui en fait un choix populaire pour développer toutes sortes d'applications. Une partie de sa popularité est due à la pléthore de packages NPM disponibles pour faciliter l'expérience des développeurs.
Solidity est le langage de programmation utilisé par les contrats intelligents sur la blockchain Ethereum. C'est un langage de programmation orienté objet de type statique.
Les badges GitHub peuvent améliorer la lisibilité d'un référentiel en offrant aux utilisateurs un moyen rapide de capturer les métriques du référentiel. Des badges peuvent être intégrés dans votre README.md pour clarifier l'importance et la nécessité de votre projet aux autres développeurs. En conséquence, les lecteurs se font une idée très rapide du référentiel en vérifiant les badges joints.
Les journées de célébration internationales sont un bon moyen de reconnaître les questions sociales, les journées historiques et les carrières respectives. La Journée internationale des programmeurs célèbre le rôle que les programmeurs jouent pour améliorer la vie quotidienne. Le monde civilisé dans lequel nous vivons est le produit du travail acharné des programmeurs.
Qu'il s'agisse d'une requête de base de données ou de résultats d'opérations mathématiques, la méthode de format de chaîne Python offre un moyen plus dynamique et attrayant de présenter les résultats à un utilisateur.
Plus tôt cette année, Microsoft a publié la version préliminaire de Visual Studio 2022 dans le monde de la programmation sauvage. C'est une bonne nouvelle! C'est un IDE extrêmement populaire, mais qui doit faire l'objet d'une mise au point ou peut-être même d'une refonte, étant donné le rythme des changements dans l'écosystème DevOps dans lequel il prospère.
Les métriques logicielles sont des mesures utilisées pour quantifier divers aspects de votre logiciel. Ces aspects peuvent aller du coût, de la qualité et de l'efficacité de l'équipe de développement.
En tant qu'utilisateur Windows, vous avez probablement au moins une fois rencontré les mots .NET Framework. Il s'agit d'un framework logiciel développé par Microsoft qui vous permet de créer et d'exécuter des programmes C#, C++, F# et Visual Basic. La dernière version de .NET est la 4.8, mais votre ordinateur peut avoir besoin d'une ancienne version de .NET (comme .NET 3.5) pour exécuter certaines applications.
Si vous êtes un développeur Python, vous pouvez grandement bénéficier de la gamme de frameworks disponibles. Alors que certains cadres sont mieux adaptés aux grands écosystèmes, d'autres se spécialisent dans la réalisation d'objectifs de développement spécifiques. Lisez la suite pour découvrir les fonctionnalités de base, les utilisations et les différences entre deux frameworks Python : Flask et CherryPy.
De nombreux programmeurs adorent résoudre des problèmes mathématiques délicats à l'aide de code. Il aide à aiguiser l'esprit et à améliorer les compétences en résolution de problèmes. Dans cet article, vous apprendrez à trouver les carrés et cubes parfaits à n chiffres les plus petits et les plus grands à l'aide de Python, C++ et JavaScript. Chaque exemple contient également un exemple de sortie pour plusieurs valeurs différentes.
L'exécution de Python à partir du terminal est souvent inévitable. Cependant, si vous venez d'installer Python sur Windows 10 pour la première fois, son exécution via le terminal Windows n'est possible que s'il est ajouté à la variable d'environnement Windows PATH.
L'instruction if est la force motrice de la programmation logique. En conséquence, une meilleure compréhension des Pythons est un ajout important à vos compétences en programmation Python.
Bien que vous puissiez utiliser une calculatrice graphique sur votre ordinateur, l'interpréteur du langage de programmation Python peut également servir de calculatrice de bureau. C'est une blague si populaire dans la communauté Python qu'elle est mentionnée dans le didacticiel officiel. Voici comment vous pouvez utiliser Python comme calculatrice.
En tant que programmeur, vous devez relever des défis pour survivre et créer des merveilles dans le domaine du développement ou de la programmation. Par conséquent, si vous cherchez à apprendre un langage de programmation avancé pour améliorer vos compétences professionnelles, Java est l'une des meilleures perspectives.
Apprendre un nouveau langage de programmation comme Python devient facile si vous disposez d'une feuille de route complète détaillant les concepts à apprendre en tant que débutant et comment progresser davantage pour atteindre le prochain jalon. Même les programmeurs intermédiaires devraient fréquemment réviser leurs bases pour se construire une base solide.
De nos jours, il est courant de créer un site Web ou une application qui ajuste son interface utilisateur en fonction du navigateur ou de l'appareil. Il existe deux approches pour atteindre cet objectif. La première consiste à créer différentes versions de votre site Web ou de votre application pour différents appareils. Mais c'est inefficace et peut conduire à des erreurs imprévisibles.
Travailler avec des nombres fait partie intégrante de la programmation. Chaque langage de programmation prend en charge la manipulation des nombres de différentes manières. Dans cet article, vous apprendrez à trouver le nombre total de chiffres dans un entier à l'aide d'approches itératives, basées sur les journaux et basées sur les chaînes.
Les conteneurs sont très utiles pour le développement, le déploiement et la gestion de logiciels dans un environnement virtuel. Docker est utile dans le processus de conteneurisation, mais ce n'est pas la seule plate-forme disponible. Si vous recherchez des alternatives à Docker, ne cherchez pas plus loin. Cette liste présente des alternatives Docker riches en fonctionnalités et efficaces à utiliser dans votre prochain projet.
SQL vs NoSQL : quelle est la meilleure base de données pour votre prochain projet ?
L'intégration de services tiers dans vos publications WordPress est un moyen passionnant de captiver l'intérêt d'un visiteur. Le contenu intégré fournit également des repères visuels qui facilitent la numérisation. WordPress a facilité l'ajout de ce type de contenu.
Node.js est un environnement d'exécution JavaScript qui vous permet d'exécuter JavaScript en dehors des navigateurs Web, ce qui en fait un choix populaire pour développer toutes sortes d'applications. Une partie de sa popularité est due à la pléthore de packages NPM disponibles pour faciliter l'expérience des développeurs.
Solidity est le langage de programmation utilisé par les contrats intelligents sur la blockchain Ethereum. C'est un langage de programmation orienté objet de type statique.
