Cette vidéo, de formation HTML CSS gratuite pour débutants, va vous montrer comment réaliser certains effets sur les boîtes. On pourra appliquer un dégradé en couleur de fond ou encore mettre des ombres portées sur nos éléments.
Bienvenue dans la suite de notre série de formation HTML CSS. Dans cette session, nous plongeons plus profondément dans les subtilités de la mise en forme des boîtes. J’ai préparé un fichier nommé « 15-mise-en-forme-boites.html » ainsi que sa feuille de style associée. Tout est lié, et nous sommes prêts à commencer notre exploration.
Compréhension des largeurs de boîtes
Tout d’abord, concentrons-nous sur les largeurs de boîtes, en abordant notamment les problèmes liés aux marges internes et externes. Nous allons reproduire un système de colonnes tel que vu dans la vidéo précédente. Au sein du corps de la page, je vais établir un conteneur principal. À l’intérieur, je créerai des colonnes gauche et droite à l’aide d’éléments <div> avec la classe « col ».
Dans le HTML, cela implique une structuration simple avec des balises <h2> pour les titres et des balises <p> pour les paragraphes. Pour assurer un alignement correct, j’ajouterai du CSS pour centrer le contenu dans le conteneur principal.
Définition de la largeur du conteneur
En définissant la largeur de notre conteneur principal à 1000 pixels, nous assurons une présentation soignée. Bien que la norme actuelle suggère d’utiliser 1140 pixels pour les écrans modernes, par souci de simplicité, nous resterons sur 1000 pixels. Avec deux colonnes, chacune occupant 500 pixels, nous établissons une mise en page claire.
Gestion des propriétés des colonnes
En appliquant du CSS pour définir les propriétés des colonnes, nous définissons leur largeur à 500 pixels et les alignons à gauche. L’ajout de couleur de fond et l’ajustement de la couleur du texte améliorent l’attrait visuel.
Traitement des problèmes de rembourrage
Cependant, l’introduction d’un rembourrage de 20 pixels révèle un problème crucial. Le rembourrage ajouté étend la largeur totale des éléments au-delà de la limite du conteneur. Pour résoudre cela, ajuster la largeur des colonnes devient nécessaire. En tenant compte du rembourrage dans le calcul de la largeur en utilisant la propriété box-sizing définie sur border-box, nous assurons un alignement correct sans problèmes de débordement.
Amélioration avec des dégradés
Au-delà des couleurs de base, CSS3 introduit des effets de dégradé, offrant des visuels plus dynamiques. L’utilisation d’outils comme cssgradient.io simplifie la génération de dégradés. En remplaçant la couleur de fond par une propriété de dégradé linéaire, nous obtenons des arrière-plans de colonnes visuellement attrayants.
Ajout de coins arrondis et d’ombres
Pour améliorer davantage l’esthétique des boîtes, des coins arrondis et des ombres portées peuvent être appliqués. Les propriétés CSS comme border-radius permettent la création de bords arrondis, tandis que box-shadow permet l’ajout d’effets d’ombre subtils, améliorant la profondeur et l’attrait visuel de la mise en page.
Personnalisation des ombres pour la profondeur
Maintenant, plongeons dans la personnalisation des ombres de boîtes pour ajouter de la profondeur à notre design. En ajustant les décalages horizontaux et verticaux de l’ombre, le rayon de flou, le rayon d’étalement et l’opacité de la couleur, nous pouvons obtenir divers effets d’ombre.
L’utilisation d’outils comme box-shadow.dev simplifie ce processus, nous permettant d’affiner visuellement les propriétés de l’ombre. Une fois satisfait du résultat, nous pouvons simplement copier le code CSS généré et l’appliquer à nos colonnes.
En intégrant les propriétés CSS de box-shadow générées dans notre code, nous constatons instantanément l’impact sur notre mise en page. Ajuster l’opacité peut affiner davantage l’effet d’ombre, garantissant qu’il complète le design sans le submerger.
Touches finales et conclusion
Après l’application de l’effet d’ombre, nous devrons peut-être ajuster l’opacité pour une meilleure visibilité, surtout lors des démonstrations. L’utilisation des outils de développement nous permet d’apporter des ajustements en temps réel jusqu’à obtenir le résultat souhaité.
Avec cela, nous concluons ce tutoriel vidéo. Nous espérons que vous l’avez trouvé informatif et agréable. N’oubliez pas de liker, de vous abonner et d’activer la cloche de notification pour les prochaines mises à jour. Nous vous donnons rendez-vous bientôt dans notre prochaine vidéo, où nous continuerons à explorer les techniques avancées HTML CSS.
Restez à l’écoute et continuez à coder !
