Configuration de la structure HTML avec Bootstrap 5
- Webdesign
- 890 vues
- Yoan LE DIZES Expert SEO technique & sémantique
Les points clés, Yoma-Web :
- Structure HTML : utiliser Bootstrap 5 pour créer une section
avec une classe .parallax et un conteneur .label-container au centre. - Effet parallaxe CSS : .parallax : background-attachment: fixed;, background-size: cover;, etc.
- Coins arrondis à l’intérieur : définir .label-container avec position: relative, puis utiliser ses pseudo-éléments (::before, ::after) et ceux de pour créer des coins blancs arrondis vers l’intérieur.
- Texte et boutons : insérer h1, paragraphes et CTA au centre, avec texte en blanc et effet d’ombre pour la lisibilité.
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.
