[Coup de cœur CSS] Realistic Red Switch

Realistic Red Switch (Pure CSS).

Bonjour,

Véritable coup de cœur CSS, je me croyais légèrement blasé et pourtant (!!!!) je continue de m'ébahir devant ce que certains sont capables de faire et devant autant d'esprit créatif.

Je ne résiste pas au plaisir de vous partager ce petit « joyau » de réalisme que l'on doit à Yoav Kadosh.

Ci-dessous une « capture montage » pour vous mettre l'eau à la bouche.

Pièce jointe 593542

oui oui, c'est du pur CSS !

:fleche: A voir sur CodePen : https://codepen.io/ykadosh/pen/ExNOmZx

J'espère que vous apprécierez autant que moi.

Dommage que le HTML ne soit pas valide, mais en mettant des <span> à la place des <div> et en mettant à ceux-ci un display: block le soucis est réglé, ...
... bon là je sais je pinaille :fessee:.

:fleche: N'hésitez pas, vous aussi, à partager vos coups de cœur CSS.

c'est juste magnifique ! merci pour le partage ....

puisqu'on en est aux coup de coeur.... voici le mien (pas aussi "joli") nostalgic-css.github.io/NES.css/#

\ô/
Le Realistic Red Switch est effectivement tout simplement bluffant de réalisme.

J'ai par contre l'impression que le NES.css va être difficile à placer sur un site :mrgreen:

Citation:

---

Envoyé par Dave Hiock

J'ai par contre l'impression que le NES.css va être difficile à placer sur un site :mrgreen:

---

parce que tu crois que le Realistic Red Switch va l'etre ? ;)
c'est pour la beaute, pas forcement pour l'inte ^^

Aucun sarcasme dans mes dires, juste une pointe d'humour !

Citation:

---

tu crois que le Realistic Red Switch va l'etre ?

---

je l'ai adopté pour une Interface web-domotique.

Citation:

---

c'est pour la beaute, pas forcement pour l'inte ^^

---

je suis bien d'accord avec toi sur ce point car quand on regarde de plus prêt le travail réalisé reste bluffant, je parle aussi de NES.css bien sûr ;).

On notera que de toutes façons ils font ça pour le fun et pour notre plus grand plaisir, il n'est qu'à regarder les comments.

PS : j'avais trouvé ces vis, design également très réaliste.
https://codepen.io/dschoni/pen/LYNJVoe

Yoav Kadosh à produit un tutoriel concernant le « comment j'ai fait cela ».

Donc si vous voulez tout savoir sur sa démarche et les méthodes utilisées, presque toutes pour résumer, vous pouvez aller consulter :

:fleche: How I Made This Realistic Red Switch (Pure CSS)

Quand on lit l article ça a pas l air si compliqué :aie:

Et non c'est pas réaliste, car lorsque le bouton est éteint on ne devrait pas pouvoir le rallumer en cliquant en bas dans la zone 0 et inversement lorsqu'il est allumé.

Bon c'était juste pour trouver une remarque à faire, sinon concernant le graphisme, l'illumination et le basculement du bouton, le réalisme est effectivement étonnant. Du grand art dans la maîtrise de css, des mouvements et des dégradés de couleurs dynamiques. J'étais loin d'imaginer qu'on puisse faire quelque chose d'aussi abouti en css. Visuellement c'est parfait. Mais faut que je passe à un autre sujet, sinon je ne vais plus pouvoir m'arrêter de cliquer sur ce foutu bouton tellement c'est bluffant.

Citation:

---

Et non c'est pas réaliste, car lorsque le bouton est éteint on ne devrait pas pouvoir le rallumer en cliquant en bas dans la zone 0 et inversement lorsqu'il est allumé

---

blague à part c'est souvent un soucis que l'on rencontre avec les bouton ON-OFF.

Ceci-ci dit c'est un point qui à été soulevé dans les commentaires faits dans son tuto, la solution est même fournie et classique en utilisant des masques, mais c'est vrai que c'est du pur pinaillage :mrgreen:.