How I Did It: Comment faire pour créer un ruban autocollant en 3 étapes
Mardi, Décembre 2, 2008 La vignette (ou ruban) sont les images qui sont positionnés en haut à droite ou à gauche en haut, et ils forment souvent une fascia angle. Il existe différents types, à partir de simples images statiques pour les animations Flash les plus spectaculaires. Parfois, ils sont construits de façon à rester dans leur position même lorsque vous faites défiler le contenu de la fenêtre du navigateur.
Si vous ne voulez pas compter sur des services comme QuickRibbon.com, mais qui veulent construire un ruban autour de vous, voici 3 étapes simples à suivre.
1. Nous créons l'image
Tout d'abord nous créer l'image que nous voulons placer dans une de la droite ou la gauche. Le tableau ci-dessous, de 163x163 pixels, ecostruita l'angle supérieur gauche.
Pour rendre l'effet de voies qui se chevauchent doivent choisir, lorsque vous enregistrez, un format qui supporte la transparence, comme le GIF ou PNG.
2. HTML
Sauvé notre image, nous pouvons insérer dans nos pages, enveloppe le tag img dans un conteneur div que vous allez utiliser pour positionner l'image dans le coin:
- "ribbon" ><img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" >< / div> <div "ribbon" classe => <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0"> </ div>
Si notre autocollant doit avoir un lien, on peut utiliser la map tag pour définir un point chaud qui n'est pas rectangulaire. La vignette dans cet exemple, en fait, ont une forme inclinée et la transparence met parfaitement en valeur les contours. Il serait donc inapproprié pour vous permettre de cliquer sur une zone vide en ajoutant simplement une étiquette a l'axe central de l'image. Ensuite, nous utilisons la syntaxe suivante:
- "ribbon" ><img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink" >< / div> <div "ribbon" classe => <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap "#ribbonlink"> = </ div>
- "ribbonlink" ><area shape = "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com" >< / map> <map "ribbonlink" nom => shape = <area "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com"> </ map>
Le coords attribut de la area tag définit les coordonnées de nos rubans.
3. la CSS
Maintenant, ajoutez les définitions des styles qui vont permettre à nos autocollants placés sur la page correctement:
- div.ribbon (
- absolute ; position: absolute;
- 0px ; left : 0px ; top: 0px; left: 0px;
- 163px ; width : 163px ; height: 163px; width: 163px;
- 0 ; padding : 0 ; margin: 0; padding: 0;
- visible ; overflow: visible;
- none ; float: none;
- 10000 } z-index: 10000)
- div.ribbonimg (
- 0 ; padding : 0 ; margin : 0 ; border: 0; padding: 0; padding: 0;
- none } background-image: none)
Si nous voulons que le ruban de rester «collés» à la vidéo, même si le défilement, changez simplement la position de style absolute en fixed
- div.ribbon (
- fixed ; position: fixed;
- 0px ; left : 0px ; top: 0px; left: 0px;
- 163px ; width : 163px ; height: 163px; width: 163px;
- 0 ; padding : 0 ; margin: 0; padding: 0;
- visible ; overflow: visible;
- none ; float: none;
- 10000 } z-index: 10000)
Note: Le type
fixeddans lapositiondepositionjusqu'à récemment, n'était pas appuyée par tous les navigateurs. Pour rendre l'effet, en effet, a été contraint d'utiliser une fonction JavaScript qui, à intervalles réguliers, contrôler le flot de contenu d'une fenêtre quelconque et remplacer le ruban d'une façon qui donne l'impression d'être essentiellement immobile. Heureusement, aujourd'hui, avec quelques ancienne version d'Explorer, tous les navigateurs supportent le typefixed
Related Post
Chargement ... 
[...] Comment j'ai fait: Comment faire pour créer un ruban autocollant en 3 étapes Posté sous les graphiques connexes du message: Créer l'interface d'un système d'exploitation avec jQuery [...]
[...] Voudrais faire un ruban avec les graphiques personnalisés, vous pouvez le faire en utilisant div et css. Dans cet excellent post sur Undolog sera expliquée étape par étape, comment le faire. Si vous utilisez un format d'image. Png avec [...]