Einzigartiger Platzhaltertext mit jipsum

In Designerkreisen ist „Lorem ipsum“ Text allseits bekannt. Ein Großteil der Außenstehenden wiederum fragt sich vermutlich „Lorem… wah?“. Besagter Text wird gern als Platzhalter- oder auch Blindtext in Gestaltungsprojekten verwendet. Der Text setzt sich teils aus lateinischen, teils aus unbekannten Wörtern zusammen und ergibt bewusst keinen Sinn. So kann sich der Betrachter eines Layouts oder Designs voll auf dieses konzentrieren und wird nicht immer wieder von (interessanten) Texten abgelenkt. So die Theorie. (mehr …)


Simple SVG Hamburger Icon CSS Klasse

Ab und zu kommt es vor, dass gerade kein Icon-Set oder gar eine Icon-Font zur Hand ist. In manchen Fällen wäre dies auch einfach overkill. Zum Beispiel dann, wenn eine Website überarbeitet wird, die ursprünglich nicht responsive war und eh keine Icons beinhaltet. Oder eben wenn eine neue Website erstellt wird, die sonst keine weiteren Icons benötigt.

Dann, und immer dann stelle ich mir die Frage, wie oder woher ich nun möglichst schnell ein Hamburger Icon – das Icon, welches gern für den „Menü-anzeigen/ausblenden-Button“ verwendet wird – bekomme, welches ich anschließend in die Website einbauen kann. Ohne jetzt großartig Photoshop oder Illustrator öffnen zu müssen.

Hier gehts zur Demo. (mehr …)


Texte mit CSS abschneiden und auspunkten

Geht das überhaupt? Ja, es ist möglich. Texte lassen sich mit der CSS Eigenschaft text-overflow auspunkten. Leider beschränkt sich diese Funktionalität jedoch auf einzeilige Texte. Perfekt für einzeilige Teaser in Listen, Tabellen oder Button-Beschriftungen. Den kompletten Text kann man beispielsweise bei Mouseover mit Hilfe eines Tooltips präsentieren.

Die Vorteile?

  • Der Aufwand ist verschwindend gering
  • Suchmaschinen bekommen den kompletten Content
  • Bei mehrzeiligen Auflistungen entsteht keine „wellenartige“ Darstellung wie bei (meist serverseitigen) „Nach-X-Buchstaben-Abschneiden“ Lösungen

(mehr …)