49 lines
1.5 KiB
CSS
49 lines
1.5 KiB
CSS
/* Ici on peut attitrer des valeurs à des variables */
|
|
/* on peut utiliser ces variables plusieures fois dans le CSS */
|
|
/* Ici on va assigner cette variable à tous les éléments */
|
|
/* normalement on utilise plutôt :root */
|
|
* {
|
|
--element_width: 200px !important;
|
|
}
|
|
#mousehover_movemargin_element {
|
|
width: var(--element_width);
|
|
height: 200px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
display: block;
|
|
background: red;
|
|
color: #FFF;
|
|
}
|
|
#mousehover_movemargin:hover #mousehover_movemargin_element {
|
|
background:yellow;
|
|
color: #000;
|
|
|
|
/*
|
|
calc permet de calculer
|
|
(adition +, soustraction -, multiplication *, ....
|
|
Ici on veut que la marge à gauche soit de :
|
|
100%
|
|
-130px
|
|
-70px ( == 200px )
|
|
( la largeur "width" de #mousehover_movemargin_element )
|
|
*/
|
|
margin-left: calc(100% - 130px - 70px);
|
|
/* On peut faire plus simple en utiisant la variable */
|
|
/* Ainsi, si on la modifie, dans * ...
|
|
... la largeur de #mousehover_movemargin_element
|
|
... ainsi que la marge-left ici...
|
|
..... vont être affectées
|
|
Si je veux changer la lageure+margin-left ici
|
|
... je n'ai plus qu'à changer --element_width dans * !!!
|
|
*/
|
|
margin-left: calc(100% - var(--element_width)); /* 100% - 200px */
|
|
|
|
|
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
|
|
/* all pour affecter toutes les propriétés CSS */
|
|
/* transition: all 1s; */
|
|
transition:
|
|
margin-left 5s ease-in-out 0s,
|
|
color 2s ease-in-out 0s;
|
|
cursor: pointer;
|
|
} |