Trick # 69 | 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;
}top!
Werbung
Werbung
