Chargement…
Stickers Autocollants En CSS

Des Stickers Autocollants En CSS3



Créer et faire des Stickers autocollants en CSS est très facile. Je vous montre dans ce web design tutoriel comment créer des Stickers et des notes Autocollants avec du pure CSS3. Pour avoir les effets des Stickers on utilise Webkit qui est à ce jour supporter par tous les navigateurs comme google chrome, Opera et Mozilla Firefox.

Stickers Autocollants En CSS 3

Créations de Stickers Autocollants En CSS

Pour créer des Stickers sous forme de Block Notes inclinés comme a cette exemple de notre tutoriel, en dois passer par 5 étapes.
1- La création des éléments HTML :
Normalement avec un code simple on va obtenir des carreaux jaune comme dans l’étape 1 de ce tutoriel. Oui je sais c’est moche :) même si cela marche sur tous les navigateurs, IE6 inclue. Mais comme on va utiliser HTML5 cela devient plus intéressant.

2- Ajouter les effets sur les Stickers et choisir la Police :
Dans cette étape on va ajouter un effet Ombre (Shadow) sur les Carreaux, pour cela on utilise les paramètres de box-shadow :

Pour la police on a choisi une écriture a la main dis : Reenie Beanie vous pouvez choisir une autre Police, pour cela direction Google Fonts

google fonts

3- Faire un Zoom au Passage de la Souris sur les Stickers :
Pour faire un effet Zoom on utilise le paramètre transformation scale de CSS3.

Notez qu’on a utiliser aussi z-index pour être sûr que l’Autocollant plus large se positionne en-dessous des autres au passage de la sourie ou à la sélection d’un Sticker Block-Note.

Voila maintenant a vous de jouer! la source contient tous les éléments cités ci-dessus, si vous avez des questions n’hésitez pas!



Laisser un commentaire