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);