.stitched {
padding: 20px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}
sieht ziemlich toll aus!!
Das ist ein toller Trick!
Der „Schlüssel“ zu diesem Look ist nur die Zeile „border: 2px dashed #fff;“, falls sich jemand gefragt hat, was dort oben passiert…
Na klar, aber wie kam der Rand INS Element oder wie kam der Hintergrund daraus?
Ich sehe hier kein background-origin…
Das ist der box-shadow.
Der einfachste Weg ist, outline mit outline-offset zu verwenden. So können Sie border für etwas Nützliches verwenden
@Boxon Outline hat keine border-radius, deshalb der box-shadow.
super! Ich dachte, es gäbe noch einen anderen richtigen Trick lol.
Das funktioniert nicht in Firefox oder Chrome. Ich habe den gleichen Code verwendet. Jede Hilfe wäre willkommen!
Sieht toll aus! Ich finde, es sieht mit diesem Zusatz noch besser aus. :-)
border-bottom-left-radius: 3px 3px;
das ist wirklich gut
Tolles Schnipsel
aber es funktioniert nicht in IE 7 und 8,
irgendeine Lösung bitte?
IE7 und IE8 unterstützen kein CSS3, das dies verwendet.
Verwenden Sie CSS3 PIE: http://css3pie.com/
Danke für die Informationen, Leute
Sieht toll aus! Danke
Ich hätte ein viel einfacheres Beispiel verwendet, um den genähten Look zu demonstrieren
Der Trick, damit die Hintergrundfarbe über den Rand hinausgeht, ist der Spread-Radius von box-shadow (das 4. Element, das ich hier auf 8px gesetzt habe).
Aber nicht alle Versionen von BRW arbeiten damit :)
ich wünschte, diese Beiträge hätten visuelle Beispiele :/
Probieren Sie es als visuelles Beispiel aus.
border
Wenn Ihr Element keine abgerundeten Ecken hat und Sie keinen IE6/7-Support benötigen, können Sie dies mit einem gestrichelten Rand und der outline-Eigenschaft anstelle eines box-shadow tun. Syntaxmäßig ist es etwas einfacher, aber es hat ungefähr den gleichen Effekt.
Aber wenn Sie abgerundete Ecken verwenden, können Sie outline nicht verwenden, da es seltsam aussieht. ;)
Für Browserkompatibilität können Sie diesen langen Code in diesen umwandeln
.stitched{
border:2px dashed #fff;
background: #ff0030;
box-shadow: 0 0 0 8px #ff0030;
}
Das ist der Hauptschlüssel, für einige Stile... es liegt ganz bei Ihnen..
webkit funktioniert nicht in explorer... verbietet IE... hehehe
So nett~ danke
http://codepen.io/A-Bit-Annoying/pen/1/1 – Demo
http://codepen.io/A-Bit-Annoying/pen/1/2 – Aktualisierte Version
Hallo,
Ich würde es schätzen, wenn es Vorschauen für diese Schnipsel gäbe. Für Anfänger wie mich ist es schwer zu verstehen, was einige der Begriffe bedeuten oder wie sie aussehen würden. Tolle Seite, aber und sehr hilfreich gewesen! :)
Nancie
Schauen Sie sich dieses Tool an, um Code zu greifen und damit zu spielen (Live-Vorschau) sofort: http://blog.codepen.io/2012/07/04/introducing-the-codepen-bookmarklet/
Codepen.com ist in der Tat sehr nützlich (wie laut 'A Bit Annoying's Code, früher gepostet). Eine ähnliche Seite ist: http://dabblet.com/
Außerdem gibt es unter dem Code einen „Referenz-URL“, der zum Originalartikel führt. Aber ich stimme zu, eine Einführung und/oder ein Screenshot würden es einfacher machen (aber mehr Arbeit…).
@Chris Coyier; Entschuldigung, YouTube ist derzeit in unserem Land wegen eines kürzlichen religiösen Aufruhrs gesperrt.
@Jacques; dabblet.com ist wirklich großartig. Das Ergebnis konnte sofort beobachtet werden.
Danke fürs Teilen.
Gibt es eine Möglichkeit, die Striche weiter auseinander zu ziehen oder länger zu machen?
Anstatt diesem
Mach das
– – – – – – – – – – – – – –
Oder diese
_
Danke!
Das sieht wirklich gut aus. Ich habe die gleiche Inspiration vor etwa einem Jahr auf meiner Seite verwendet, mit nur einem Unterschied – ich habe die outline-Eigenschaft anstelle von border verwendet. Der gute Aspekt daran ist, dass border für zusätzliche Dinge verwendet werden kann, der schlechte ist, dass border Seiten haben kann, wie oben oder links, aber outline geht symmetrisch überall herum.
Das Hauptproblem bei diesem Effekt, unter Verwendung von Rändern oder Konturen, ist das weitere Verhalten – zum Beispiel, wenn Sie fluid-width-equal-height-columns verwenden, mit jeder Methode außer JavaScript, mit box-sizing: border-box; Eigenschaft.
Andere Methoden machen diesen Trick kompliziert
Wenn nach unten unendlich gestreckt, bewegt sich der untere Teil des Randes (und der Kontur) die ganze Zeit, was zu Inkonsistenzen im Design führt. Daher muss ein hässliches „Patch div“ angewendet werden, um das Erscheinungsbild des unteren Randes zu erhalten, und das ist kein wirklicher schöner Code-Beispiel.
Sieht wirklich toll aus. Früher habe ich es mit einem gestrichelten Linienrand in CSS erstellt, aber dieses hier ist ausgefeilter. Vielen Dank!
Hallo,
Das Tutorial war großartig. Nur eine Sache…
Wie erstelle ich Schatten für die gestrichelte Linie?
Ich habe alles versucht, aber ich bekomme die gestrichelte Linie nicht zum Schatten.
Vielen Dank im Voraus…
Toller Tipp, ich habe das kürzlich für eine E-Commerce-Seite gemacht, den Preis-Tag genäht, aber ich habe am Ende zwei HTML-Elemente verwendet, eines für die Hintergrundfarbe, das den Innenabstand hatte, dann hatte das innere Element den gestrichelten Rand. Dies ist eine viel elegantere Lösung. Danke
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
Das funktioniert nicht in CSS2.1.
Wie funktioniert es?
Sie können dies nicht verwenden, wenn Sie Prozentsätze im Body verwenden.
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
Also keine runden genähten Icons, gespannt, ob jemand Lösungen hat. Ich habe auch einen Fehlerbericht an Mozilla gesendet.
Ich bin überrascht, dass niemand das gefürchtete Firefox-Problem mit der Renderung von border-radius erwähnt hat. Ich würde das gerne verwenden, wenn es nicht dafür wäre.
Ich habe mich gefragt, wie der Rand in die rote Box kam… aber es mit box-shadow herausgefunden… Vielen Dank…
Wie sieht es mit alten Browsern aus? Wie stellen wir sicher, dass border-radius in alten Browsern funktioniert. Manche Leute haben immer noch alte Browser. Webdesigner müssen browserübergreifende Seiten erstellen.
Gibt es eine Lösung für den Bug bei der gerenderten gestrichelten Ecke in FF? Sie sieht solide aus, sehr seltsam :-/
Ich würde empfehlen, zu Bildern zurückzukehren oder eine Mischung aus JS und Bildern zu verwenden, um einen gestrichelten Rand an den Ecken Ihres Button-Elements anzuwenden, nicht schön, aber funktional. Eine weitere Option könnte sein, skalierbare SVG-Buttons für die modernen Browser auszuprobieren.
Hat jemand bessere Vorschläge?
Dies ist eine viel effektivere und effizientere Lösung, als zwei HTML-Elemente zu verwenden, um diese Aufgabe zu erledigen…
Ich habe mich gefragt, wie der Rand in die Box kam,
jetzt den Trick verstanden.
einfache, aber coole Effekte. Design ist alles über Gedanken. Was Sie denken, können Sie in Ihre Gedanken umwandeln.
Warum wird font-weight verdoppelt? normal und fett?