CSS - Icône de téléchargement animée

Créer une icône de téléchargement animée en CSS

Paul Underwood

Traducteur

Danick Côté-Martel

Voici une nouvelle astuce utilisée en CSS pour créer une icône de téléchargement animée. Dans ce tutoriel, vous mettrez en œuvre des techniques CSS plutôt simples dans lesquelles vos visiteurs pourront profiter d'une icône de téléchargement animée.

Vous pouvez réagir par rapport à ce tutoriel sur le forum : Commentez

- Titre : CSS - Icône de téléchargement animée

- Auteur : Paul Underwood

- Traducteur : Danick Côté-Martel

- Parution : 30 juillet 2014

- Mise à jour : 19 août 2014

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2014 Ashley Gullen. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Traduction

- II. Introduction

- III. Le code HTML

- IV. Modéliser l'icône de téléchargement

- V. L'animation de rebond

- VI. Conclusion

- VII. Liens

- VIII. Remerciements

I - Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Create a animated download icon in CSS.

II - Introduction

Lorsque vous faites un appel à une action sur une page Web, vous voulez normalement que les visiteurs se dirigent vers le bas pour s'inscrire à votre newsletter ou télécharger une partie de votre contenu. C'est l'appel à ces actions que vous devriez essayer de faire ressortir afin que les gens puissent se concentrer sur les endroits de votre site Internet.

Dans ce tutoriel, nous allons créer une icône de téléchargement CSS animée :

Visitez la page de démo pour voir l'animation :

Demo

III - Le code HTML

D'abord, nous commençons par créer le code HTML pour l'icône de téléchargement. Nous allons avoir besoin d'un lien, et à l'intérieur de cet espace, d'une zone pour l'icône de téléchargement.

<a href="http://www.example.com/download-content.html" class="download-icon">
<span></span>
Download
</a>

IV - Modéliser l'icône de téléchargement

Pour commencer, nous stylons le texte au bas de l'icône. Ce texte est utilisé pour expliquer ce que cet appel action sera.

a.download-icon
{
color: #333;
font-size: 1.3rem;
font-weight: bold;
text-decoration: none;
}

Ensuite, nous pouvons styliser l'icône en modifiant la balise « span » pour créer une boîte rectangulaire utilisant les propriétés « width » et « height », puis nous ajoutons une bordure à cet élément. En plaçant un « border-top » à transparent, cela va masquer la bordure supérieure de la vue, créant le style visuel de la boîte de téléchargement.

.download-icon span
{
display: block;
cursor: pointer;
position: relative;
width: 60px;
height: 30px;
margin: auto;
border: 10px solid #333;
border-top: transparent;
}

Pour créer la flèche sur l'icône de téléchargement, nous devons utiliser les sélecteurs CSS(1) pour créer un nouvel élément à l'aide de « :before » et « :after ». Ceux-ci devront être positionnés en absolu afin que nous puissions régler la position exacte de la flèche.

.download-icon span:before,
.download-icon span:after
{
content: '';
display: block;
position: absolute;
}

Sur l'événement survol de « download-icon », nous allons créer la flèche et ajouter une animation d'un effet de rebond. Utilisez la propriété « animation » pour définir l'animation de rebond, ajoutez la durée de l'animation souhaitée et définissez l'animation en boucle infinie.

Sur l'élément « before », nous allons créer la ligne de la flèche ; commencez par vous positionner sur l'icône et créez la ligne en utilisant les propriétés « width » et « height » suivies d'une couleur de fond.

Sur l'élément « after », nous pouvons alors créer un triangle en utilisant une astuce en CSS en créant une bordure et en réglant celle de gauche et de droite à « transparent ».

a.download-icon:hover span:before,
a.download-icon:hover span:after
{
animation: bounce .5s infinite alternate;
-webkit-animation: bounce .5s infinite alternate;
}

a.download-icon:hover span:before{
left: 15px;
top: -9px;
width: 10px;
height: 10px;
background: #333;
}
a.download-icon:hover span:after
{
left: 10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}

V - L'animation de rebond

Enfin, nous créons l'animation de rebond. Pour ce faire, nous avons juste besoin de changer la position de l'élément de quelques pixels. Pour cela, nous utilisons la propriété « transform » pour modifier la position « translateY » à -10px. Cela va déplacer l'élément de 10 pixels vers le haut ; à la fin de l'animation, nous devrons changer le positionnement à 0 pixel.

@keyframes bounce {
from {
transform: translateY(-10px);
}

to {
transform: translateY(0);
}
}

@-webkit-keyframes bounce {
from {
-webkit-transform: translateY(-10px);
}

to {
-webkit-transform: translateY(0);
}
}

Demo

VI - Conclusion

Nous avons vu, dans ce tutoriel, comment créer simplement une icône de téléchargement animée. N'hésitez pas à faire d'autres icônes animées et à les partager !

VII - Liens

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

N'hésitez pas à consulter nos autres tutoriels CSS pour améliorer le visuel de vos sites !

VIII - Remerciements

Cet article a été originellement publié par Paul Underwood sur le site officiel de Paulund.

Merci à FirePrawn pour sa relecture lors de la traduction et à milkoseck pour sa relecture orthographique. Merci aussi à jacques_jean pour ses propositions orthographiques supplémentaires.

(1)Note du traducteur : vous pouvez également faire une recherche sur Internet dans le document de W3C, par exemple.