kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Frontend


Wert eines <input type=“range“>-Sliders mit JavaScript auslesen und anzeigen

Das HTML-Formularelement range ist sehr praktisch um dem Anwender die Möglichkeit zu bieten, Werte mit Hilfe eines Schiebereglers zu verändern. Ohne JavaScript hat der Regler allerdings keine Funktion. In diesem Beitrag archivieren wir das JavaScript-Snippet mit dessen Hilfe die Position des Range-Sliders ausgelesen und auf der Website angezeigt bzw. verwendet werden kann.

Beitrag zu Ende lesen

Automatische CSS Initialen (Drop Caps)

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

CSS Grid Layout und die repeat-Funktion

Bei einer großen Anzahl von Spalten und/oder Zeilen können die CSS-Anweisungen durch die repeat-Notation präziser und leichter verständlich gestaltet werden. Die repeat-Funktion kann in den CSS-Grid-Eigenschaften grid-template-columns und grid-template-rows verwendet werden. Eine Übersicht vermittelt alligator.io.

Direkter Link zum Artikel

Die Einheit »fr« im CSS Grid Layout

Mit dem CSS Grid Layout erhalten wir eine neue Längeneinheit: Die fr-Einheit. fr ist eine Brucheinheit und 1fr ist 1 Teil des verfügbaren Platzes.
Robin Rendle erklärt die flexible Längeneinheit und zeigt Vorteile auf.

Direkter Link zum Artikel

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