Es gibt nichts langweiligeres als wenn ein Text von links bis rechts durchgehend ist, ohne Umbruch, ohne Bild… einfach nur langer Text. Aus diesem Grund möchte ich euch heute ein paar fast vergessene Psoido HTML / CSS Elemente zeigen, mit denen ihr eure Texte ein wenig auffrischen könnt.
Video
Icons vor und nach einem Text
Mit before (vor dem Text) oder after (nach dem Text) wird die Position des Icon definiert.
1 2 3 | ::after { content: "🖖"; } |
1. Buchstabe eines Abschnitt designen
Hier könnt ihr den 1. Buchstaben designen – das kann dann so aussehen wie in den Büchern aus dem Mittelalter wo die Mönche die 1. Buchstaben immer verziehrt haben.
1 2 3 4 5 | ::first-letter { font-size: 50px; color: rgb(0, 79, 94); text-transform: uppercase; } |
1. Zeile eines Abschnitts designen
Natürlich könnt ihr auch gleich die erste ganze Zeile designen und zwar mit diesem Code.
1 2 3 4 | ::first-line { color: brown; font-size: 20px; } |
Text Markierung einfärben
Wenn ihr einen Text markiert, dann wird er meistens schwarz – aber auch das könnt ihr ein wenig designen
1 2 3 | ::selection{ color: #d4db00; } |
Listen Punkte mit Icon ersetzen
Und hier könnt ihr die normalen Punkte in einer Liste mit einem Icon ersetzen.
1 2 3 4 | ::marker { color: rgb(249, 5, 229); content: '🧺 '; } |
0 Kommentare