Visualisation Article
30 exemples CSS
Comment empêcher le redimensionnement d’un textarea en CSS
textarea {
resize: none;
}
Comment écrire des commentaires en HTML
<!-- 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
<!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
<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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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>
Publié le mercredi 22 novembre 2023 par Philippe SCHMITT