Accueil
Emploi
Calendrier
Entreprises
Urgences
Derniers articles
30 exemples CSS
la suite...
Comment empêcher le redimensionnement d’un textarea en CSS
Code...
textarea {
resize: none;
}
Comment écrire des commentaires en HTML
Code...
<!-- Ceci est un commentaire HTML sur une seule ligne -->
<!-- Ceci est un exemple de
Commentaire HTML multiligne -->
Comment placer une bordure à l’intérieur d’un bloc div en CSS en utilisant simplement la propriété CSS3 box-sizing avec la valeur border-box. voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 500px;
height: 100px;
border: 15px solid red;
background: black;
margin: 10px;
color: #fff;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</body>
</html>
Comment remplacer le Checkbox par un icone fontawesome voir la démo
Code...
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fancy-checkbox input[type="checkbox"],
.custom-checkbox .checked {
display: none;
}
.custom-checkbox input[type="checkbox"]:checked~.checked {
display: inline-block;
}
.custom-checkbox input[type="checkbox"]:checked~.unchecked {
display: none;
}
</style>
</head>
<body style="font-size: 2em;">
<label class="custom-checkbox">
<input type="checkbox" />
<i class="fa fa-fw fa fa-bell-o unchecked"></i>
<i class="fa fa-fw fa fa-bell-slash-o checked"></i>
Notification
</label>
</body>
</html>
Comment créer deux div côte à côte de la même hauteur en CSS voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<style>
.row {
display: flex;
}
.col {
flex: 1;
padding: 1em;
border: solid;
}
</style>
</head>
<body>
<div class="row">
<div class="col">Lorem ipsum gravida vitae tristique a, porttitor sit amet enim.</div>
<div class="col">Donec auctor sodales nunc quis tristique. Pellentesque et sollicitudin nisl, sed blandit quam. Quisque tortor enim, blandit id congue eget, sagittis quis ligula. Aenean gravida sagittis ultrices. Duis in erat nec ligula laoreet faucibus.</div>
</div>
</body>
</html>
Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS en définissant simplement la valeur de la propriété CSS border-collapse pour les éléments <table> à collapse voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse: collapse;
}
table th, table td{
padding: 10px;
}
table, th, td{
border: 1px solid #000;
}
table th {
background-color: #272b33;
color: #fff;
vertical-align: middle;
padding-left: 10px;
padding: 20px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Ligne</th>
<th>Nom</th>
<th>Prénom</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jean</td>
<td>Baptise</td>
<td>jeanbaptise@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Thomas</td>
<td>Skant</td>
<td>thomasskant@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Comment changer une image au survol avec CSS en utilisant la propriété CSS background-image en combinaison avec la pseudo-classe :hover voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.person {
width: 380px;
height: 720px;
margin: 60px;
background: url("/drupal/sites/default/files/pictures/2023-02/face.png") no-repeat;
}
.person:hover {
background: url("/drupal/sites/default/files/pictures/2023-02/dos.png") no-repeat;
}
</style>
</head>
<body>
<div class="person"></div>
</body>
</html>
Comment rendre une DIV modifiable en HTML
Code...
<!DOCTYPE html>
<html>
<body>
<h1 contentEditable="true">Titre</h1>
<div contentEditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac magna aliquam, venenatis lectus ut, efficitur felis.</div>
</body>
</html>
Comment changer la couleur du texte au survol en CSS voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a {
-webkit-transition: color 2s;
transition: color 2s;
}
a:hover {
color: green;
}
</style>
</head>
<body>
<h1>Lorem <a href="#">Survoler ce lien</a> ipsum.</h1>
</body>
</html>
Comment ajouter l’ombre sur un texte en CSS en utilisant la propriété CSS text-shadow voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
</body>
</html>
Comment ajouter l’ombre aux éléments HTML en CSS en utilisant la propriété CSS box-shadow voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<title>Ajouter l'ombre aux éléments HTML en CSS</title>
<style>
.box {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
}
</style>
</head>
<body>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
Comment créer un curseur personnalisé avec CSS voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>créer un curseur personnalisé avec CSS</title>
<style type="text/css">
a{
cursor: url("cursor: url('/drupal/sites/default/files/pictures/2023-02/cursorr.png'), default;"), default;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, <a href="#">survoler ce lien</a> adipiscing elit.
</body>
</html>
Comment afficher du texte sur une image avec HTML / CSS avec la propriété margin voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Afficher du texte sur une image avec HTML / CSS</title>
<style type="text/css">
.container {
display: inline-block;
position: relative;
}
.container .text {
background: rgba(0, 0, 0, 0.8);
z-index: 1;
position: absolute;
text-align: center;
font-family: Georgia;
margin: 0 auto;
left: 0;
right: 0;
top: 30%;
color: white;
width: 70%;
}
</style>
</head>
<body>
<div class="container">
<img src="/drupal/sites/default/files/pictures/2023-02/css-demo-fleur.jpg">
<div class="text">
<h1>Fleurs</h1>
</div>
</div>
</body>
</html>
Comment supprimer l’espace blanc sous une image avec CSS voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Supprimer l'espace blanc sous une image avec CSS</title>
<style>
.box1,
.box2 {
width: 200px;
border: 4px solid black;
}
.box2 img {
display: block;
}
</style>
</head>
<body>
<h3>Comportement par défaut</h3>
<div class="box1">
<img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
</div>
<br>
<h3>Après la modification de la propriété display</h3>
<div class="box2">
<img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
</div>
</body>
</html>
Comment changer la transparence du background sans affecter le texte voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment changer la transparence du background</title>
<style type="text/css">
body {
background-image: url("/drupal/sites/default/files/pictures/2023-02/background-bois.jpg");
}
p {
padding: 30px;
color: #fff;
font: 18px Georgia;
background: rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
Comment créer une ligne verticale en HTML voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Créer une ligne verticale en HTML</title>
<style>
.vertical-line{
border-left: 2px solid #000;
display: inline-block;
height: 130px;
margin: 0 20px;
}
</style>
</head>
<body>
Lorem ipsum
<span class="vertical-line"></span>
Lorem ipsum
</body>
</html>
Comment redimensionner automatiquement une image pour l’adapter à un bloc DIV avec CSS en appliquant la propriété max-width afin qu’elle puisse s’adapter tout en maintenant ses proportions voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment redimensionner automatiquement une image pour l'adapter à un bloc DIV</title>
<style>
img{
max-width: 100%;
max-height: 100%;
display: block;
}
.container{
width: 250px;
border: 5px solid black;
}
</style>
</head>
<body>
<h3>Auto adapter la taille de l'image au bloc div</h3>
<div class="container">
<img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
</div>
</body>
</html>
Comment changer la couleur de la balise HR avec CSS voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Changer la couleur de la balise HR avec CSS</title>
<style>
hr{
height: 3px;
background-color: #ff7d95;
border: none;
}
</style>
</head>
<body>
<h1>Titre</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
Comment aligner un bloc DIV horizontalement avec CSS en utilisant la propriété margin avec la valeur « auto » voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aligner un bloc DIV horizontalement avec CSS</title>
<style>
.box {
width: 70%;
margin: 0 auto;
padding: 15px;
background: #ff7d95;
}
</style>
</head>
<body>
<div class="box">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
Comment définir la hauteur d’une DIV à 100% avec CSS
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment définir la hauteur d'une DIV à 100%</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
}
.wrapper {
height: 100%;
background: #f285a4;
}
</style>
</head>
<body>
<div class="wrapper">La hauteur de cet élément DIV est égale à 100% de la hauteur de son élément parent.</div>
</body>
</html>
Comment aligner le texte verticalement au centre d’une DIV avec CSS
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aligner le texte verticalement au centre d'une DIV avec CSS</title>
<style type="text/css">
.box{
height: 30px;
line-height: 30px;
padding: 15px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
Comment ajuster la taille d’une div à son contenu en CSS en utilisant la propriété CSS display avec la valeur inline-block voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajuster la taille d'une div à son contenu</title>
<style>
img {
border: 20px solid white;
}
.container {
display: inline-block;
border: 20px solid #000;
}
</style>
</head>
<body>
<div class="container">
<img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
</div>
</body>
</html>
Comment créer une liste sans puces en HTML voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Créer une liste sans puces</title>
<style>
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</body>
</html>
Comment superposer une div sur une autre div avec CSS en utilisant la propriété CSS position en combinaison avec la propriété z-index voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superposer une div sur une autre div avec CSS</title>
<style>
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
background: red;
}
.child2 {
z-index: 1;
margin: 30px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child1 child2"></div>
</div>
</body>
</html>
Comment redimensionner une image en background avec CSS en utilisant la propriété CSS background-size: cover voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Redimensionner l'image en background avec CSS</title>
<style>
.container {
width: 500px;
height: 400px;
background: url("/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg") no-repeat;
background-size: cover;
border: 5px solid #000;
margin: 10px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Comment désactiver un lien en utilisant uniquement CSS en utilisant la propriété CSS pointer-events voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Désactiver un lien en CSS</title>
<style>
.disabled{
cursor: default;
pointer-events: none;
text-decoration: none;
color: grey;
}
</style>
</head>
<body>
<a href="#" class="disabled">Ceci est un lien désactivé</a>
</body>
</html>
Comment aligner verticalement une image dans une DIV en CSS en utilisant la propriété CSS vertical-align en combinaison avec display: table-cell voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aligner verticalement une image dans une DIV</title>
<style>
img {
display: block;
margin: 0 auto;
}
.container {
display: inline-block;
margin: 30px;
}
.box {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 250px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
</div>
</div>
</body>
</html>
Changer le bouton parcourir d’un input de type file avec CSS voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Changer le bouton parcourir</title>
<style>
.parent-div {
display: inline-block;
position: relative;
overflow: hidden;
}
.parent-div input[type=file] {
left: 0;
top: 0;
opacity: 0;
position: absolute;
font-size: 90px;
}
.btn-upload {
background-color: #fff;
border: 3px solid #000;
color: #000;
padding: 10px 25px;
border-radius: 10px;
font-size: 22px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="parent-div">
<button class="btn-upload">Choisir le fichier</button>
<input type="file" name="upfile" />
</div>
</body>
</html>
Personnaliser la balise select avec CSS voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Personnaliser la balise select avec CSS</title>
<style>
.select-style {
padding: 0;
margin: 0;
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background-color: #fff;
background: #fff;
position: relative;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style:after {
top: 50%;
left: 85%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-top-color: #000000;
border-width: 5px;
margin-top: -2px;
z-index: 100;
}
.select-style select:focus {
outline: none;
}
</style>
</head>
<body>
<div class="select-style">
<select>
<option value="javascript">JavaScript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
</select>
</div>
</body>
</html>
Personnaliser les boutons checkbox avec CSS voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Personnaliser les boutons checkbox avec CSS</title>
<style>
label {
display: block;
cursor: pointer;
line-height: 2;
font-size: 1em;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1;
}
input[type="checkbox"]+span {
font: 16pt sans-serif;
color: #000;
}
input[type="checkbox"]+span:before {
font: 16pt FontAwesome;
content: '\00f096';
display: inline-block;
width: 16pt;
padding: 2px 0 0 3px;
margin-right: 0.5em;
}
input[type="checkbox"]:checked+span:before {
content: '\00f046';
}
input[type="checkbox"]:focus+span:before {
outline: 1px dotted #aaa;
}
input[type="checkbox"]:disabled+span {
color: #999;
}
input[type="checkbox"]:not(:disabled)+span:hover:before {
text-shadow: 0 1px 2px #77F;
}
</style>
</head>
<body>
<label>
<input type="checkbox"><span>Développement logiciel</span>
</label>
<label>
<input type="checkbox"><span>Développement Web</span>
</label>
<label>
<input type="checkbox"><span>Développement mobile</span>
</label>
</body>
</html>
Personnaliser les boutons radio avec CSS voir la démo
Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Personnaliser les boutons radio avec CSS</title>
<style>
label {
display: block;
cursor: pointer;
line-height: 2;
font-size: 1em;
}
[type="radio"] {
clip: rect(0 0 0 0);
position: absolute;
}
[type="radio"] + span {
display: block;
}
[type="radio"]:checked + span:before {
box-shadow: 0 0 0 0.2em #000;
background: #8EB2FB;
}
[type="radio"] + span:before {
content: '';
width: 1em;
height: 1em;
border-radius: 1em;
display: inline-block;
border: 0.125em solid #fff;
transition: 0.5s ease all;
vertical-align: -0.25em;
box-shadow: 0 0 0 0.15em #000;
margin-right: 0.75em;
}
</style>
</head>
<body>
<label for="logiciel">
<input type="radio" name="radiobtn" id="logiciel"> <span>Développement logiciel</span>
</label>
<label for="web">
<input type="radio" name="radiobtn" id="web"> <span>Développement Web</span>
</label>
<label for="mobile">
<input type="radio" name="radiobtn" id="mobile" checked> <span>Développement mobile</span>
</label>
</body>
</html>
5 nouveautés CSS
la suite...
1. Les variables CSS (custom properties)
L'utilisation de variables est la base immuable de tout langage de programmation. CSS s'en dote enfin et va permettre d'offrir un confort de gestion non négligeable, notamment pour les projets contenant des centaines voire milliers de lignes en CSS.
L'intérêt des variables CSS est d'enregistrer une valeur quelconque au sein d'un élément réutilisable partout dans le code (la fameuse variable), sans avoir à répéter sa valeur. Prenons un exemple simple : votre site web possède deux couleurs principales, une pour les fonds et une pour les textes. Ces couleurs devant être utilisées un peu partout dans le code, il sera plus simple de les enregistrer dans des variables puis d'appeler ces variables partout où les couleurs sont à insérer. Ainsi, si vous voulez tester d'autres couleurs, vous n'aurez plus qu'une ligne à changer...
Les variables CSS fonctionnent sur le principe des propriétés personnalisées (custom properties) et doivent être précédées de deux tirets lors de leur déclaration. Comme ce sont en réalité des propriétés personnalisées, il faut les déclarer dans un bloc d'instruction. Pour cela, on utilise le bloc d'instruction de premier niveau, appelé :root { ... }. Enfin, on appelle et utilise les variables avec la méthode var() au sein des propriétés qui en ont besoin. L'exemple suivant résume tout cela...
:root {
--couleur-fond: #007db7;
--couleur-texte: #f1f1f1;
}
#entete {
color: var(--couleur-texte);
background-color: var(--couleur-fond);
padding: 1em;
}
#pieddepage {
color: var(--couleur-texte);
background-color: var(--couleur-fond);
padding: 1em 5em;
border-top: 1px solid #242424;
}
Hormis Internet Explorer (jusqu'au 11) et Opera Mini, les variables CSS sont utilisables sans problème. Il existe quelques polyfills pour améliorer la compatibilité des variables sur IE notamment, alors foncez ! ;-)
2. Les features queries (@supports)
En programmation classique, il faut des variables et des structures conditionnelles pour commencer à s'amuser un peu, et CSS l'a bien compris. C'est pour cette raison que les features queries (règle @supports { ... }) entrent en jeu. Il ne s'agit pas à proprement parler de if/else comme dans la programmation habituelle, mais le résultat en est presque identique malgré tout. En effet, @supports permet de détecter si une propriété ou une fonctionnalité existe et fonctionne dans le navigateur en cours d'utilisation. Ainsi, nous pouvons prévoir des comportements différents selon les cas, voire offrir des variantes d'intégration selon la compatibilité avec les propriétés. Si nous prenons l'exemple du display:flex; (flexbox), on pourrait s'assurer d'une mise en forme différente en cas d'incompatibilité, avec un display:inline-block; à la place ou une autre méthode.
Le fonctionnement est très simple, il faut indiquer la règle, le mot clé not ou non (cela permet de faire un "if "ou un "if not"), puis la condition à tester entre parenthèse, comme dans l'exemple suivant :
@supports (display: flex) {
#entete {
display: flex;
}
}
@supports not (display: flex) {
#entete {
display: inline-block;
}
}
Nous pouvons aussi cumuler des vérifications avec les mots clés and ou or. Ainsi, il est très simple de vérifier l'existence de plusieurs propriétés sur lesquelles nous avons des doutes, comme ceci :
@supports ((display:-webkit-flex) or (display:-moz-flex) or (display:flex)) and (-color:blue) {
#entete {
display:flex;
color:blue;
}
}
Sachez qu'il est également possible de tester une syntaxe de sélecteur avec selector() par exemple (fonctionne seulement avec Firefox pour le moment), afin de vérifier que le sélecteur peut fonctionner dans le navigateur. On peut aussi vérifier l'existence d'une variable CSS, etc. L'exemple par le code :
@supports selector(:is(a, b)) {
ul > li,
ol > li {
list-style: none;
}
}
@supports (--margeType: 1em) {
#contenus {
margin: var(--margeType);
}
}
Comme d'habitude, seul notre ami Internet Explorer est incompatible avec @supports en CSS, il faut donc passer par un polyfill pour s'offrir un support total...
3. Les grilles (CSS Grid)
Les positionnements flexibles avec Flexbox (display:flex; et display:inline-flex;) ont révolutionné le monde de la mise en forme/page tant cela était attendue depuis des années par les webdesigners. CSS ne s'arrête pas en si bon chemin et fait déjà fonctionner dans tous les navigateurs actuels (sauf IE...) les CSS Grid, à savoir les grilles CSS.
CSS Grid est un élément qu'il faut utiliser en complément des Flexbox, car son rôle est davantage de placer les éléments principaux que de faire les petits éléments de positionnement (là où Flexbox est idéal). Pour une structure de page web, on peut donc facilement créer la structure avec Grid CSS, et la modifier comme bon nous semble.
Mozilla fournit un exemple en ligne qui résume tout l'intérêt des grilles CSS. Je propose ici un exemple simple pour une structure de base en HTML :
Et voici le CSS correspondant :
.wrapper {
display:grid;
grid-template-columns:auto 5% 20%;
grid-template-rows:auto;
grid-template-areas:
"header header header"
"main . sidebar"
"footer footer footer";
}
#header {
grid-area:header;
background-color:#DBA723;
padding:1em;
}
#contenu {
grid-area:main;
background-color:#FFFFFF;
padding:1em;
}
#colonne {
grid-area:sidebar;
background-color:#E0E7EA;
padding:1em;
}
#footer {
grid-area:footer;
background-color:#5D5048;
padding:1em;
}
Et le rendu final de la structure :
4. Quelques nouvelles propriétés visuelles
CSS se dote d'une multitude de nouvelles propriétés qui vont offrir des effets visuels en tout genre. Il est impossible de toutes les notifier ici mais voici quelques propriétés sympa à retenir ou à étudier de près :
- shape-outside : permet de positionner du contenu proprement autour d'une forme géométrique choisie. Ainsi, lorsqu'une image est arrondie, nous pourrons avoir un texte en arrondi qui épouse la forme du cercle, ce qui n'était pas possible jusqu'à présent. La propriété shape-outside prend plusieurs valeurs de forme (circle, ellipse, inset pour les rectangles, polygon et url).
- overflow-anchor : permet de faire de l'ancrage du défilement (scroll anchoring), à savoir d'éviter qu'une page en cours de chargement vous décale le défilement au fur et à mesure que les images se chargent (par exemple...). La propriété prend la valeur "auto" par défaut (donc décale brutalement si nécessaire) mais peut prendre "none" (position figée là où l'utilisateur le souhaite). C'est extrêmement intéressant si vous faites du lazy loading par exemple, bien que ce soit la propriété la moins compatible de la liste présentée ici...
- position "sticky" : permet de créer un effet "sticky" (souvent utilisé pour les menus qui suivent le défilement de la page) en CSS, avec la nouvelle valeur "sticky" à la propriété position. Cela fonctionne partout sauf sur IE (cela surprend encore quelqu'un ? ^^) et permet d'effectuer des sticky menus en toute simplicité, et sans Javascript ! :-)
- background-blend-mode : permet de superposer une couleur et un arrière-plan par exemple, afin que les deux éléments se "mélangent" naturellement.
- filtres CSS : permet d'offrir des effets visuels en toute simplicité, à l'instar des filtres Instagram. Les CSS Filters s'utilisent avec les propriétés historiques filter. Plusieurs effets ont été ajoutés comme saturate() pour la saturation des couleurs, grayscale() pour des effets de noir et blanc, blur() pour des effets de flou ou encore hue-rotate() pour changer la balance des couleurs. Seul IE est incompatible...
- object-fit : permet qu'une image remplisse le contenu d'un bloc par exemple, même si elle ne provient pas d'un background-image (dans ce cas on utilise plutôt background-size:cover;). Ainsi, nous pourrons aisément appliquer un effet de remplissage responsive à nos images insérées via l'HTML, avec des valeurs comme object-fit:cover (ou contain, fill, scale-down et none). IE ne connait pas la propriété et Edge ne fonctionne qu'avec des images (alors que tous les types de blocs sont supposés être compatibles).
Voilà pour ce tour d'horizon extrêmement rapide... ;-)
5. Le sélecteur parent en CSS
Quel intégrateur CSS n'a pas rêvé de pouvoir remonter jusqu'au parent dans un sélecteur CSS ? Jusqu'à présent, tout le principe du langage repose sur les sélecteurs descendants, allant donc des parents vers les enfants. Mais parfois, il serait absolument nécessaire de pouvoir faire le cheminement inverse, et CSS semble avoir enfin répondu à ce besoin...
En réalité, il ne s'agit pas vraiment d'un sélecteur parent, mais d'une méthode qui permet d'indiquer un parent contenant un enfant en particulier. Dans les précédentes spécifications CSS (notamment celle de 2011), le signe "$" puis "!" était utilisé pour indiquer le "sujet" du sélecteur, c'est-à-dire l'élément qui allait appliquer le style déterminé. Depuis la spécification de 2013, CSS utilise la pseudo-class :has() pour indiquer un parent contenant un enfant en particulier, comme ceci :
/* Style appliqué à ul, et non aux li... */
ul:has(li) {
list-style:none;
}
Pour le moment, :has() est incompatible quasiment partout, mais je vous conseille de suivre de près cette fonctionnalité avancée...
CSS Scale
la suite...
Et voici le code :
<style type="text/css">#demo {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}</style>
Pour d'autres formes, c'est ici > https://bennettfeely.com/clippy/
CSS gradients
la suite...
Ceci est une démonstation de coloration de fond en dégradé avec le code suivant:
<style type="text/css">
#demo {
background: #44acab;
background-image: linear-
gradient(90deg, #6e40aa, #6154c8, #4c6edb, #368ce1, #24aad8, #1ac7c2, #1ddea3, #30ee83, #52f667, #7ef658, #7ef658);
}
</style>
Vous pouvez trouver d'autres colorations ici > https://bennettfeely.com/scales/
Tous les paramètres de la grille en CSS
la suite...
Guide complet sur la grille CSS, se concentrant sur tous les paramètres à la fois pour le conteneur parent de la grille et les éléments enfants de la grille. > ici
Effacer le fond de vos images en ligne
la suite...
Vous pouvez effacer le fond de vos images en ligne > ici
Liste des articles
- Parchance.fr : un créateur de documents d'activité en ligne
- Que faire contre le moustique
- Quel répulsif contre les moustiques
- Comment créer un modèle enfant Joomla 4
- Cours Java
- Apprendre la conjugaison
- MariaDB / MySQL - Changer le mot de passe root
- Code HTML de base pour les débutants
- Activer Windows7 gratuitement
- Rechercher une image sur le Web
- Soumettre son site à Google, Bing, Aol, Entireweb
- Taille des arbres
- Comment échanger des variables entre PHP et JavaScript ?
- Validation du balisage des documents Web
- 10 animations CSS sympas à ajouter à votre site
- Formation HTML5
- Optimiser la description d'une page Web
- Changer le texte d'un élément HTML avec le CSS ou Javascript
- 30 exemples CSS
- 5 nouveautés CSS
- CSS Scale
- CSS gradients
- Tous les paramètres de la grille en CSS
- Effacer le fond de vos images en ligne
- Vérifiez si votre e-mail ou votre téléphone fait l'objet d'une violation de données
- Vérification de la sécurité de votre site Web et recherche de logiciels malveillants
- Vérifiez le référencement de votre site Web
- 10 astuces et propriétés CSS
- Ajouter une lettrine en CSS
- Guide vi
- Comment compter tous les éléments d'un tableau en php
- Personnaliser Widget Météo pour votre site Web
- Font-awesome, des icones gratuits pour votre site
- Astuces CSS - Ombres de texte
- Calendrier des paiements pour l'année 2024
- Fenêtres modales
Mettre le texte ici
Mettre le texte ici
Mettre le texte ici
Mettre le texte ici
Mettre le texte ici
