Mise à jour de la base de données, veuillez patienter...

Aujourd'hui, je vous propose de réaliser un bouton Twitter animé en CSS3, similaire à celui présent en bas à gauche de ma page d'accueil.

On aura besoin pour cela:

• D'un éditeur de texte pour le code
• De télécharger la police Picowa, qu'on utilisera pour le logo.

On commence par écrire la structure en HTML; On utilisera un <div> contenant deux paragraphes:

<div id="twitter">
    <p class="logo">
        <a href="http://twitter.com/#!/pseudo" title="pseudo sur Twitter">
            <abbr title="Twitter">t</abbr>
        </a>
    </p>
    <p class="name">
        <a href="http://twitter.com/#!/pseudo" title="pseudo sur Twitter">@pseudo</a>
    </p>
</div>

La présence d'une balise <abbr> permet de rendre ce "t" plus compréhensible. J'utilise la balise <p> car je veux désigner deux (petits) blocs de texte, c'est donc la balise la plus appropriée. J'utilise les classes logo et name pour pouvoir adapter ce type de bouton à d'autres applications. Ainsi, il me suffira d'utiliser la même structure avec ces classes-là pour obtenir le même comportement.

En haut de notre feuille de style (ou tout au moins avant la stylisation de notre bouton), on importe la police Picowa avec @font-face, qui fonctionne de la façon suivante:

@font-face {
    font-family: "Le Nom que je veux utiliser";
    src: url('le chemin vers ma police/picowa.TTF');
}

Ici, on a donc:

@font-face {
    font-family: "Picowa";
    src: url('.../picowa.TTF');
}

On ajoute également une précision pour annuler un comportement de Firefox qui consiste à ajouter une bordure en pointillés en dessous des abréviations:

abbr[title] {border-bottom:none}

On donne une taille à notre bouton, qui sera de 40x40 pixels:

#twitter {
    height:40px;
    width:40px;
    overflow:visible;
    padding:0px;
    pdisplay:inline-block;
    margin:5px;
}

On normalise les liens, et on passe les paragraphes en position relative:

#twitter a,
#twitter a:visited {
    color:inherit;
    text-decoration:inherit;
}
#twitter > .logo a {
    cursor:inherit;
}
#twitter > p {
    position:relative;
}

On s'attaque au logo:

Il sera blanc sur fond bleu ciel, de taille 2em, centré, avec une bordure arrondie, et, surtout, en police Picowa:

#twitter > .logo {
    color:white;
    font-size:2em;
    font-family:"Picowa", verdana;
    background-color:#abcdef;
    padding:4px;
    margin:0px;
    height:100%;
    width:38px;
    text-align:center;
    vertical-align:middle;
    border-radius:6px;

J'utilise la police Verdana au cas où la propriété @font-face ne serait pas supportée. Je précise également un z-index de 2, de façon à pouvoir cacher mon nom derrière, qui sortira sur la droite lorsqu'on passera la souris sur le logo. Enfin, je souhaite que le curseur ne trahisse pas la présence du lien (qui n'est là que pour les interfaces tactiles), et de l'ombre portée:

    z-index:2;
    cursor:default;
    box-shadow:5px 5px 10px #bcdeff inset;
}

Par soucis de lisibilité, je n'écris pas les propriétés avec les préfixes de navigateur. Notre bouton a maintenant l'apparence suivante:

On s'attaque ensuite à l'affichage du pseudo: J'utilise la police Georgia, sur un fond jaune clair, en gras, avec le texte aligné à droite:

#twitter > .name {
    font-family: georgia, serif;
    background-color:#ffd;
    font-weight:bold;
    text-align:right;

Ici, je souhaite que, par défaut, mon pseudo reste caché, donc je précise un z-index à 1, et des dimensions adaptées. De plus, je souhaite qu'ici, le curseur montre bien la présence d'un lien:

    margin:0px 5px 0px 0px;
    padding:6px 5px 4px 4px;
    top:-42px;
    height:24px;
    left:15px;
    width:10px;
    overflow:hidden;
    z-index:1;
    cursor:pointer;

Enfin, j'ajoute des bordures arrondies et un dégradé gris sur les bords:

    border-top:2px solid lightgray;
    border-right:2px solid lightgray;
    border-bottom:2px solid lightgray;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    box-shadow:0px 0px 2px #aaa inset;
}

Visuellement, rien n'a changé puisque le second bloc est caché sous le premier. On va faire en sorte qu'on le voit lorsque l'on passe la souris dessus:

#twitter:hover > .name {
    width:88px;
    left:33px;
}

Ces deux valeurs sont à modifier en fonction de la longueur de votre pseudo. Maintenant, lorsque l'on passe la souris sur le logo, voici ce qu'on peut voir:

Afin de rendre notre bouton plus agréable, on va y ajouter des animations: lorsque l'on passera la souris sur le logo, celui-ci pivotera de 90° puis le pseudo sortira:

#twitter:hover > .logo {
    transform:rotate(-90deg);
}

Soyons précis: lorsque je passe la souris sur le logo, celui-ci pivote de 90° en 0.2 secondes, puis (soit 0.2 secondes après le passage de la souris) le pseudo sort en 0.2 secondes. Ensuite, lorsque je retire la souris, le pseudo se cache en 0.2 secondes, puis (soit 0.2 secondes après que j'eû retiré la souris) le logo retourne à sa position normale en 0.2 secondes. Ceci me permet de regrouper les propriétés CSS.

D'une part, les transitions immédiates:

#twitter:hover > .logo,
#twitter > .name {
    transition:all 0.2s ease-in-out;
}

De l'autre, celles avec un délai de 0.2 secondes:

#twitter > .logo,
#twitter:hover > .name {
    transition:all 0.2s 0.2s ease-in-out;
}

Voilà le résultat avec les préfixes de navigateurs:

N'hésitez pas à copiez tout ou une partie de la feuille de style, et à adapter cet exemple à vos goûts.