Screenshot ins-Element-Formatierung

insert <ins> with somewhat style

Mancher von euch hat vielleicht noch schon mal das <ins>-Element benutzt aber keine rechte Idee gehabt, es zu stylen. Ich hab das hier beim Pixelscheucher jetzt so gelöst, Optimierungsbedarf benötigt:

article p ins
	text-decoration:none;
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	transform: rotate(-1deg);
	box-shadow: 1px 1px 1px #999;
	display:inline-block;
}

Was tut es? Nun, es macht aus dem <ins> ein inline-block-Element, rotiert es um -1° und verpasst ihm einen leichten Schatten nach unten rechts. Sieht dann nämlich wie nachträglich reingeklebt raus, denn <ins> steht ja auch für nachträglich eingesetzten Inhalt.

So sieht es live aus:

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Und als Screenshot:

Screenshot ins-Element-Formatierung

(Normalerweise schreibe ich CSS-Anweisungen in eine Zeile, der Übersichtlichkeit halber jetzt mal nicht.)




Veröffentlicht von

Michel Balzer

Michel ist der Autor des Pixelscheucher-Blog und bloggt seit ca. 2004. Er arbeitet in Essen als Frontend-Entwickler und -Designer in einer kleinen Agentur. mehr über Michel und den Pixelscheucher.

3 Gedanken zu „insert <ins> with somewhat style“

Schreibe einen Kommentar

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