kulturbanause Blog

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

Frontend


eBook zu SMACSS kostenlos verfügbar

Das SMACSS-Konzept von Jonathan Snook hat zwar bereits einige Jahre auf dem Buckel, ist aber nach wie vor aktuell und sollte daher jedem Frontend-Developer zumindest in den Grundzügen bekannt sein. Nun kann das bisher kostenpflichtige eBook zu SMACSS auf der Website gratis heruntergeladen werden.

Direkter Link zur Website

Websites für das iPhone X optimieren: weiße Balken entfernen, Viewport anpassen, Safe Area festlegen

Das iPhone X verwendet ein nahezu randloses Display, dass sich über die gesamte Vorderfläche des Geräts erstreckt. Da das iPhone insgesamt abgerundet ist, sind auch die Ecken des Displays abgerundet. Daher müssen Designer für das iPhone X einige Besonderheiten berücksichtigen um im Safari für iOS auch wirklich das gesamte Display für die Website zu verwenden. In diesem Beitrag beschreiben wir, wie ihr mit geringem Aufwand Websites für das iPhone X optimieren könnt.

Beitrag zu Ende lesen

HTML Placeholder-Text mit CSS stylen

Das placeholder-Attribut von HTML-Formularfeldern wird eingesetzt, um innerhalb eines Eingabefelds anzuzeigen, was für eine Information der Benutzer eintragen soll. Sobald der Anwender in das Feld geklickt hat und beginnt zu schreiben, verschwindet der placeholder. In diesem Beitrag findet ihr den CSS-Code um den Placeholder-Text zu stylen.

Beitrag zu Ende lesen

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