Générateur de rubans en ligne

Publié le 3 avril 2009 - Outils Webmasters, Webdesign. Tags : ,

Personnellement, j’aime bien le côté sobre et moderne des sites (example) affichant une sorte ruban à l’un de leurs coins supérieur. Bien que la façon de les réaliser ne soit pas difficile, il est toujours pratique de gagner un peu de temps via des outils dédiés.

Voici donc Quick Ribbon, un générateur en ligne gratuit de ruban pour vos sites internet! Définissez simplement votre texte à afficher (ainsi que son lien) et personnalisez votre ruban selon 4 types formes différentes (postal, droit, arrondi, droit), 8 police de caractères, avec la possibilité de définir jusqu’à 3 couleurs distinctes. Pour mettre à jour l’aperçu de la création en cours cliquez simplement sur le bouton « apply », et lorsque votre œuvre est terminée validez-la utilisant l’option « Generate Ribbon ». Tout étant stocké sur le site vous n’aurez qu’à insérer le code javascript donné à l’issu du processus.

Et pour ceux (comme moi) qui voudraient stocker l’image sur leur propre serveur voici la procédure :
1- Lors de la mise à jour de l’image (via le bouton « apply »), cette dernière s’affiche dans le coin supérieur droit du site. Faites un clic droit, « enregistrer l’image sous », puis renommez-là en « nom_image.gif »

2- Une fois l’image chargée sur votre serveur, insérez-là dans votre site de cette façon:

1
<div id="ribbon"><votre_image></div>

3- Ajoutez-le code suivant dans votre feuille de style CSS :

1
2
3
4
5
#ribbon {
position:absolute;
right:0;
top:0;
}

Et voilà, c’est fait !


Articles sur ce thème :