Discussion :

[NoSmoking]

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.

oui oui, c'est du pur CSS !

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 .

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

[Doksuri]

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/#

[Dave Hiock]

\ô/
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

[Doksuri]

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

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

[Dave Hiock]

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

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

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

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

[NoSmoking]

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 :

How I Made This Realistic Red Switch (Pure CSS)