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.
Vous avez un projet Web ?
Profitez de l'expérience d'un expert du
WEB
Je vous accompagne de la création à la stratégie de positionnement de votre site web.
