Die Aufkleber (oder Band) sind jene Bilder, die in die obere rechte bzw. linke obere platziert sind, und haben häufig eine Form Winkelbereich. Es gibt verschiedene Arten, von einfachen statischen Bildern zu den spektakulärsten Flash-Filme. Manchmal sind sie so in Position zu bleiben, auch wenn blättern im Browser-Fenster gebaut.
Wenn Sie nicht möchten, dass auf Dienstleistungen wie verlassen QuickRibbon.com , aber Sie wollen ein Band um dich herum zu bauen, hier sind 3 einfache Schritte zu befolgen.
1. Wir schaffen das Bild
Zunächst erstellen wir das Bild, das wollen wir in einem der rechts oder links Platz. Das Bild unten, von 163 × 163 Pixel, ecostruita der linken oberen Ecke.
Um den gewünschten Effekt überlagern müssen sich entscheiden, wenn Sie zu retten, ein Format, das Transparenz unterstützt, wie GIF oder PNG.
2. HTML-Code
contenitore, che useremo puoi per posizionare l'immagine nell'angolo: Gespeichert unser Bild können wir es in unsere Seiten setzen, tags durch Umwickeln der img in einem div -Container, mit dem Sie das Bild, um die Position werde:
1 |
Wenn unsere Aufkleber einen Link haben müssen, können wir nutzen tags map zu einem sensiblen Bereich, der nicht rechteckig ist zu definieren. Die Aufkleber in diesem Beispiel gezeigt, in der Tat, eine schräge Form und Transparenz hebt die Konturen perfekt. Es wäre daher unangebracht können einen leeren Bereich, indem Sie einfach ein Tag klicken a um das Bild herum fließen. Dann benutzen wir die folgende Syntax:
1 2 |
definisce le coordinate del nostro ribbon. Das Attribut coords der tag area definiert die Koordinaten unserer Bänder.
3. CSS
Lassen Sie uns die Definitionen der Stile, mit denen unsere Aufkleber auf der Seite richtig positioniert wird hinzufügen:
1 2 3 4 5 6 7 8 9 10 11 | {Div.ribbon absolute ; position: absolute; 0px ; left : 0px ; top: 0px; links: 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; margin: 0; none } background-image: none} |
in fixed : Wenn wir wollen, dass die Band zu bleiben "stecken", um das Video, auch wenn wir das Fenster runter scrollen, ändern Sie einfach die absolute Stil position in fixed :
1 2 3 4 5 6 7 8 | {Div.ribbon fixed ; position: fixed; 0px ; left : 0px ; top: 0px; links: 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} |
, fino a poco tempo fa non era supportato da tutti i browser. Hinweis: der Typ
fixed, die im Stilposition, bis vor kurzem war nicht von allen Browsern unterstützt. Damit der Effekt in der Tat, wurde gezwungen, eine Javascript-Funktion, die in regelmäßigen Abständen, den Fluss von allen Inhalten aller Fenster kontrolliert und ersetzen das Band, so dass es den Eindruck gab, bleiben im wesentlichen unbeweglich verwenden. Glücklicherweise heute, abgesehen von einigen veralteten Version von Internet Explorer, unterstützen alle Browser die Artfixed.
[...] Wie ich es gemacht: Wie ein Aufkleber-Band in 3 Stufen unter Graphics Verwandte Beitrag erstellen: Erstellen der Schnittstelle von einem Betriebssystem mit jQuery [...]
[...] Sie möchten ein Band mit dem benutzerdefinierten Grafiken, die Sie dies tun können mit divs und css machen. In diesem ausgezeichneten Beitrag am Undolog werden Schritt für Schritt erklärt, wie es geht. Wenn Sie ein Bild-Format. Png [...]