Rahmen, abgerundete Ecken und Schatten hinzufügen.

Rahmen Sie eine Card ein, runden Sie die Ecken eines Fotos ab oder heben Sie einen Kasten mit einem Schatten von der Seite ab. All dies stellen Sie im Style-Panel des Elements ein und beim Darüberfahren ändern Sie es im Hover style-Panel. Nutzen Sie es, um eine Card hervorzuheben. Für denselben Rahmen auf einer ganzen Card-Serie hält eine geteilte Klasse sie einheitlich.

Das Video folgt dem Rezept unten: Es macht aus einem Textblock eine Card mit Rahmen, runden Ecken und einem Schatten, der beim Darüberfahren tiefer wird.

Bevor Sie beginnen

• Öffnen Sie die Seite in DXPR Builder; wenn Sie auf ein Element zeigen, erscheint seine Steuerleiste mit More. Neu im Builder? Siehe Ihre erste Seite.
• Speichern im Dialog behält eine Änderung im Editor. Speichern in der Builder-Symbolleiste über Ihrem Inhalt speichert die Seite und zeigt „Saved field“.
• Heben Sie eine Sache hervor. Ein Rahmen oder ein Schatten lenkt den Blick auf ein Schlüsseldatum, ein Angebot oder ein Zitat. Setzen Sie ihn auf alles und er wirkt nicht mehr.
• Halten Sie eine Serie einheitlich. Für denselben Rahmen auf vielen Cards speichern Sie eine Card als Vorlage oder nutzen Sie eine geteilte Klasse. Siehe HTML-ID und Klassen.
• Lassen Sie das Theme Schatten abstimmen. Die fünf Drop shadow-Level sind einmal für die ganze Website definiert. Ihr Theme kann ein Level umgestalten und jedes Element, das es nutzt, folgt.

Rezept: eine hervorgehobene Card

Sie erhalten einen weichen Kasten mit dünnem Rahmen in Ihrer Markenfarbe. Er hat runde Ecken und einen Schatten, der beim Darüberfahren wächst.

1. Fahren Sie mit der Maus über das Text-Element, klicken Sie auf More und dann auf Settings.
2. Öffnen Sie das Style-Panel. Das Boxmodell steht oben. Seine Schlösser stehen zunächst offen; klicken Sie auf das Schloss neben Padding, um es zu schließen, sodass sich seine vier Seiten gemeinsam bewegen.
3. Klicken Sie auf die Oberseite von Padding, geben Sie 32 ein und drücken Sie die Eingabetaste. Alle vier Seiten zeigen nun 32px.
4. Wählen Sie eine helle Background-Farbe, zum Beispiel ein blasses Grau.
5. Stellen Sie Border style auf Solid.
6. Schließen Sie das Schloss neben Border, klicken Sie dann auf eine seiner Seiten, geben Sie 1 ein und drücken Sie die Eingabetaste.
7. Wählen Sie eine Border color, stellen Sie Border radius auf 16 und Drop shadow auf 3.
8. Öffnen Sie das Hover style-Panel und stellen Sie Drop shadow auf 5.
9. Klicken Sie im Dialog auf Speichern und dann in der Symbolleiste auf Speichern.
10. Wählen Sie Preview im Ansichtsmenü (das Augen-Symbol) und zeigen Sie auf die Card. Ihr Schatten vertieft sich.

Was Sie sehen

Die Card hat einen dünnen Rahmen in Ihrer Farbe, runde Ecken und einen weichen Schatten darunter. In Preview wächst der Schatten tiefer, solange der Zeiger über der Card ist, und beruhigt sich, wenn er sie verlässt.

Wie ein Rahmen gebaut ist

Ein Rahmen braucht drei Einstellungen und das Panel verteilt sie. Stellen Sie alle drei ein:

1. Border style wählt die Linie: Solid, Dotted oder Dashed. Auf Theme defaults haben die meisten Elemente gar keinen Rahmen. None entfernt einen Rahmen, den Ihr Theme zeichnet.
2. Der Border-Ring des Boxmodells setzt die Breite jeder Seite, von 0 bis 50 px. Lassen Sie ihn leer, nutzt der Browser seine eigene Breite von etwa 3 px.
3. Border color setzt die Farbe. Lassen Sie sie leer, nimmt der Rahmen die Farbe des Texts.

Border radius rundet alle vier Ecken, von 0 bis 100 px. Er rundet auch Hintergrund und Schatten. Auf einem Image rundet er das Bild selbst.

Für einen Kreis machen Sie das Element quadratisch. Stellen Sie dann Border radius auf die halbe Breite in Pixeln: 100 für ein Element, das 200 px breit ist. Für alles Breitere fügen Sie unter HTML classes die Klasse Circular (50% radius) hinzu. Auf einem Image rundet diese Klasse den Rahmen um das Bild, nicht das Bild, nutzen Sie dort also Border radius.

Drop-shadow-Level

Dies sind die Standard-Level. Jedes Level ist ein geteilter Stil, kein in Ihrer Seite gespeicherter Wert, sodass ein Theme ein Level für die ganze Website neu abstimmen kann. Für Ihre Entwicklung: Die Level sind die CSS-Variablen --dxb-box-shadow-1 bis --dxb-box-shadow-5.

Im Hover style-Panel setzt Drop shadow das Level, solange der Zeiger über dem Element ist. Der neue Schatten blendet in 0,15 Sekunden ein. Ein höheres Level beim Darüberfahren lässt eine Card angehoben wirken.

HTML classes bietet mehr Formen: Lifted drop shadow, Raised drop shadow, 3D shadow und Curved horizontal drop shadow. Dazu gibt es Bootstraps Small shadow, Default shadow und Large shadow. Nutzen Sie einen Schatten pro Element. Bootstraps Schattenklassen schlagen den Drop shadow-Regler.

Wenn Sie Rahmen, Ecken oder Schatten nicht sehen

• Der Rahmen erscheint nicht. Border style steht auf Theme defaults oder None. Wählen Sie Solid, Dotted oder Dashed.
• Der Rahmen ist dicker als gewünscht. Es ist keine Breite gesetzt, daher nutzt der Browser etwa 3 px. Stellen Sie die Border-Seiten im Boxmodell ein.
• Der Rahmen hat die falsche Farbe. Eine leere Border color übernimmt die Textfarbe. Wählen Sie eine Border color.
• Die Ecken bleiben eckig. Eine Klasse wie No rounded corners (rounded-0) unter HTML classes oder eine Theme-Regel mit !important gewinnt. Entfernen Sie den Chip oder fragen Sie Ihren Webmaster nach der Theme-Regel.
• Die Ecken runden sich, aber es erscheint kein Kreis. Der Regler stoppt bei 100 px. Nutzen Sie die Klasse Circular (50% radius).
• Drop shadow ändert nichts. Eine Bootstrap-Schattenklasse wie Large shadow unter HTML classes gewinnt. Entfernen Sie ihren Chip. Level 1 ist zudem blass, versuchen Sie also Level 3 zum Testen.
• Der Schatten wächst beim Darüberfahren nicht. Stellen Sie Drop shadow im Hover style-Panel ein, nicht in Style, und wählen Sie ein höheres Level als das ruhende.
• Nur eine Seite hat sich geändert. Das Schloss neben Padding oder Border war offen. Schließen Sie es und geben Sie den Wert erneut ein.
• Der Hover-Schatten erscheint nie auf einem Smartphone. Touchscreens haben keinen Zeiger, daher erscheint ein Hover-Look erst nach einem Tippen.

Wie geht es weiter?

• Abstände: Dem Inhalt Raum im Rahmen geben.