Wie ich es gemacht: Wie erstelle ich einen Aufkleber-Band in 3 Schritten
Dienstag, 2. Dezember 2008 Der Aufkleber (oder Band) sind jene Bilder, die in der oberen rechten oder linken oberen positioniert sind, und sie bilden gemeinsam einen abgewinkelten Faszie. Es gibt verschiedene Arten, von der einfachen statischen Bildern zu den schönsten Flash-Filme. Manchmal sind sie so konzipiert, dass in ihrer Position bleiben, auch wenn Sie den Inhalt des Browser-Fensters zu blättern.
Wenn Sie nicht möchten, nicht auf Dienstleistungen wie QuickRibbon.com verlassen, sondern wollen ein Band um Sie zu bauen, hier ist nur 3 einfachen Schritten zu folgen.
1. Wir schaffen das Bild
Erstens schaffen wir das Bild, das wollen wir in einer der rechts oder links Platz. Das Bild unten, von 163x163 Pixel, ecostruita der linken oberen Ecke.
Damit der Effekt des Zusammentreffens Länge müssen sich entscheiden, wenn Sie, speichern Sie ein Format, das Transparenz unterstützt, wie GIF oder PNG.
2. HTML
Gespeichert unser Image können wir in unseren Seiten einfügen, die Umhüllung mit dem Tag img in ein div mit dem Sie das Bild in der Ecke Position verwenden werden:
- "ribbon" ><img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" >< / div> <div "ribbon" Klasse => <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0"> </ div>
Wenn unsere Aufkleber einen Link zu haben, können wir mit dem Tag map verwenden, um ein Hot Spot, die nicht rechteckig ist zu definieren. Der Aufkleber in diesem Beispiel in der Tat haben eine schräge Form und Transparenz unterstreicht perfekt den Konturen. Es wäre daher unangemessen, klicken Sie auf einen leeren Bereich, indem einfach ein Tag, a zentrale Achse des Bildes ermöglichen. Dann benutzen wir diese Syntax:
- "ribbon" ><img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink" >< / div> <div "ribbon" Klasse => <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" Namen => Form = <area "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com"> </ map>
Das Attribut coords der area definiert die Koordinaten unserer Band.
3. CSS
Fügen Sie nun die Definitionen der Stilrichtungen, mit denen unsere Aufkleber auf der Seite korrekt positioniert werden:
- div.ribbon (
- absolute ; position: absolute;
- 0px ; left : 0px ; top: 0px; left: 0px;
- 163px ; width : 163px ; height: 163px; height: 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)
Wenn wir wollen, dass die Band bleiben "stecken", um das Video zu sehen, auch wenn Scrollen, nur die absolute Stil position im Wandel fixed
- div.ribbon (
- fixed ; position: fixed;
- 0px ; left : 0px ; top: 0px; left: 0px;
- 163px ; width : 163px ; height: 163px; height: 163px;
- 0 ; padding : 0 ; margin: 0; padding: 0;
- visible ; overflow: visible;
- none ; float: none;
- 10000 } z-index: 10000)
Hinweis: Der Typ im Stil
positionbis vor kurzem nicht von allen Browsern unterstützt wurde. Um den Effekt zu machen, in der Tat, war gezwungen, eine JavaScript-Funktion, dass in regelmäßigen Abständen kontrolliert den Fluss der Inhalte keine Fenster und ersetzen das Band in einer Weise, dass der Eindruck eines im Wesentlichen unbeweglich gaben zu verwenden. Zum Glück, heute, mit etwas veraltete Version des Internet Explorer, unterstützen alle Browser die Artfixed
Verwandte Post
Loading ... 
[...] How I Did It: Wie Sie einen Aufkleber-Band in 3 Schritten gebucht unter Graphics Verwandte Post: Erstellen Sie die Benutzeroberfläche des Betriebssystems mit jQuery [...]
[...] Möchten Sie ein Band mit dem eigene Grafiken können Sie dies mit div und css machen. In diesem ausgezeichneten Beitrag am Undolog erläutert Schritt für Schritt, wie Sie es tun. Wenn Sie ein Bild-Format. Png mit [...]