DIVI: Ribbon / Bändchen über Bilder legen [DIVI Anleitung / WordPress / CSS]

von | Apr. 8, 2021 | Allgemein | 0 Kommentare

Schlagwörter: CSS - DIVI - Webdesign

Ich bin immer wieder auf der Suche nach Ideen und Tipps und Tricks um eine Webseite zu verschönern. Meistens sind es nämlich Kleinigkeiten die einer Webseite den nötigen Pfiff verleiht.

Heute möchte ich euch mal zeigen wie man mit Divi (oder natürlich allen anderen PageBuilder oder auch als reines CSS) einem Bild so ein Bändchen – auf englisch Ribbons – geben kann. Dieses Bändchen kann man dann sogar beschriften und hat somit auch ein Beschreibendes Element über einem Bild.

Video

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
content: 'Ready';
position: absolute;
display: block;
right: -60px;
top: 30px;
width: 200px;
padding: 2px 10px;
background-color: #ba2c67;
color: #fff;
font-size: inherit;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
transform: rotate(45deg);

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert