Button Label Toggle via CSS

In letzter Zeit hatte ich oft den Fall, dass ein Button im aktiven Status seine Aufschrift verändern soll. Über die Zeit hat sich aus einem ursprünglich etwas ungelenken Script, mit Hilfe des :not() Selectors, ein schlankes CSS-Snippet entwickelt.

CSS

.btn:not(.active) > .btn-label-active,
.btn.active > .btn-label-default {
	display: none;
}

(mehr …)


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 …)


CSS Shorthands

Einige CSS Eigenschaften lassen sich zu kompakten Einzeilern, sogenannten Shorthands, zusammenfassen. Am Beispiel von padding wird die Platz- und Schreib-Ersparnis sichtbar.

.el {
	// lange variante
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 5px;
	
	// shorthand
	padding: 20px 10px 15px 5px;
}

Vier Zeilen schmelzen zu einer Zeile zusammen. In diesem Beispiel spart das nicht nur Platz, sondern auch Schreibarbeit und dient zudem der Übersichtlichkeit. Im Folgenden sind die wichtigsten Shorthands zur schnellen Übersicht in ihrer korrekten Schreibweise und Reihenfolge aufgeführt. (mehr …)


Deklarationsreihenfolge von CSS Eigenschaften unterteilt in Gruppen

Die Reihenfolge der Deklaration von CSS Eigenschaften innerhalb eines Selectors folgt keinen festgelegten Regeln. Es bleibt jedem selbst überlassen, in welcher Reihenfolge die Eigenschaften deklariert werden. Ohne Struktur führt dies schnell zu einem großen Durcheinander und mutiert, spätestens in größeren Projekten und in Teamarbeit, zu einem echten Problem. Um dem entgegenzuwirken, gibt es verschiedene Ansätze oder Richtlinien, CSS Eigenschaften zu sortieren. Ich habe mich früh auf eine Variante, die alphabetische Sortierung, festgelegt: (mehr …)


Haut & Haar Farbwerte

Neuerdings kommt es häufiger vor, dass ich Farbtöne für Haut und Haar benötige. Zufällig viel mir eine nette Kollektion an Farbtönen für Comic Figuren in die Hand, welche ich im Folgenden noch einmal kopierfreundlich in einer Übersicht aufgeführt habe. (mehr …)


Eine Website unresponsive machen

Nach dem Redesign einer alten Website, die bisher noch nie etwas von „Responsive Webdesign“ gehört hat, gibt es in seltenen Fällen Inhalte, die so komplex, speziell oder statisch sind, dass sie nicht – zumindest nicht auf die Schnelle – auf mobile Endgeräte optimiert werden können. Dieser Fall trat kürzlich für eine einzelne Webseite eines Webportals ein und es stellte sich die Frage der geschicktesten Herangehensweise. (mehr …)


MAMP Apache startet unter Yosemite nicht

Kürzlich habe ich auf OS X Yosemite aktualisiert. Danach wollte der Apache von MAMP nicht mehr starten. Dieses Problem ist weit verbreitet und den Entwicklern von MAMP zum Glück bekannt. Sie empfehlen eine Datei im MAMP-Ordner umzubenennen.

Die Datei, um die es geht, heißt envvars und liegt im Ordner /Applications/MAMP/Library/bin. Diese wird einfach in _envvars umbenannt und MAMP danach neugestartet. Nun sollte der Apache wieder ordnungsgemäß starten und seinen Dienst tun.

Danke, Maik!


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 …)


Eclipse ersetzt gesuchte Dateien im Editor

…Und das nervt! Sucht man in Eclipse über mehrere Dateien (z.B. Search > File…) und öffnet die Ergebnisse (unterschiedliche Dateien) nacheinander im Editor, wird der aktuelle Editor-Tab standardmäßig mit dem zuletzt aufgerufenen Suchergebnis überschrieben. Bis heute. Korrigieren kann man dieses Verhalten über die Einstellungen von Eclipse.

Preferences > General > Search > Reuse editors to show matches

Hier wird lediglich der Haken entfernt und der Spuk hat ein Ende. Jede gesuchte und anschließend aus den Ergebnissen geöffnete Datei wird fortan in einem eigenen Edior-Tab geöffnet. So wie es sein soll. Aufatmen!

Danke, Tim!