Admin/Dev

21
Mai
2017

Astuce CSS : Pas à pas pour créer un titre de boite design en HTML/CSS

Publié par sky

Pour faire suite à mon dernier article sur le pas à pas pour faire un titre de page design, voici une déclinaison dans le même genre, afin de faire des titres de boite, un peu design, toujours en utilisant que les styles CSS.

Voila le résultat que nous souhaitons obtenir

Article skymac : Astuce CSS - Pas à pas pour la création d'un titre design en HTML/CSS

Commençons par écrire le HTML

Mon Super Titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis malesuada semper. Phasellus nec diam massa. Donec commodo tellus magna, a elementum dolor tempor id.

puis, comme la fois précédente, nos classes CSS vides

.boite {}
.boite .titre {}
.boite .contenu {}

et écrivons les définitions de bases pour le titre, le contenu et la boite sur laquelle nous appliquons un bord

.boite {border:solid 1px #AEAEAE;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; }
.boite .contenu {font-family:Arial; font-size:12px; padding:8px 16px 16px;}

nous ne toucherons plus au contenu, finalement, accessoire pour ce tutoriel, mais sachez que vous pouvez évidemment le customiser comme bon vous semble ou intégrer des images, ou du HTML plus complexe.

Avec le titre de page, nous avions utiliser une astuce simple, réduire la hauteur de l'élément HTML parent tout en conservant un affichage en overflow.

Ici nous ne pouvons pas utiliser cette technique car l'élément HTML est la boite qui ne contient pas que le titre mais aussi le contenu. En appliquant la même technique, le bord serait placé sur la partie supérieure du titre uniquement, bref, pas l'effet escompté.

Nous laissons donc la boite tranquille, afin que le bord reste en place, et nous allons jouer sur le titre. Et puisque le bord supérieur ne peux donc pas descendre sur le titre, ... nous allons monter le titre sur le bord supérieur.

.boite {border:solid 1px #AEAEAE;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; position:relative; top:-8px;}
.boite .contenu {font-family:Arial; font-size:12px; padding:8px 16px 16px;}

Encore une fois, nous pouvons jouer sur la position du titre, en changeant la valeur appliqué à la définition top.

Puis nous ajoutons un fond à notre titre, avec un peu d'espace à gauche et à droite, afin que le trait du bord ne traverse plus notre titre

.boite {border:solid 1px #AEAEAE;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; display:inline-block; background:#FFFFFF; padding:0 8px; position:relative; top:-8px;}
.boite .contenu {font-family:Arial; font-size:12px; padding:8px 16px 16px;}

enfin, nous plaçons notre titre au centre

.boite {border:solid 1px #AEAEAE; text-align:center;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; display:inline-block; background:#FFFFFF; padding:0 8px; position:relative; top:-8px;}
.boite .contenu {font-family:Arial; font-size:12px; padding:8px 16px 16px;}

vous pouvez bien sur choisir de laisser votre titre à gauche, ou le placer à gauche, en ajoutant un peu de marge du côté où vous souhaitez le placer.

 

Version évoluée

Simplement nous pouvons faire évoluer notre code pour avoir une version encore plus design, comme voici

Article skymac : Astuce CSS - Pas à pas pour créer un titre de boite design en HTML/CSS

Il suffit d'ajouter un bord à notre titre

.boite {border:solid 1px #AEAEAE; text-align:center;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; display:inline-block; background:#FFFFFF; padding:0 8px; position:relative; top:-8px;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; display:inline-block; background:#FFFFFF; padding:8px; position:relative; top:-18px; border:solid 1px #AEAEAE;}

une nouvelle fois, une fois l'astuce assimilée, les possibilités de customisation restent nombreuses, et ne dépendent que de votre imagination.

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Les cookies assurent le bon fonctionnement de nos services. En continuant, vous acceptez leur utilisation sur notre site internet.
Accepter