Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Carte de voeux en Full CSS3, sans Flash

Utiliser les animations pour souhaiter la nouvelle année.

Création: décembre 2010Modifié:

A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A

Bonne Année 2011

Rejouer l'animation

Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Safari Chrome
Partagez
Facebook Twitter

Votez

94 votes4.4

Utilisation des animations CSS3 pour réaliser une belle carte de vœux.

Plusieurs animations sont utiles ici. Aucune image n’est utilisée. Les flocons sont crées à l’aide de @font-face.

Pour chaque flocon, le positionnement est effectué avec position:absolute et la propriété left, à l’extérieur de la carte de voeux. Ensuite 3 animations se chargent de faire varier margin-left, rotation et margin-top, afin de faire "tomber" les flocons. Le temps de chaque animation est différent pour chaque flocon.

Pour plus d’infos, voir le code source.

L’animation marche avec le moteur Webkit, soit Safari et Chrome.

Votez pour la démo si elle vous plaît.

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Anas, le 20 mars 2011

Merci beaucoup pour ces informations brèves, explicites et précises.

#2par Dimi, le 21 octobre 2011

Cool !
Est-ce dû à mon navigateur (Chrome) que ça saccade autant ?

#3par Daphné, le 1er décembre 2011

Super le tutoriel ! je l’ai essayé et ça marche sur chrome ! le seul hic, c’est l’affichage des flocons ! chez moi je vois à l’écran A A A. comment faire le @font-face pour afficher des flocons ?merci :)

#4par css3create, le 2 décembre 2011

@Daphné : Je ne sais pas pourquoi ça ne fonctionne pas mais effectivement c’est pas terrible. Le mieux serait de gérer une image de flocon plutôt qu’une lettre de police symbole. J’ai voulu jouer la carte du "fait 100% sans images"...

#5par Daphné, le 2 décembre 2011

Super ! merci pour la réponse. Allez go pour une image de flocon :D
Joyeuses fêtes et bonne continuation sur le site ...

#6par Anonyme, le 20 janvier 2013

j’adore ce site. tuto très explicite !


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)