Contenu principal

Intégration

Interrupteur CSS3 avec 3D transform

Firefox 10.0.1, tout fraichement sorti, amène le support des 3D transform. Supportées par Webkit depuis un bon moment maintenant, il est donc temps de s’y intéresser.
Voici une petite expérimentation CSS3 partant d’une simple case à cocher et de son label.

CSS3 animation on click

CSS3 animation on click without JS

Today I share with you a little trick to trigger a CSS3 animation on click without javascript, with only pure CSS.
For this snippet, I’ll use a download link that will trigger an animated down arrow on click.

Formulaire dynamique CSS3 - V2

Expérimentation : Formulaire dynamique en CSS3 V2

Voici la suite de ma précédente expérimentation CSS sur un formulaire animé. Pour le coup, je me suis « Bon, elle est bien rigolote cette petite enveloppe, mais ça serait mieux si je pouvais y mettre carrément le formulaire dedans… ».

Expérimentation : Formulaire dynamique en CSS3

Une simple expérimentation CSS, sans tutoriel. J’ai ajouté à ce formulaire de contact une petite enveloppe animée à côté du bouton « Envoyer ». Celle-ci se ferme, s’incline et se déplace, laissant apparaitre les messages d’information concernant l’état d’envoi de l’email.

iOS checkbox

Personnaliser les checkbox en CSS façon iOS

Voici une astuce très intéressante pour personnaliser les checkbox, et ce, en pur CSS. Nous allons même pousser la personnalisation jusqu’à imiter les interrupteurs « 1/0 » des iBidules avec du CSS 3. Au programme : pseudo-éléments :before et :after, dégradés, multiples backgrounds et ombres.

Flouter une image en CSS

Flouter une image en CSS

Peut-on flouter une image en CSS? Pas à ma connaissance, pas avec seulement du CSS, mais on va tricher et avoir un effet similaire.
Tout ce dont nous avons besoin c’est une image (bien sûr) et son conteneur, le CSS s’occupera du reste.

Icône Cloud en CSS

Une icône Cloud en CSS

Depuis quelques temps, on parle de plus en plus du « Cloud », à tel point que petit à petit, les nuages fleurissent partout sur le web. Et bien pourquoi ne pas rentrer dans la mouvance et créer notre petit nuage personnel en CSS? Bien sûr en CSS3, sans tenir compte de Celui-Dont-On-Ne-Doit-Pas-Prononcer-Le-Nom.

CSS Cooltips

Des tooltips animés en CSS

Aujourd’hui nous allons créer des tooltips en CSS.
Au programme, réaliser des triangles en CSS2, des coins arrondis en CSS3, des ombres en CSS2 et 3, des fonds dégradés en CSS3, des transitions CSS3 et l’utilisation des pseudo-éléments « :before » et « :after ».