A PHP Error was encountered

Severity: Notice

Message: Only variable references should be returned by reference

Filename: core/Common.php

Line Number: 257

Suricate.net : Expériences CSS sur les labels

Suricate.net, un lab et de la veille

Expériences CSS sur les labels

Expériences CSS sur les labels

 

See the Pen experiences on label by saajuck (@saajuck) on CodePen.

L’idée de départ est de déclencher des transitions sur des boutons.

Cela peut se faire simplement avec un peu de JS et en différenciant un état cliqué, ou au repos.

 

Pour se passer du JS, l’idée est donc d’utiliser des checkbox associées à un label : La checkbox en display : none va permettre de distinguer ces 2 états, cliquée ou non et le label va faire office de bouton grâce à l’attribut « for ».

La difficulté va résider sur les sélecteurs CSS et le DOM qui va être imposé selon les limitations du CSS. 

 

input[type="checkbox"]:checked + label[for="html"]

 

Le sélecteur “+” va permettre de cibler le frère direct d’un élément. Ici, il va permettre de cibler le label avec for= "html", quand la check box est cochée.

http://www.alsacreations.com/article/lire/1312-selectionner-les-freres-d-un-element-en-css-nth-child.html

Par contre, le label doit être placé après la check box.

 

Je suis libre ensuite de mettre en place une animation sur le label avec :before et :after.

Des petites subtilités m’ont imposé l’ajout d’un span dans le label, notamment pour l’exemple du bouton « js » et le z-index.

 

Quelque chose que je trouve intéressant : avoir la possibilité d’être totalement libre sur les animations des boutons permet d’être plus clair sur le sens que l’on souhaite donner à cette action.

Exemple avec le « html/css2 » ou l’intention de barré, retirer, supprimer cet item est clairement exprimée, alors qu’initialement, nous avions cochée une case.

De même que pour le « Js2 » : L’intention exprimée via l’attribut CSS « content » sur :after, permet là aussi d’indiquer textuellement ce que va faire cette action.

 

Je me suis un peu amusé avec les labels, mais le bouton « js » est justement un contre-exemple, ou la conséquence du clic et l’état du bouton (cliqué ou non) n’est pas claire. Tel quel, sans l’animation, on ne peut pas savoir s’il est coché.

Cependant. Comme il s’agit d’expérience et de test, la particularité de ce label réside sur le background en rgba.

https://developer.mozilla.org/fr/docs/Web/CSS/color_value#rgba()

 

background: rgba(171, 255, 110, 0.35);

 

Je voulais voir ce que pouvait donner la superposition de 2 backgrounds, avec de la transparence. (Alpha = 0.35)

Je pense y revenir un peu plus tard. Il y a surement moyen de faire quelque chose de sexy avec cette méthode.