Code CSS
Page mise à jour le 06-01-2026 à 23:21
<!-- animations CSS -->
<style>
/* slide vertical */
#drop {
animation-duration: 2s;
animation-name: slidein;
margin-top: 70%;
}
@keyframes slidein {
from { margin-top: -150px; }
to { margin-top: 70%; }
}
/* fondu */
#fondu {
animation-duration: 5s;
animation-name: fadein;
opacity: 0.8;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 0.8; }
}
</style>
<!-- animation cube 3d CSS -->
<style>
@keyframes rotationX {
from { transform: rotateX(30deg); }
to { transform: rotateX(390deg); }
}
@keyframes rotationY {
from { transform: rotateY(10deg); }
to { transform: rotateY(370deg); }
}
@keyframes rotationZ {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(360deg); }
}
.face {
position: absolute;
width: 200px;
height: 200px;
border: solid 2px #555;
border-radius: 6px;
}
.front { transform: translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px) }
.rear { transform: rotateY(-180deg) translateZ(100px) }
#cube-a, #cube-b, #cube-c, #cube-d {
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
#cube-a { perspective: 800px; }
#cube-b { animation: rotationX 8s ease infinite; }
#cube-c { animation: rotationY 10s ease infinite; }
#cube-d { animation: rotationZ 6s ease infinite; }
#cube-box {
position: absolute;
top: 35%;
left: 25%;
padding: 0px 0px;
border: none;
background: none;
}
</style>
<html>
<div id="cube-box">
<div id="cube-a">
<div id="cube-b">
<div id="cube-c">
<div id="cube-d">
<img class="face front" src="images/image-face.jpg">
<img class="face top" src="images/image-face.jpg">
<img class="face left" src="images/image-face.jpg">
<img class="face right" src="images/image-face.jpg">
<img class="face bottom" src="images/image-face.jpg">
<img class="face rear" src="images/image-face.jpg">
</div>
</div>
</div>
</div>
</div>
</html>
<!-- objets custom CSS -->
<style>
/* boutons custom */
.button-custom {
background-color: #DDD;
border: 1px solid #555;
color: #000;
border-radius: 3px;
padding: 0px 4px;
font-family: verdana;
font-size: 12px;
font-weight: normal;
cursor: pointer;
width: 50px;
height: 24px;
cursor: default;
transition: all ease-in 0.2s;
}
.button-custom:hover {
background-color: #888;
border: 1px solid #555;
color: #FFF;
transition: all ease-in 0.2s;
}
/* radios custom */
input[type="radio"].radio_custom {
display: none;
}
input[type="radio"].radio_custom + label {
background-color: #DDD;
border: 1px solid #555;
border-radius: 5px;
padding: 3px 6px;
transition: all 0.1s ease-in-out;
font-family: verdana;
font-size: 11px;
font-weight: normal;
color: #000;
cursor: pointer;
}
input[type="radio"].radio_custom:hover + label {
background-color: #DDD;
color: #000;
cursor: pointer;
}
input[type="radio"].radio_custom:checked + label {
background-color: 333;
color: #FFF;
cursor: default;
}
input[type="radio"].radio_custom:disabled + label {
background-color: #DDD;
color: #888;
cursor: default;
}
/* checkbox custom */
input[type="checkbox"].checkbox_custom {
display: none;
}
input[type="checkbox"].checkbox_custom + label {
background-color: #DDD;
border: 1px solid #555;
border-radius: 5px;
padding: 4px 4px;
transition: all 0.2s ease-in-out;
font-family: verdana;
font-size: 12px;
font-weight: normal;
color: #000;
cursor: pointer;
}
input[type="checkbox"].checkbox_custom:hover + label {
background-color: #DDD;
color: #000;
cursor: pointer;
}
input[type="checkbox"].checkbox_custom:checked + label {
background-color: 333;
color: #FFF;
cursor: default;
}
input[type="checkbox"].checkbox_custom:disabled + label {
background-color: #DDD;
color: #888;
cursor: default;
}
/* info bulles */
.bulle {
position: relative;
cursor: default;
text-align: center;
}
.bulle:hover:after,
.bulle:focus:after {
content: attr(barre-label);
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
background: #FFF;
border: 2px solid #888;
border-radius: 6px;
padding: 10px 10px;
font-family: verdana;
font-size: 15px;
font-weight: normal;
color: #000;
white-space: nowrap;
}
</style>
<!-- formes CSS -->
<style>
/* transformation */
.transform {
transform: scale(1.5);
transform: translateX(-50%);
transform: rotate(45deg);
}
/* chevrons */
.chevron::before {
border-style: solid;
border-width: 0.15em 0.15em 0 0;
content: '';
display: inline-block;
height: 0.40em;
width: 0.40em;
position: relative;
vertical-align: middle;
}
.chevron.top:before {
top: 1px;
left: 6px;
transform: rotate(-45deg);
}
.chevron.bottom:before {
top: -2px;
left: 6px;
transform: rotate(135deg);
}
.chevron.left:before {
top: -1px;
left: -1px;
transform: rotate(-135deg);
}
.chevron.right:before {
top: -1px;
left: 1px;
transform: rotate(45deg);
}
</style>
<!-- modèles CSS -->
<style>
/* global */
:root {
/* appel par var(--constant) */
--constant: 1000;
}
* {
/* désactive la surbrillance des bordures */
outline-style: none;
}
html {
/* ralentit le scrolling */
scroll-behavior: smooth;
/* force l'ascenseur vertical */
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
/* désactive la sélection d'élements */
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* liens et textes */
a, a:hover, a:visited {
color: blue;
font-family: verdana;
font-weight: bold;
font-size: 14px;
font-style: none;
text-decoration: none;
cursor: pointer;
}
.text {
color: #000;
text-align:center;
font-family: verdana;
font-weight: normal;
font-size: 14px;
font-style: none;
text-decoration: none;
}
.blink-text {
animation: blinker 1.2s step-start infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}
/* conteneurs et tableaux */
.contener {
position: absolute;
display: block;
display: inline-block;
display: flex;
display: table-cell;
background-color: #FFF;
border: 1px solid #888;
border-radius: 5px;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
width: 100px;
height: 100px;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.table {
background-color: #FFF;
border: 1px solid #888;
border-radius: 5px;
border-collapse: collapse;
padding: 10px 10px;
}
.table td {
display: table-cell;
background-color: #FFF;
border: 1px solid #888;
border-radius: 5px;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
.table thead {
position: sticky;
top: 100px;
z-index: 1;
background-color: #FFF;
border: 2px solid #888;
}
.table th {
white-space: nowrap;
height: 20px;
padding: 4px 4px;
color: #000;
text-align: center;
}
</style>
