<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
FF10 zeigt das obere Band etwa 1 Pixel über dem Wrapper an, aber ich kann nicht herausfinden, warum... Es scheint, als ob das Hinzufügen von
bottom: -2px;zur.ribbon-green:beforeDeklaration es größtenteils richtig aussehen lässt, aber ich kann es nicht genau sagen..Ich auch. Gehen Sie zur Referenz-URL. Sie werden es sehen.
Viel flexibler als die Verwendung eines statischen Bildes. Super praktisch für ein so häufig verwendetes Designelement. Sehr cool!
Sehr schöner Ansatz. Ich verabscheue es, Bilder für solche Dinge verwenden zu müssen. Hoffentlich eliminiert MS bald alles vor IE9, damit wir solche Dinge effektiver nutzen können.
Sehr schöner Ansatz. Danke.
@jordan
Ich habe auch die Pixel-Überlappung – in IE9, Chrome 17 & FF 11.
Um die obere Pixel-Überlappung zu entfernen – hier ist, was für mich funktioniert hat
.ribbon-wrapper-green
Ändern Sie top: -3px; auf top: -5px;
Pixel weg!!
Das sieht in IE sehr schlecht aus. Es sieht nicht aus wie ein Band. Es ist ein Quadrat und es verschiebt meine gesamte Seite (Navigationsmenü, Feature-Box usw.) etwa dreiviertel der Seite nach unten. Sieht in FF und Chrome aber gut aus.
Das ist sehr nett, danke!
Danke, es ist erstaunlich
Sieht in allen neueren Webkit-Browsern und IE 9 sehr gut aus. Alle anderen IE-Versionen unterstützen dieses Skript nicht. =( IE ist so schlimm -.-
Das ist wirklich schön. Ich werde es bald benutzen, wen kümmert das über die IE-Benutzer :-)
Das ist ein cooler Effekt und alles ohne Bilder ist dein Freund!
Ach, wen kümmert IE schon? M$ sollte einfach leiden, weil es denkt, es sei die einzige Entität im ganzen Universum, wenn es das nicht ist!
Eines im Beispiel, das schön wäre, ist, wenn die Mathematik enthalten gewesen wäre. Ich kann damit herumspielen und die richtigen Einstellungen mit Firebug erhalten, aber ich würde viel lieber einen Taschenrechner herausholen und die genauen Werte ermitteln!
Bitte? b^.^d
wunderschön, das war, was ich brauchte :)
Wie kann ich das Band zu einem aktiven Link machen?
Der einfachste Weg, das zu tun, wäre einfach, ein `` Tag zum Band hinzuzufügen. So:
`NEWS`
Entschuldigung dafür. Hier ansehen.
danke.. es ist sehr einfach zu implementieren :)
Habe dies heute in einem E-Commerce-Shop-Projekt implementiert. Je nach Bandklasse ändern sich die Farben: RENTAL, ON SALE, NEW, etc. Nochmals vielen Dank, Chris!
Hallo,
Wie passe ich es an jeder Ecke an? Ich habe versucht, das CSS zu ändern, um das Band in der oberen linken Ecke zu platzieren, aber ohne Erfolg :-(
Irgendwelche Ideen? ?
Danke für dieses schöne CSS.
Fab
@Fab: Hast du das herausgefunden? Wenn ja, teile bitte deinen Code. Ich würde auch gerne wissen, wie man es in die obere linke Ecke platziert.
Irgendein Glück?
.ribbon-wrapper-green
ändern Sie rechts in links.
.ribbon-green
fügen Sie float: right hinzu;
ändern Sie links in rechts
ändern Sie die Drehung zu -45 Grad
Das hat funktioniert, danke!
Danke dafür, Chris.. Sehr geschätzt..
WOW!! Das ist absolut schön.. Danke
Wie macht man es größer?
Wie macht man das Band in der oberen linken Ecke?
wo muss ich den html in wordpress einfügen?*neu in wordpress
Sie können das CSS in Ihrem WordPress-Adminbereich unter Darstellung -> Editor hinzufügen und dann den HTML-Code direkt in Ihre Seite oder Ihren Beitrag über die HTML-Registerkarte im WYSIWYG-Editor einfügen.
Ich suchte nach einer sauberen Methode, um so etwas ohne Bilder zu machen und das als Grundlage für das, was ich brauche, gut funktioniert, also danke!
Ich verwende den Stil wie folgt, um ihn links auszurichten
Ich habe eine kleinere rote Verkaufsversion gemacht, die linksbündig ist. Viel Spaß :)
.ribbon-wrapper-red { width: 100px; height: 100px; overflow: hidden; position: absolute; top: -6px; left: -6px; } .ribbon-red { font-size: 13px; color: white; text-align: center; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); position: relative; padding: 2px 0; left: -21px; top: 8px; width: 82px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#cc0000)); background-image: -webkit-linear-gradient(top, #990000, #cc0000); background-image: -moz-linear-gradient(top, #990000, #cc0000); background-image: -ms-linear-gradient(top, #990000, #cc0000); background-image: -o-linear-gradient(top, #990000, #cc0000); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-red:before, .ribbon-red:after { content: ""; border-top: 3px solid #900; border-left: 3px solid transparent; border-right: 3px solid transparent; position: absolute; bottom: -3px; } .ribbon-red:before { left: 0; } .ribbon-red:after { right: 0; }Das ist wahnsinnig. Ich weiß, wie man Pseudoklassen, Farbverläufe, Deckkraft, Schatten... verwendet und dachte, ich kenne CSS3.
Wenn ich jetzt Ihren Code sehe, weiß ich, dass ich nichts weiß.
Danke fürs Teilen!!!
Vielen Dank für Ihr Code-Stück! Es hat mir sehr geholfen! Ich habe angefangen, ein Band mit einem Bild zu erstellen, aber als ich Ihren Code sah und ihn ausprobierte, änderte ich meine Meinung!
Nochmal vielen Dank!
Großartige Arbeit!
Für mehr Glättung von Elementen in Webkit-basierten Browsern fügen Sie dies hinzu
Großartiger Artikel. Du bist gut.
Das ist genau das, was ich gesucht habe!! Es hat für mich funktioniert! Danke!!!!
Version unten links
Gibt es WordPress-Plugins, die das erzeugen? Ich suche nach einer Möglichkeit, das in eine Blogseite einzufügen, wo das Band nur auf der Seite mit den Beitragsauszügen angezeigt wird, wo ein Shortcode beim Erstellen des Beitrags hinzugefügt werden kann, der das Band und den Text generiert. Wenn jemand davon weiß, bitte lassen Sie es mich wissen.
Funktioniert nicht in IE 8
:(
Der einzige Grund, IE 8 zu verwenden, ist, um den neuesten Firefox herunterzuladen
Das Band verdeckt den darunter liegenden Inhalt – gibt es eine Lösung dafür? Außerdem wäre es schön, wenn der Code etwas aufgeräumter wäre (nur 1 div zur Anzeige des Bandes anstelle von 2).
Hat jemand einen Link zu einem Beispiel, wo dies verwendet wird?
Danke
Funktionierte einwandfrei in Rapidweaver 6
Vielen Dank! Funktioniert großartig!
Hat Zeit und viel Energie gespart.
@Rafael, @Andrea D
Damit dies unter **IE** funktioniert, müssen Sie auch das
-ms-Präfix einfügenAlles, was ich sehe, ist ein gleichschenkliges Trapez, das um 45 Grad gedreht ist.
Das sind 10 Minuten Arbeit mit
http://www.thebequertools.com/
Danke.
Das Band verschwindet, sobald ich den Browser auf eine kleinere Größe skaliere :( Ich habe das Band in eine Div gesetzt. Weiß jemand, wie man das behebt?
Danke, das hat mir sehr geholfen!
Wie füge ich die Postebene (Kategorie) als Eckband zu jedem Post auf der Homepage von Blogger hinzu?
Es ist wirklich cool. Danke, es hat mir sehr geholfen.
Toller Code. Welchen Teil muss ich ändern, um die Bänder dünner zu machen? Ich habe versucht, hier und da einiges zu ändern, aber nichts scheint mir ein dünneres Band zu verschaffen. Danke.
suchen Sie nach 'padding' und reduzieren Sie den Wert
z.B.
padding: 16px 0;
ändern Sie zu padding: 8px 0;
Wow, wie konnte ich das verpassen?
Vielen Dank :)
Vielen Dank. Es hat mir viel geholfen.
Hallo Chris, ich muss Slider-Bilder auf der statischen Webseite anzeigen. Bitte gib mir einen CSS-Code dafür..
Ich bin Anfänger
Ich liebe das, du bist der Beste!
Ich versuche schon seit einiger Zeit, dies **weiter herauszubringen** und somit das Band *länger* zu machen. Irgendwelche Gedanken? Ich möchte das wirklich nutzen! Danke!