HTML-CSS/12_transition.css at master · sarafkaier/HTML-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
body{
  font-family: sans-serif;
  font-size: 1.5em;
}

ul{/*selectionne toutes les listes <ul>*/
  list-style: none;/*supression des puces des listes*/
  float: left;/*effet flottant à gauche*/
  margin: 0;/*marges exterieures*/
  padding: 0;/*marges intérieures*/
  background: linear-gradient(to left, #D5E02A, #f6fea1);
}

.left, .right{
  margin-top: 5em;
  background-color:
}

.left ul{
  margin: 3.2em 0 0 0;
  }
  .left ul li{/*tous les <li> de la liste <ul> ayant la class .left*/
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    padding: 1em;
    width: 10em;
    }
    .left ul li:first-child{/*premier <li> de la liste <ul> ayant la class .left*/
      border-top: 1px solid #ccc;
    }
ul.liste li{/*tous les <li> de liste <ul> ayant la class .liste*/
    border-left: 1px solid #ccc;
  }
/*fin 1ère colonne*/

ul.liste li{/*tous les <li> de liste <ul> ayant la class .liste*/
  border-left: 1px solid #ccc;
}

.right .change ul li{/*topus les <li> de la liste <ul> ayant la class .change elle-même enfant de la class .right*/
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 1em;
  width: 10em;
  text-align: center;
}
  .right .change ul li:first-child{/*premier <li> de la liste <ul> ayant la class .change; elle-même enfant d'une class .right*/
    background-color: #707471;
    color: #fff;
    font-weight: bold;/*style de la police : gras*/
  }

  .right .change ul li:last-child{/*dernier <li> de la liste <ul> ayant la class .change, elle-même enfant d'une class .right*/
    border-bottom: 1px solid #ccc;
  }

  /*.effet de transition au survol de la souris*/
  .right .change ul:hover{/*au survol de la souris (pseudo-class :hover) on selectionne de la liste <ul> ayant la class .change, elle-même enfant de la class .right*/
    background: linear-gradient(to left, #9696B4, #6E70C5);/*dégradés de couleur*/
    transform: scale(1.4);/*echelle de zoom*/
    transition-duration: 2s;/*durée de l'effet de transition*/
  }

  .right .change ul:hover li:first-child{/*au survol de la souris on sélectionne le premier <li> de la liste <ul> ayant la class .change, elle-même enfant de la class .right*/
    background-color: #000;
  }