La puissance du CSS3

**n0wis** · 19/10/2012, 19h41

Chalut chalut !

Je suis en train de travailler sur un projet personnel qui consiste à essayer de faire un site totalement animé, UNIQUEMENT en HTML et CSS !

Pour le moment, j'ai bidouillé quelque petites choses qui me mettent sur de bonnes pistes. Mais je suis confronté à un premier soucis :

http://pixelsnowis.fr/html5_css3/

En vous rendant sur la page, vous constaterez qu'au moment du clic sur l'image la plus à droite, elle pivote, entraînant avec elle l'image de gauche.
Cependant, j'aimerais que l'effet s'applique lorsque je clic, puis qu'elle reste en place tant qu'un autre clic n'a pas été fait.

J'ai fait des recherches, mais je n'ai réussi à obtenir le résultat attendu

Faut il utilise ::after ? Onclick ? Ou autre ? Comment ?

**Muchos** · 20/10/2012, 02h24

Il faudra utiliser un langage dynamique. Donc, voir du côté d'OnClick certainement.
EDIT 2012-10-20: FAUX! C'est possible avec les pseudo-classes :focus ou :target (voir posts suivants).

Pour info, ::after est un pseudo élément placé juste après la balise à laquelle il est rattachée. C'est un "après" spatial, pas temporel

**n0wis** · 20/10/2012, 10h50

Mmmh ... Mais comment lier Onclick à du CSS ?

**NoSmoking** · 20/10/2012, 11h30

Bonjour,
il te faut modifier quelque peu la structure de ton document en remplaçant la balise DIV par une balise A

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<a href="#" id="conteneur">
    <div id="text_test_1">
        <img src="img_test_1.jpg">
    </div>
    <div id="text_test_2">
        <img src="img_test_2.jpg">
    </div>
</a>

il te faut modifier également le CSS en lui ajoutant un display:block, pour un problème d’apparence et pour finir tu ajoutes :focus sur la transformation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#conteneur {
    display: block;
    height: 600px;
    position: relative;
    transition: all 0.5s ease 0s;
    width: 600px;
    z-index: 1;
}
#conteneur:active, #conteneur:focus {
    transform: rotate(-90deg);
}

**n0wis** · 20/10/2012, 12h02

J'avais essayé de faire cela, mais je ne sais pourquoi ça ne fonctionnait pas

J'explore actuellement la piste des input de type checkbox avec l’élément :checked. Ça a l'air assez pratique, mais un peu complexe

**NoSmoking** · 20/10/2012, 12h40

pour rester CSS3 tu as également la possibilité d'utiliser la pseudo-class :target, la structure devient

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="conteneur">
  <a href="#conteneur">
  <div id="text_test_1">
    <img src="img_test_1.jpg">
  </div>
  <div id="text_test_2">
    <img src="img_test_2.jpg">
  </div>
  </a>
</div>

avec

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#conteneur:target {
  transform: rotate(-90deg);
}

**n0wis** · 20/10/2012, 13h06

Merci pour l'info, ça me fait pas mal de piste à explorer.

**n0wis** · 20/10/2012, 15h41

Le :target est vraiment pas mal, et facile à utiliser. Mais le soucis c'est qu'au moment du clic, ça scroll aussi tôt (le but de l'ancre

). Or je souhaite une page sans scroll.

Il y a-t-il moyen d'utiliser une ancre et le :target, sans l'action de l'ancre ?
PS : Avec un hoverflow: hidden, ça scroll toujours.

EDIT: Je pense avoir résolut ce soucis en plaçant correctement les éléments avec margin

J'ai essayé d'utiliser les Checkbox qui ont un avantage : premier clic = effet, second clic = annulation de l'effet.

Hors, je n'arrive pas à effectuer une rotation sur un Checkbox et son label. Même avec une animation et des keyframes ...
Une solution ?

**NoSmoking** · 22/10/2012, 18h55

Le principe est que l'on encapsule l'élément sur lequel doit ce faire l'animation dans le LABEL et l'on se sert de l'état du CHECKBOX pour la gestion

exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS3 rotation]</title>
<meta name="Author" content="NoSmoking">
<style>
#check:checked + #on_check > img {
  -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
#on_check > img {
  cursor: pointer;
  -webkit-transition: all 1s;
     -moz-transition: all 1s;
       -o-transition: all 1s;
      -ms-transition: all 1s;
          transition: all 1s;
}
#check{
  display:none;
}
</style>
</head>
<body>
<div id="page">
  <input type="checkbox" id="check" name="check">
  <label for="check" id="on_check">
    <img src="http://www.developpez.net/template/images/logo.png">
  </label>
</div>
</body>
</html>

**n0wis** · 22/10/2012, 19h42

Merci, ça fonctionne ! Je faisais mal mon codage CSS.

**n0wis** · 23/10/2012, 22h03

J'ai de nouveau un soucis pour cibler un élément "frère"

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="page">
	<input type="checkbox" id="check_msg_home" name="check_msg_home" />
		<label for="check_msg_home" id="lable_msg_home">
			<img src="titre_pixels_nowis.jpg" />
  		</label>
 
    <img src="clic_me.jpg" id="clic_me" />
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
#check_msg_home
	{
		display: none;
	}
 
