Automatische Initialen (Drop Caps) mit CSS

Eine Initiale dient im Print- und Webdesign nicht nur als Zierelement – sie kann auch die Lesbarkeit von Texten erheblich verbessern, da sie den Blick des Lesers führt. Wir zeigen euch in diesem Beitrag wie ihr mit dem CSS Pseudoelement :first-letter eine automatische Initiale für eure Website gestalten könnt.

Beitrag zu Ende lesen

Container Queries & Element Queries im Responsive Web Design

Eine der drei Grundvoraussetzungen, die Ethan Marcotte 2010 in seinem legendären Artikel »Responsive Webdesign« als Grundlage für selbiges aufgeführt hat, sind die Media Queries. Mit Media Queries kann man das Layout einer Website anhand von Geräteeigenschaften verändern. Beispielsweise, wenn der Viewport eine bestimmte Größe über- oder unterschreitet. Seit 2010 ist einige Zeit vergangen und es hat sich in der Praxis herausgestellt, dass für die Veränderung des Layouts die Viewportgröße nicht immer der ideale Ausgangspunkt ist. Häufig wäre es besser, wenn ein Element immer dann verändert werden könnte, wenn der Raum für dieses spezielle Element einen bestimmten Punkt über- oder unterschreitet. Genau das sollen sog. Element Queries bzw. Container Queries erledigen. Und noch vieles mehr.

Beitrag zu Ende lesen

Responsive Sticky Footer

Wenn der Inhalt einer Website kürzer ist als der Viewport hoch ist, kommt es häufig zu der Fehldarstellung. Es entsteht ein Freiraum unter der Fußzeile, da diese sich an der Länge des Inhalts orientiert. Mit Hilfe eines sog. »Sticky Footers« wird die Fußzeile immer am Ende der Seite bzw. am unteren Ende des Viewports positioniert. In diesem Beitrag zeigen wir verschieden Lösungen.

Beitrag zu Ende lesen

Navigation beim Runterscrollen verstecken, beim Hochscrollen anzeigen

Fixierte Navigationsleisten, die sich horizontal über die volle Breite der Website erstrecken sind keine Seltenheit. Um den Blick des Anwenders auf den Inhalt zu lenken und gleichzeitig den wertvollen Platz auf dem Display bestmöglich ausnutzen zu können, wird die Navigation auch häufig beim runterscrollen versteckt und beim hochscrollen wieder angezeigt. Insbesondere sog. Onepager und Landingpages nutzen vermehrt den Effekt. In diesem Beitrag archivieren wir eine CSS/jQuery-Lösung um das Verhalten herzustellen.

Beitrag zu Ende lesen

Vorschau-Button in WordPress verstecken

Hin und wieder kommt es vor, dass man den Redakteuren in WordPress verbieten möchte einen Inhalt über die Vorschau-Funktion anzuschauen. Das ist beispielsweise dann der Fall, wenn der Inhalt gar nicht auf einer eigenen Seite, sondern immer nur eingebettet in einer anderen Seite angezeigt wird. Die Vorschau würde in diesem Fall keinen Mehrwert bieten. In diesem Beitrag findet ihr das Code-Snippet um den Vorschau-Button für beliebige Post Types zu deaktivieren.

Beitrag zu Ende lesen

Button für Seitenumbruch zum WordPress-Editor hinzufügen

Bei längeren Artikeln kann es aus struktureller Sicht sinnvoll sein, den Artikel auf mehrere Seiten aufzuteilen. WordPress bringt dazu den sog. »Seitenumbruch« als Standardfunktionalität mit – wir zeigen euch, wie ihr den Button für den Seitenumbruch zum WordPress Editor hinzufügt. Beitrag zu Ende lesen

Ältere Beiträge →