Drücken Sie Ihrer Website einen Stempel auf

10. März 2021 | CSS-Stylesheet

Dieser Beitrag beinhaltet 406 Wörter. Geschätzte Lesezeit: ca. 3 Minuten.

Wenn Sie Ihre besten Beiträge, ihre neuesten Inhalte oder Ihre persönlichen Favoriten mit einem Stempel auszeichnen möchten, gelingt das mit ein wenig CSS ganz einfach. Das gibt richtig coole Möglichkeiten im Stempel-Look,

Fügen Sie die folgenden Zeilen ins CSS-Stylesheet Ihrer Website ein. Das Stylesheet öffnen Sie via Design/Customizer/Zusätzliches CSS:

.stamp {
transform: rotate(-12deg);
color: #002733;
font-size: 30px;
font-weight: 900;
font-family: 'Montserrat';
border: 0.25rem #002733 solid;
margin-left: 20px;
display: inline-block;
padding: 0.25rem 1rem;
text-transform: uppercase;
border-radius: 1rem;
letter-spacing: 0.2em !important;
-webkit-mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png');
-webkit-mask-size: 944px 604px;
mix-blend-mode: multiply;
}

Dem Text, der im Stempel erscheinen soll geben Sie nun die CSS-Klasse «stamp».

Probieren wir’s doch gleich aus. Ich möchte vielleicht einen Stempel mit dem Text «Favorite».

favorite

Voilà …

Zusatztipp: Stempel verlinken

Vielleicht wollen Sie den Stempel noch mit einem Link versehen. Dann erscheint der Stempeltext jedoch in der Linkfarbe ihres Webdesigns. Das können Sie mit einem weiteren Eintrag im CSS-Stylesheet ändern:

.stamp a {
color: #002733;
}
Ich würde meinen

top!

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This