IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

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


Sujet :

CSS

  1. #1
    Membre éclairé
    Avatar de s0h3ck
    Inscrit en
    Mars 2013
    Messages
    181
    Détails du profil
    Informations forums :
    Inscription : Mars 2013
    Messages : 181
    Points : 871
    Points
    871
    Par défaut Créer une icône de téléchargement animée en CSS
    Bonjour,

    Je vous présente un nouvel article traduit de Paul Underwood intitulé :


    Citation Envoyé par Synopsis
    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.
    N'oubliez pas de marquer votre sujet comme et de mettre des aux messages apportant un plus à votre discussion.

    « Ce qui se conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément » Boileau.
    « Le mystère fait découvrir une autre dimension » mon imagination.





  2. #2
    Membre éclairé
    Avatar de s0h3ck
    Inscrit en
    Mars 2013
    Messages
    181
    Détails du profil
    Informations forums :
    Inscription : Mars 2013
    Messages : 181
    Points : 871
    Points
    871
    Par défaut
    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) :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
     span { box-sizing: border-box; }
    (2) Modification légère du code source, c'est-à-dire :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 à
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    N'oubliez pas de marquer votre sujet comme et de mettre des aux messages apportant un plus à votre discussion.

    « Ce qui se conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément » Boileau.
    « Le mystère fait découvrir une autre dimension » mon imagination.





Discussions similaires

  1. Réponses: 13
    Dernier message: 06/02/2009, 11h10
  2. Créer une image bouton, image animée convertie en clip impossible a rendre clickable
    Par JB_Lenoir dans le forum ActionScript 1 & ActionScript 2
    Réponses: 0
    Dernier message: 15/04/2008, 12h30
  3. Peut-on créer une icône pour un programme Pascal ?
    Par snake888 dans le forum Pascal
    Réponses: 5
    Dernier message: 16/01/2007, 18h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo