Astuces CSS : les snippets utiles à votre projet
Le CSS (soit de l’anglais Cascading Style Sheets ou feuille de style en cascade) a révolutionné le monde du World Wide Web à une époque où la programmation était synonyme d’effort. Cette feuille de style a facilité la mise en page des sites Internet tout en les rendant plus attractifs. La technologie du CSS a progressé très rapidement. Depuis HTML5, tous les éléments HTML de présentation sont considérés comme démodés. A présent, il convient de traiter le contenu et la mise en page de manière séparée.
Le CSS se développe de manière continue ce qui a ouvert d’innombrables possibilités de design aussi variées que complexes. Ce large choix complique quelque peu la création d’une liste de CSS qui sort du lot. Néanmoins, nous vous avons concocté une sélection d’astuces CSS particulièrement intéressantes accompagnés de leurs snippets.
- Numéroter les titres
- Dissimuler les éléments compatibles avec le SEO
- Créer des ombres de textes
- Modifier les éléments du site Internet grâce aux filtres CSS
- Créer des légendes de photos optimales
- Mettre en valeur les premières lettres d’un paragraphe
- Utiliser des effets parallaxe
- Mettre en avant un champ de formulaire obligatoire
- Signes d’énumération
Numéroter les titres
Si votre document HTML doit comporter des titres et des sous-titres, vous avez la possibilité de les numéroter manuellement ou en utilisant le script. Autrement, il est également possible d’utiliser CSS qui le fera pour vous. Cette astuce CSS est prise en charge par tous les navigateurs. Voici comment faire :
#Titres {
counter-reset: heading;
}
h1:before {
content: counter(heading)") ";
counter-increment: heading;
}
h1 {
counter-reset: subheading;
}
h2:before {
content: counter(heading)"." counter(subheading)") ";
counter-increment: subheading;
}
body{
font-family: courier new;
}
Le résultat est le suivant :
Dissimuler les éléments compatibles avec le SEO
Les contenus des documents HTML d’un site Web qui sont cachées grâce aux commandes display: none; ou visibility: hidden ne sont pas bien affichés par les moteurs de recherche. Le code suivant permet d’éviter ces deux éléments de manière habile. Attention, leur utilisation à outrance est déconseillée :
.hidden {
position: absolute;
top: -9999px;
left: -9999px;
}
Créer des ombres de textes
Il est bien entendu possible de créer des ombres de textes en utilisant des programmes de graphisme. Cependant, il faut garder en mémoire que, d’un côté, le processus exige quelques connaissances en la matière et, de l’autre, qu’il rend le contenu illisible pour les moteurs de recherche. Depuis la version 3, le langage CSS s’est doté d’effets qui permettent d’embellir les pages Web sans modifier leurs éléments texte de base. L’astuce CSS suivant illustre l’option d’ombre de texte :
p {
font-size: 50pt;
font-family: sans-serif;
text-shadow: 10px 11px 18px rgba(300, 180, 100, 1),
-10px -11px 18px red;
}
Grâce à ce code, les éléments <p> sont définis avec deux ombres (text-shadow). Il est possible de moduler ce nombre à sa convenance. Veillez bien à l’espace après la virgule. Les deux premiers indicateurs déterminent la position de l’ombre, soit d’abord la coordonnée x puis la coordonnée y. La troisième entrée définit la taille. Enfin, la dernière donnée indique la couleur de l’ombre, soit par RGBA (300, 180, 100, 1) comme sur la première ligne ou comme dans la deuxième (red). Voici à quoi le snippet d’exemple ressemblerait :
Modifier les éléments du site Internet grâce aux filtres CSS
CSS représente une bonne alternative à Photoshop. Le langage propose des effets de filtre semblables à ceux du programme de retouche photo. Il est ainsi possible d’adapter des illustrations, des fonds d’écran, des textes voire même des vidéos en augmentant par exemple la luminosité, en modifiant le contraste ou en utilisant des nuances de gris. Ces méthodes de filtrage sont disponibles sur la plupart des navigateurs modernes hormis Internet explorer. Voici un exemple de syntaxe de ces effets CSS :
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
La donnée du filtrage, dans cet exemple grayscale, est entre parenthèses. Elle détermine la force du filtre. La valeur 1 correspond à 100 pourcent.
Voici d’autres filtres utiles :
Filtre | Description | Valeur |
Blur(valeur) | Flou artistique | Radius en pixels |
Brightness(valeur) | Luminosité | Standard : 1, éclaircir : >1, assombrir : <1 |
Contrast(valeur) | Contraste | Standard : 1, augmenter : >1, réduire : <1 |
Invert(valeur) | Inverser les couleurs | Valeur de 1 : inversement complet |
Opacity(valeur) | Opacité | Valeur maximale : 1 (faire disparaitre l’élément) |
Saturate(valeur) | Saturation | Standard : 1, augmenter : >1, réduire : <1 |
Sepia(valeur) | Couleur sépia | Valeur maximale : 1 (correspond à une couleur sépia de 100%) |
Créer des légendes de photos optimales
Aucune règle n’existe en ce qui concerne les extraits de textes pour décrire les images. On peut dire cependant qu’une légende ne doit pas dépasser plus d’une ligne de sorte qu’elle ne dépasse l’alignement. La variante la plus courante est celle située à gauche. Il est pour cela conseillé de procéder à des données séparées dans l’élément <figure> mais aussi dans l’élément <figcaption>, pour que ces deux apparaissent dans les légendes. Le snippet à utiliser est le suivant :
figure {
text-align: center;
}
figcaption {
display: inline-block;
text-align: left;
}
Cette astuce CSS fait en sorte que la légende qui est le plus souvent à gauche s’affiche au centre grâce à la donnée inline-block si l’extrait de texte ne va pas sur toute la largeur de l’image.
Mettre en valeur les premières lettres d’un paragraphe
Les pseudo-classes permettent de mettre en avant certains éléments HTML tels que les premières lettres d’un paragraphe. Grâce à ::first-letter, il est facile de créer des effets de style, comme c’est souvent le cas dans le contes de fées avec la fameuse phrase « il était une fois ».
p{
font-family: "bookman old style"
}
p:first-child::first-letter{
font-family: "papyrus";
font-size: 25px
font-weight: bold
}
En voici le résultat :
Utiliser des effets parallaxe
Beaucoup de sites Internet modernes se basent sur l’effet parallaxe que les visiteurs enclenchent en défilant leurs souris. Ce programme a pour effet de faire bouger le fond d’écran plus lentement que les éléments qui se trouvent en avant-plan. En règle générale, ce dernier est réalisé en combinaison avec JavaScript ou avec jQuery. L’astuce CSS suivant vous montre par exemple comment construire un défilement parallaxe avec une feuille de style en cascade dans votre site Internet :
p {
width: 100%;
margin: auto;
font-size: 50px;
transform: scale(.5);
font-family: courier new;
font-weght: bold;
}
div {
background-image: url("URL DES HINTERGRUNDBILDES");
background-attachment: fixed;
transform: scale(1.25);}
body {
height: 100%;
overflow: scroll;
}
Indiquez l’URL de votre fond d’écran à la suite du paramètre background-image: url. Vous pouvez adapter à votre guise les valeurs qui concernent la typographie et la taille des éléments.
Mettre en avant un champ de formulaire obligatoire
Les éléments :required und :optional vous permettent d‘optimiser vos formulaires présents sur votre site Internet. Ils mettent en couleur les champs obligatoires pour les démarquer de ceux qui demeurent optionnels. Le snippet CSS à utiliser dans ce cas de figure est le suivant :
:required {
border: 1px solid red;
}
:optional {
border: 1px solid black;
}
Dans cet exemple, la cadre rouge représente le champ obligatoire tandis le champ optionnel est en noir :
Signes d’énumération
Les petites puces rondes (ou bullets points en anglais) ne sont pas les seules options qui s’offrent à vous si vous désirez lister des phrases de votre texte HTML. Le langage CSS vous propose par exemple des puces à forme rectangulaire. Voici l’astuce CSS à adopter :
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
Le résultat est le suivant :
Articles similaires
Compresser des fichiers CSS pour améliorer la performance
Il est rare de trouver des données qui permettent la mise en page d’un site dans des codes HTML. Les couleurs, les polices voire les tailles de ces éléments HTML sont de plus en plus souvent définies dans des feuilles de style telles que CSS. Lorsqu’un site Internet devient complexe, on constate souvent qu’il y a de plus en plus de fichiers CSS inutiles, et cela peut avoir un effet très négatif…
Comment incorporer une icon font à un document HTML
Les icônes sont intégrés en général via des classes CSS dans des fichiers HTML. Ce principe est illustré par l’une des icon fonts les plus utilisées, soit la Font Awesome. Cette police open source comprend plus de 600 pictogrammes vectoriels et elle convainc grâce à sa simplicité et sa mise à jour régulière. Le paquet d’installation contient un fichier CSS presque entièrement configuré, ce qui…
Ruslan GrumbleShutterstock Inspiration de Web design pour des sites Web créatifs
Vous êtes à la recherche d’idées de design pour votre site Web ? Il existe de nombreuses plateformes en ligne, communautés et blogs sur le thème de la conception visuelle de sites Web. Nous avons rassemblé pour vous les meilleures sources d’inspiration pour votre choix de design. Peu importe que vous recherchiez une inspiration de style flat design, pour la page unique d’un site ou d’un thème…
Sinart CreativeShutterstock Présentation des YAML
Si vous souhaitez développer une nouvelle application Web, vous avez le choix entre écrire complètement le code ou utiliser des frameworks. Ces ensembles de codes présentent des structures prêtes à l'emploi, que vous pouvez ensuite adapter à vos propres idées. Le framework CSS YAML donne accès à une bonne structure de framework responsive, qui de plus est déjà optimisée pour différents navigateurs…
Intégrer du CSS dans une page HTML : guide pratique avec exemples
HTML et CSS font partie des éléments centraux du World Wide Web et sont souvent utilisés ensemble. Lorsque vous travaillez avec un document HTML et que vous souhaitez intégrer du CSS, il existe plusieurs méthodes internes et externes pour appliquer efficacement les spécifications de format à votre contenu textuel. Apprenez comment utiliser du CSS dans un fichier HTML dans ce guide pratique avec…
