J'ajoute quelques commentaires. Nous avons pris la décision de respecter la conformité de l'article en ne modifiant rien. Toutefois, j'aimerais m'assurer que tout le monde ait un rendu très proche, voir similaire à la démo qu'on retrouve sur le site de Paul Underwood en lien avec cet article. Je crois sincèrement que c'est un bon article, mais il a besoin de quelques améliorations supplémentaires pour être apprécié par tous
(1) Si vous suivez le tutoriel attentivement, vous arriverez au résultat suivant : http://jsfiddle.net/Lgbm8jzt/
(2) En effectuant quelques modifications pour obtenir le résultat très proche de la démo, vous arriverez au résultat suivant : http://jsfiddle.net/w1yf047a/
C'est une version que j'ai légèrement modifiée en version française, c'est-à-dire d'un bouton "Télécharger" au lieu de "Download" avec le titre de l'article en anglais.
Les modifications que j'ai effectuées sont les suivantes :
(1) L'ajout de cette propriété (qui réajuste les bordures noires en dessus de la flèche) :
span { box-sizing: border-box; }
(2) Modification légère du code source, c'est-à-dire :
1 2 3 4 5
| <h1>CSS - Icône de téléchargement animée</h1>
<p style="text-align: center;">
<a href="#" class="download-icon">
<span></span>Télécharger</a>
</p> |
en comparaison à
1 2 3 4
| <a href="http://www.example.com/download-content.html" class="download-icon">
<span></span>
Download
</a> |
(3) Finalement, quelques détails supplémentaires pour un résultat ayant le "look" de la démo :
1 2 3 4 5 6
| body {
font-family: 'Ubuntu', sans-serif;
color:#444;
font-size:1.6em;
background:#ececec;
} |
Voilà, j'espère que ce sera pratique. Si vous avez des questions, je vous recommande d'utiliser le forum css à cet effet et pour des commentaires, n'hésitez pas à partagez
Partager