La puissance du CSS3

Version imprimable

19/10/2012, 19h41
n0wis

La puissance du CSS3

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 ! :mouarf:

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 :calim2:

Faut il utilise ::after ? Onclick ? Ou autre ? Comment ?
20/10/2012, 02h24
Muchos

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 ;)
20/10/2012, 10h50
n0wis

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

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

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:

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); }

20/10/2012, 12h02
n0wis

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 :aie:

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

Code:

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:

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

20/10/2012, 13h06
n0wis

Merci pour l'info, ça me fait pas mal de piste à explorer. :ccool:
20/10/2012, 15h41
n0wis

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 :lol:). 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 ?

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:

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>

22/10/2012, 19h42
n0wis

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

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

Voici le code :

Code:

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:

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 ?

23/10/2012, 23h07
Muchos

Explique-toi :roll:
23/10/2012, 23h11
n0wis

Citation:

Envoyé par Muchos

Explique-toi :roll:

Et bin ça ne fonctionne pas. Pourtant j'ai pas l'impression de m'être trompé 8O
23/10/2012, 23h13
Muchos

Mais qu'est-ce qui ne fonctionne pas ?! Qu'est-ce que tu attends comme comportement ? ><
24/10/2012, 14h02
n0wis

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 :(
24/10/2012, 14h14
Muchos

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.

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:

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:

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

et pour l'animation il te faut écrire

Code:

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:

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;
}

24/10/2012, 20h55
n0wis
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:

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;" :(
25/10/2012, 19h08
NoSmoking

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

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.

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 :calim2:
Code:

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:

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 :(