Les autocollants (ou ruban) sont les images qui sont placés en haut à droite ou à gauche en haut, et ont généralement une bande de forme angulaire. Il existe différents types, à partir de simples images statiques pour les animations Flash les plus spectaculaires. Parfois, ils sont construits de telle manière à rester dans leur position, même lorsque nous défiler le contenu de la fenêtre du navigateur.
Si vous ne voulez pas compter sur des services tels que QuickRibbon.com , mais que vous voulez construire un ruban autour de vous, voici 3 étapes simples à suivre.
1. Nous créons l'image
Tout d'abord, nous créons l'image que nous voulons placer dans un droite ou à gauche. L'image ci-dessous, de 163 × 163 pixels, ecostruita au coin supérieur gauche.
Pour rendre l'effet complet de chevauchement doit choisir, lorsque vous enregistrez, un format qui supporte la transparence, comme le GIF ou PNG.
2. Le code HTML
contenitore, che useremo puoi per posizionare l'immagine nell'angolo: Saved notre image, nous pouvons le mettre dans nos pages, les balises en enveloppant le img avec un div conteneur, nous allons vous utilisez pour positionner l'image dans le coin:
1 |
Si notre autocollant doit avoir un lien, nous pouvons nous prévaloir de l'étiquette map pour définir une zone sensible qui n'est pas rectangulaire. Les autocollants figurant dans cet échantillon, en fait, ont une forme oblique et la transparence met en évidence les contours parfaitement. Il serait donc inapproprié pouvez cliquer sur une zone vide en ajoutant simplement une étiquette a circuler autour de l'image. Ensuite, nous utilisons la syntaxe suivante:
1 2 |
definisce le coordinate del nostro ribbon. Les attributs coords de la balise area définit les coordonnées de notre ruban.
3. Le code CSS
Ajoutons des définitions de style qui permettront à nos autocollants pour aller sur la page correctement:
1 2 3 4 5 6 7 8 9 10 11 | {Div.ribbon absolute ; position: absolute; 0px ; left : 0px ; top: 0px; gauche: 0px; 163px ; width : 163px ; hauteur: 163px; largeur: 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 ; marge: 0; padding: 0; margin: 0; none } background-image: none} |
in fixed : Si nous voulons que le ruban de rester «coincé» à la vidéo, même si nous défiler vers le bas de la fenêtre, il suffit de changer l' absolute de style position en fixed :
1 2 3 4 5 6 7 8 | {Div.ribbon fixed ; position: fixed; 0px ; left : 0px ; top: 0px; gauche: 0px; 163px ; width : 163px ; hauteur: 163px; largeur: 163px; 0 ; padding : 0 ; margin: 0; padding: 0; visible ; overflow: visible; none ; float: none; 10000 } z-index: 10000} |
, fino a poco tempo fa non era supportato da tutti i browser. Remarque: le type
fixed, dans le styleposition, jusqu'à une date récente, n'a pas été appuyée par tous les navigateurs. Pour rendre l'effet, en fait, il a été obligé d'utiliser une fonction javascript qui, à intervalles réguliers, il contrôlait le glissement possible du contenu de la fenêtre et riposizionava le ruban de manière à ce que donnerait l'impression de rester sensiblement immobile. Heureusement, aujourd'hui, en dehors de quelques ancienne version d'Internet Explorer, tous les navigateurs prennent en charge le typefixed.
[...] Comment I Did It: Comment faire pour créer une vignette-ruban en 3 étapes affichées dans les graphiques connexes Message: Création de l'interface d'un système d'exploitation avec jQuery [...]
[...] Vous souhaitez faire un ruban avec les graphiques personnalisés que vous pouvez faire cela en utilisant divs et css. Dans ce post, excellent Undolog sera expliqué étape par étape comment faire. Si vous utilisez un format d'image. Png [...]