#lable_msg_home > img 
	{
		cursor: pointer;
 
		position: absolute;
		top: 250px;
		left: 475px;
 
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		-ms-transition: all 1s;
		transition: all 1s;
	}
 
#check_msg_home:checked + #lable_msg_home > img 
	{
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
 
 
 
		-webkit-transform: scale(10,10);
		top: -1000px;
 
	}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
#clic_me
	{
		position: absolute;
		top: 0px;
		left: 820px;
 
		display: block;
		border: none;
 
		-ms-animation: bounce 1.0s ease infinite;
		-webkit-animation: bounce 1.0s ease infinite;
		-o-animation: bounce 1.0s ease infinite;
		-moz-animation: bounce 1.0s ease infinite;
		animation: bounce 1.0s ease infinite;
 
		-webkit-transform: scale(1,1);
	}
 
@-webkit-keyframes bounce
{
    from {top: 200px;}
    50%  {top: 210px;}
    to   {top: 200px;}
}
@-ms-keyframes bounce
{
    from {top: 200px;}
    50%  {top: 210px;}
    to   {top: 200px;}
}
@-o-keyframes bounce
{
    from {top: 200px;}
    50%  {top: 210px;}
    to   {top: 200px;}
}
@-moz-keyframes bounce
{
    from {top: 200px;}
    50%  {top: 210px;}
    to   {top: 200px;}
}
@keyframes bounce
{
    from {top: 200px;}
    50%  {top: 210px;}
    to   {top: 200px;}
}
 
#check_msg_home:checked + #clic_me
	{
		display: none;
	}

Quel serait le problème ?

**Muchos** · 23/10/2012, 23h07

Explique-toi

**n0wis** · 23/10/2012, 23h11

Envoyé par Muchos

Explique-toi

Et bin ça ne fonctionne pas. Pourtant j'ai pas l'impression de m'être trompé

**Muchos** · 23/10/2012, 23h13

Mais qu'est-ce qui ne fonctionne pas ?! Qu'est-ce que tu attends comme comportement ? ><

**n0wis** · 24/10/2012, 14h02

Je souhaiterais que, lorsque #check_msg_home est checked, #clic_me disparaisse, d'où le display: none;

Hors, cela ne fonctionne pas. Et je ne vois pas du tout où j'ai pu me tromper

**Muchos** · 24/10/2012, 14h14

C'est peut-être dû au fait que la requête a + b désigne les éléments b immédiatement précédés d'un élément a ; ce qui n'est pas le cas de #check_msg_home et #clic_me.

**NoSmoking** · 24/10/2012, 18h56

tu te trompes dans ton raisonnement
A l'intérieur du LABEL il te faut l'élément en liaison avec ta CHECKBOX, l'élément à animer pouvant être à l'extérieur.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="page">
  <input type="checkbox" id="check_msg_home" name="check_msg_home" />
  <label for="check_msg_home" id="lable_msg_home">
    <img src="clic_me.jpg" id="clic_me" />    
  </label>
  <img id="mon_animation" src="titre_pixels_nowis.jpg" />
</div>

pour faire disparaître ton bouton il te suffira de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#check_msg_home:checked + #lable_msg_home > img {
  display:none;
}

et pour l'animation il te faut écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
/* #check_msg_home:checked + #lable_msg_home > img /* REMPLACE */
#check_msg_home:checked ~ #mon_animation {
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
  transform:rotate(0deg);
  -webkit-transform:scale(10,10);
  top: -1000px;
}

et bien sûr modifier le référencement du départ

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/* #lable_msg_home > img /* REMPLACE */
#mon_animation {
  cursor:pointer;
  position:absolute;
  top:250px;
  left:475px;
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  -ms-transition:all 1s;
  transition: all 1s;
}

**n0wis** · 24/10/2012, 20h55

Non NoSmoking, l'image que je souhaite faire disparaitre n'est pas dans la balise <label>, mais à coté. J'ai donc fait comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#check_msg_home:checked ~ #clic_me
	{
		left: 1500px;
	}

De plus, Diplay n'est pas pris en compte pas "transition: all 0.5s;"

**NoSmoking** · 25/10/2012, 19h08

1000 excuses je me suis laissé abusé par l'image clic_me que l'on ne doit pas cliquer

Il faut considérer que display est on/off, donc difficile de faire de la transition avec cela. Essaies plutôt du coté de l'opacity qui elle permet de faire de la variation.

**n0wis** · 25/10/2012, 20h11

Ah oui, je n'avais pas pensé à l'opacité. Je vais essayer

EDIT: L'opacity fonctionne bien. Visible ici : http://www.pixelsnowis.fr

Par contre, j'ai de nouveau un soucis de ciblage. Pourtant je fait comme pour le #clic_me

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="checkbox" id="check_msg_home" name="check_msg_home" />
		<label for="check_msg_home" id="label_msg_home">
			<img src="titre_pixels_nowis.jpg" />
  		</label>
 
    <img src="clic_me.jpg" id="clic_me" />
 
 
 
    <input type="checkbox" name="check_blog" id="check_blog"/>
        <label for="check_blog" id="label_blog">
            BLOG
        </label>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#check_blog:checked ~ #label_msg_home > img
	{
		left: 0px;
	}

J'ai un peu tout essayer. Là je ne vois vraiment pas ce qui ne va pas

La puissance du CSS3

CSS

Discussions similaires

Partager

Partager