de.hideout-lastation.com
So erstellen Sie ein Cut-Out Border Design mit CSS
Mit einem ausgeschnittenen Randdesign können wir den Benutzern zeigen, was sich unterhalb des Randbereichs eines HTML-Elements befindet . Diese Aufgabe wird in der Regel gelöst, indem zwei oder mehr Blockelemente (in den meisten Fällen div) unterschiedlicher Größe übereinander gestapelt werden . Zunächst scheint dies eine mühelose Lösung zu sein, aber es wird frustrierender, wenn Sie das Layout mehrmals wiederverwenden, sich um die Elemente bewegen, das Design für mobile Geräte optimieren oder den Code pflegen möchten.
In diesem Beitrag zeige ich Ihnen eine elegante CSS-Lösung, die nur ein HTML-Element verwendet, um denselben Effekt zu erzielen. Diese Technik eignet sich auch für die Barrierefreiheit, da das Hintergrundbild im CSS getrennt vom HTML geladen wird.
Am Ende dieses Posts wissen Sie, wie Sie ein Hintergrundbild im Randbereich anzeigen, um das ausgeschnittene Rahmenmuster zu erstellen, das Sie unten sehen können. Ich zeige auch, wie Sie das Design mithilfe von Viewport-Einheiten ansprechen können .
Anfangscode
Die einzige Voraussetzung in der HTML-Front ist ein Blockelement :
Wir müssen die Dimensionen (width & height) und Border Width-Werte des div wiederverwenden, also stelle ich sie als CSS-Variablen vor . Die Variable --w bezeichnet die Breite des .cb Blockelements, --h gibt ihre Höhe an, --b für die --b2 und --b2 für die --b2 multipliziert mit 2. Wir werden später sehen, wie sie verwendet wird der letzten Variablen.
Ich bemale die
vw Einheit (Sie können feste Einheiten verwenden, wenn Sie möchten). .cb {--w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); } Schnelle Erklärung - vw und vh Einheiten
Die Einheit vw repräsentiert das 1/100 der Breite des Ansichtsfensters . Zum Beispiel sind 50 50vw 50 Teile einer Ansichtsfensterbreite, die vertikal in 100 gleiche Teile geschnitten sind, während 50 50vh 50 Teile einer Ansichtsfensterhöhe ist, die horizontal in 100 gleiche Teile geschnitten ist .
Lassen Sie uns den obigen Code verbessern, indem Sie einen Hintergrund hinzufügen und den Rahmen, die Höhe und die Breite mit unseren vordefinierten CSS-Variablen festlegen .
.cb {--w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); Hintergrund: URL (bg.jpg); Grenze: var (- b) fest transparent; Höhe: var (- h); Breite: var (- w); } So soll die Demo jetzt aussehen:
Größe das Hintergrundbild Wir brauchen das Hintergrundbild, um den gesamten Bereich der
Wenn Sie dem Hintergrundbild eine feste Größe geben möchten, stellen Sie sicher, dass die Größe, die Sie angeben, den Randbereich des Bildes abdeckt
background, den ich ihm gebe: .cb {--w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); Hintergrund: url (bg.jpg) center / calc (var (-w) + var (-b2)) calc (var (-h) + var (-b2)); Grenze: var (- b) fest transparent; Höhe: var (- h); Breite: var (- w); } Die Breite des Hintergrundbildes [ calc(var(--w) + var(--b2)) ] ist die Summe der Breite von div [ var(--w) ] und der Breite der linken und rechten Ränder [ var(--b2) ].
Ähnlich ist die Höhe des Hintergrundbildes [ calc(var(--h) + var(--b2)) ] die Summe der Höhe von div [ var(--h) ] und der Breite des oberen & untere Grenzen [ var(--b2) ].
Auf diese Weise haben wir das Hintergrundbild auf einen Bereich festgelegt, der der Größe des Bereichs (einschließlich des Randbereichs) entspricht .
Das Schlüsselwort center richtet das Hintergrundbild an der Mitte des div .
Hinweis: Wenn Sie dem div auffüllen div, denken Sie daran, den Auffüllbereich genauso in die Hintergrundgröße einzubeziehen wie der Rahmenbereich.
Das haben wir gerade:
Bedecken Sie den Grenzbereich Nachdem wir nun den border-inclusive-Bereich mit dem Hintergrundbild abgedeckt haben, bleibt nur noch der mittlere Bereich innerhalb des Rahmens (border-exclusive area) mit einer durchgehenden Farbe, für den wir einen box-shadow Inset erreichen .
.cb {--w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); Hintergrund: url (bg.jpg) center / calc (var (-w) + var (-b2)) calc (var (-h) + var (-b2)); Grenze: var (- b) fest transparent; box-shadow: Einfügung var (- w) 0 0 rgba (0, 120, 237, .5); Höhe: var (- h); Breite: var (- w); } Der horizontale Schatten mit dem Wert var(--w) deckt die gesamte Breite des div . Die Verwendung der rgba ermöglicht das Hinzufügen von Transparenz in der Mischung. Sie können jedoch auch eine deckende Farbe verwenden, wenn Sie den mittleren Bereich vollständig abdecken möchten.
Fügen Sie einen zusätzlichen Rahmen mit box-shadow In der Codepen-Demo konnten Sie einen weißen Rahmen um das Bild sehen. Es gibt einen berühmten Trick mit Box-Shadows, um mehrere Ränder zu erzeugen - wir können die gleiche Technik verwenden, um unserem Design einen oder mehrere einfarbige Ränder hinzuzufügen .
Der aktualisierte box-shadow Wert lautet:
.cb {--w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); Hintergrund: url (bg.jpg) center / calc (var (-w) + var (-b2)) calc (var (-h) + var (-b2)); Grenze: var (- b) fest transparent; box-shadow: Einfügung var (-w) 0 0 rgba (0, 120, 237, .5), 0 0 0 calc (var (-b) / 2) weiß; Höhe: var (- h); Breite: var (- w); } Die Funktion calc(var(--b) / 2) erzeugt einen Schatten der Hälfte der Rahmenbreite .
Optional: Separates Layout und Ästhetik In meiner letzten Codepen-Demo habe ich den Code für das Hintergrundbild und die Box-Shadow-Farbe in einer separaten Klasse platziert . Dies ist optional, kann aber sehr nützlich sein, wenn Sie das Layout des ausgeschnittenen Rahmenentwurfs in mehreren Elementen wiederverwenden und die Ästhetik (Hintergrundbild + Farbe) für jedes Element unabhängig hinzufügen möchten.
Ich habe der Klasse .poster1 eine Klasse .poster1
.poster1 {--tbgc: rgba (0, 120, 237, .5); Hintergrundbild: url ("http://bit.ly/2eQBij2"); } Da background eine Kurzschrifteigenschaft ist, können seine Langhandeigenschaften einzeln überschrieben / gesetzt werden . Daher können wir background-image in .poster1 und den URL-Wert aus der background in .cb .
Um den Wert des box-shadow, können wir eine andere CSS-Variable verwenden . Die Variable --tbgc enthält den Farbwert, den wir dem Box-Shadow geben wollen (hellblau in der Demo), also ersetzen wir unter den Style-Regeln für .cb den Farbwert der box-shadow Eigenschaft durch var(--tbgc) .
.cb {--w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); Hintergrund: calc (var (-w) + var (-b2)) calc (var (-h) + var (-b2)); Grenze: var (- b) fest transparent; box-shadow: Einfügung var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) weiß; Höhe: var (- h); Breite: var (- w); } Code für den Hochformatmodus
Da die Abmessungen alle in der Einheit vw, sieht es zu klein aus, wenn Sie das Design im Hochformat anzeigen (kleinere Breite im Verhältnis zur Höhe), in der sich alle mobilen Geräte standardmäßig befinden. Um dieses Problem zu lösen, wechseln Sie vw mit vh, und ändern Sie die Größe des Designs, wie Sie es für die Hochformat-Modi für richtig halten.
@media (orientation: portrait) {.cb {--w: 35vh; --h: 40vh; --b: 4vh; }} 
Hinweis: Vergessen Sie nicht, das Viewport-Metatag zu Ihrer HTML-Seite hinzuzufügen, wenn Sie sich entschieden haben, es für die mobile Ansicht zu optimieren.
Combat Phone Addiction durch Drehen Sie Ihr Smartphone Bildschirm grau
Tech-Sucht ist ein häufiges Problem in diesen Tagen, und unter allen Geräten, Smartphone-Nutzung übertrifft alles andere. Sie werden Leute finden, die so in ihr Smartphone vertieft sind, dass sie alles in ihrer Umgebung ignorieren.Es kann jedoch einen einfachen Weg geben, um dieses Problem zu lösen - Drehen Sie Ihren Smartphone-Bildschirm monochrom .Lau
Photoshop-Ebenen einfach mit Cut & Slice Me exportieren
Schneiden und Schneiden im Designprozess ist zweifellos eine zeitaufwendige Arbeit. Außerdem wird es immer komplizierter, wenn Sie Hunderte von Schichten in verschiedenen Maßstäben schneiden und schneiden müssen.Natürlich gibt es Kopien zusammengeführt, Ebenen in Dateien exportieren oder Features in Photoshop. Aber
