de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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

relativ zur Breite des Ansichtsfensters, daher die Verwendung der 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

einschließlich des Grenzbereichs, so dass das Hintergrundbild entsprechend dimensioniert werden muss .

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

auch. Was den Code angeht, der bisher in der Post verwendet wurde, hier ist der 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

dieses Ziel zu erreichen.

 .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.

Frische Ressource für Webentwickler - Januar 2018

Frische Ressource für Webentwickler - Januar 2018

Das neue Jahr 2018 ist da. Wenn wir uns die Fortschritte bei der Webentwicklung vor fünf Jahren ansehen, ist das völlig anders als heute. Heute gibt es neue Methoden, Tools und sogar ein ganz neues Paradigma, das die Art verändert, wie wir heute Websites erstellen - und VirtualDOM ist einer davon.DO

(Tech- und Design-Tipps)

So identifizieren Sie gefälschte Amazon-Bewertungen

So identifizieren Sie gefälschte Amazon-Bewertungen

Fake-Reviews sind eine der größten Hürden für ein gutes Online-Shopping-Erlebnis. Wie alle anderen Online-Shopping-Seiten plagen auch die Fake-Reviews den E-Commerce-Giganten Amazon .Obwohl Amazon sich bemüht, die gefälschten Bewertungen auszusortieren, müssen wir als Käufer jedoch unseren Teil dazu beitragen. Es dau

(Tech- und Design-Tipps)