Configuration de la structure HTML avec Bootstrap 5

Tout d'abord, configurons la structure HTML de base pour notre section. Nous utiliserons Bootstrap 5 pour un design réactif et inclurons une section parallax et un label-container.

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Section avec Parallaxe et coins intérieurs arrondis</title> <style> .parallax { background-image: url('https://picsum.photos/1920/1080'); /* Votre image de fond */ min-height: 100vh; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .label-container { position: relative; background: rgba(0, 0, 0, 0.7); padding: 2rem; color: white; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); display: inline-block; border-radius: 0; z-index: 1; } .label-container::before, .label-container::after, .label-container span::before, .label-container span::after { content: ''; position: absolute; width: 30px; height: 30px; background: #fff; /* Assurez-vous que la couleur correspond au fond de la section parallaxe */ z-index: -1; } .label-container::before { top: -15px; left: -15px; border-radius: 0 0 0 30px; } .label-container::after { top: -15px; right: -15px; border-radius: 0 0 30px 0; } .label-container span::before { bottom: -15px; left: -15px; border-radius: 0 30px 0 0; } .label-container span::after { bottom: -15px; right: -15px; border-radius: 30px 0 0 0; } .content { height: 100vh; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <section class="parallax"> <div class="container content text-center"> <div class="label-container"> <h1>Mon titre h1<h1> <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot.</p> <a class="btn btn-primary">En savoir plus</a> <span></span> </div> </div> </section> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script> </body> </html>

Explication du CSS

Décomposons le CSS pour comprendre comment il crée l'effet parallaxe et les coins arrondis vers l'intérieur.

.parallax { background-image: url('https://picsum.photos/1920/1080'); /* Image de remplacement */ min-height: 100vh; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

La classe .parallax définit une image de fond fixe qui crée un effet parallaxe.

Cette astuce CSS Grid pourrait vous intéresser : Grid CSS responsive sans Media Queries

Créer le conteneur d'étiquette avec coins arrondis vers l'intérieur :

.label-container { position: relative; background: rgba(0, 0, 0, 0.7); padding: 2rem; color: white; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); display: inline-block; border-radius: 0; z-index: 1; }

La classe .label-container stylise le conteneur principal avec un fond semi-transparent, du padding, et une ombre portée pour le texte.

Coder les coins arrondis vers l'intérieur en CSS :

.label-container::before, .label-container::after, .label-container span::before, .label-container span::after { content: ''; position: absolute; width: 30px; height: 30px; background: #fff; z-index: -1; } .label-container::before { top: -15px; left: -15px; border-radius: 0 0 0 30px; } .label-container::after { top: -15px; right: -15px; border-radius: 0 0 30px 0; } .label-container span::before { bottom: -15px; left: -15px; border-radius: 0 30px 0 0; } .label-container span::after { bottom: -15px; right: -15px; border-radius: 30px 0 0 0; }

Les pseudo-éléments sont utilisés pour créer les coins arrondis vers l'intérieur. Chaque coin est stylisé avec des sélecteurs ::before et ::after en positionnement absolu et border-radius pour créer l'effet courbé.

Important :

Assurez-vous d'inclure l'élément à l'intérieur de .label-container pour permettre aux pseudo-éléments des coins inférieurs de se rendre correctement.

En suivant ce guide, vous pouvez créer une section visuellement attrayante avec un fond parallaxe et un conteneur d'étiquette unique avec des coins arrondis vers l'intérieur. Ce design peut améliorer l'attrait esthétique de votre site web et faire ressortir les contenus clés. N'hésitez pas à personnaliser les styles selon vos besoins spécifiques en matière de design.