Tile design: Same sized columns with css flex and grid combo

It sounds so incedibly simple: you just want a layout with a (variable) number of boxes like the tiles in your bathroom, but without the mortar:

This requirement comes in regularly if you have to show categories in a nice and easy tile design, right? Right. But it’s really really difficult to make even if it sounds so incredibly easy. So don’t feel bad like I did for years, if you battle with this.

I somehow always found a hack or 2nd best soluting to make it look almost right, but every simple solution has its problems when its gets to wrapping and showing equally sized tiles in every row.

So this guide will give you a short, comprehensible and perfect solution for square tile lists with css grid and flex.

Let’s start with putting down how exactly we expect out layout to be:

  • equal width and height of every box (like, well, a tile)
  • boxes have to stretch out to fill the whole width of the page (no nasty margins around it)
  • but at the same time they should wrap so we fill the space nice and evenly
  • And, yes: we need the content of the boxes to be centered not only horizontally but also vertically
  • the css flex neck breaker: you want the last item to be the same size as the boxes above and *not* take up the whole width

Weiterlesen

Veröffentlicht unter CSS3, HTML5 | Hinterlasse einen Kommentar

Endlich: der CSS backdrop-filter

Der Backdrop-Filter bringt endlich wieder frischen Schwungs ins Webdesign. Das aktuelle Flat-Design lässt wenig Platz für Schnörkel und Schatten, doch dank des backdrop-filters können wir nun wieder etwas kreativer werden. Mit den aktuellen Browsergenerationen wird dieses tolle Feature nun sowohl von Chrome, Safari, als auch Edge unterstützt und kann damit endlich unbesorgt eingesetzt werden (siehe canIuse: backdrop-filter).

Weiterlesen

Veröffentlicht unter CSS3 | Verschlagwortet mit , , , | Hinterlasse einen Kommentar

Die 3 Schritte zur mobilen Optimierung der Website

Bereits im November 2014 hat Google im offiziellen Webmaster-Blog darauf hingewiesen, dass es ab sofort in den Suchergebnissen anzeigt, wenn Websites „mobile friendly“ sind. Am 21. April wird es dann richtig ernst: die Mobiltauglichkeit der Website wird ab diesem Stichpunkt nicht nur angezeigt, sondern hat auch nachhaltige Auswirkungen auf die Platzierung der Seite in den Suchergebnissen – zumindest wenn von einem mobilen Endgerät gesucht wird.

Die Vorgaben von Google, was dort unter einer „mobile friendly“ Website verstanden wird sind klar:

  • Keine Software, die nicht auf allen Endgeräten verfügbar ist, z.B. Flash
  • Texte müssen ohne Zoomen lesbar dargestellt werden
  • Die Seitengröße passt sich an die Gerätegröße an, sodass nicht horizontal gescrolled oder gezoomt werden muss
  • Links müssen weit genug auseinander liegen, um gut tap-bar zu sein

Wir besprechen nachfolgend die 3 wichtigsten Schritte für die mobile Optimierung der Website, um diesen Anforderungen gerecht zu werden.
Weiterlesen

Veröffentlicht unter HTML5 | Verschlagwortet mit | 5 Kommentare

Bilder aufnehmen mit Web-App und HTML Elementen in iOS und Android

Foto in Web-App einfügen

Foto in Web-App einfügen

Manchmal machen einem es Apple und Co. auch leicht: sowohl iOS, als auch Android lassen sich dieser Tage über ein ganz einfaches HTML Formular-Element dazu bringen, einen schönen und funktionalen Dialog zu öffnen, über den der User mit seinem Smartphone oder Tablet ein Bild aufnehmen oder aus den lokalen Bildern wählen kann.

Code für nativen Kamera-App Zugriff

Der Code für den Zugriff, bzw. die Aktivierung der nativen Kamera-App ist erfreulich einfach:


<input id="takePictureField" type="file" accept="image/*" />

Weiterlesen

Veröffentlicht unter HTML5 | 3 Kommentare

Standort im Browser ermitteln per HTML5 Geolocation API

Alle Browser, die nicht mehr aus der digitalen Steinzeit stammen (Internet Explorer 9, Firefox 3.5 und Google Chrome), sind in der Lage, über die offiziell von der W3C zur Verfügung gestellte Geolocation API eine Angabe dazu zu machen, an welchem Standort sich der User befindet.

Wie wird der Standort per Geolocation API ermittelt?

Die Standortermittlung per HTML5 ist relativ komplex und ausgereift und durchläuft eine Reihe von Schritten zur Ermittlung mit aufsteigender Genauigkeit:
Weiterlesen

Veröffentlicht unter HTML5 | 4 Kommentare

Web-App offline speichern: der Offline Application Cache

In den meisten Anwendungsfällen möchte man eine Web-App ebenso wie eine native App auch, offline nutzen, also ohne per WLAN oder Mobilfunk mit dem Internet verbunden zu sein. Native Apps tun sich da leicht, werden diese ja schon vor Verwendung heruntergeladen und auf dem Smartphone gespeichert.

Die Web App funktioniert super, solange man online ist – sobald jedoch die Verbindung unterbrochen ist, kann sie nicht mehr geöffnet werden. Um dieses Problem zu beheben, ist es notwendig, dem Browser die Anweisung zu geben, die Web-App mit allen benötigten Inhalten herunterzuladen in den sogenannten „application cache“.
Beim nächsten Öffnen der URL der Website, also der Web-App, werden die Inhalte dann direkt aus dem Cache geladen.
Weiterlesen

Veröffentlicht unter HTML5 | 3 Kommentare

HTML5 Formulare mit Validierung und Platzhalter

Auch für Formulare bietet HTML5 einige ungeheuer praktische Features, mit denen sich der Web-Entwickler das Leben nicht nur leichter, sondern die Web-Applikation auch sicherer machen kann.

Besonders praktisch ist, dass man nicht daran denken muss, JavaScripts für die Validierung einzubinden und den Elementen die korrekten Classes zuzuweisen, um die Validierung zu bewirken, sondern alle Funktionen sind bereits im HTML5 Kern enthalten. Besonders Bonbon ist, dass die Validierungs-Nachricht automatisch in der Sprache des Betriebssystems – und damit der bevorzugten Sprache des Users – ausgegeben wird; eine erhebliche Erleichterung bei der Lokalisierung von Inhalten.

Wir stellen die wichtigsten Mittel vor, die man zur Validierung und Gestaltung von HTML5 Formularen verwenden kann

Weiterlesen

Veröffentlicht unter HTML5 | 1 Kommentar

HTML5 Video und die Browserkompatibilität inkl. iOS und Android

Grafik: longtrailvideo.com

Der HTML5 Video Tag macht es deutlich einfacher, Videos ins Netz zu stellen. Er spielt eine ganze Menge verschiedener Formate ohne Plugins ab und ist sehr gut über JavaScript zu steuern.
Vor dem Einsatz des HTML5 Video Tags fragt sich jeder verantwortungsbewußte Entwickler aber, wie es mit der Browserkompatibilität aussieht und auch das Thema mobile will behandelt werden: welche Einschränkungen gibt es für das Video Tag auf iOS und Android?
Nachfolgend klären wir anhand Statistik und Auswertungen, dass die Zeit für HTML5 Video gekommen ist:

Weiterlesen

Veröffentlicht unter HTML5 Videos | Verschlagwortet mit , , , , | 1 Kommentar

Accordion Boxen mit CSS3

Es gibt dank CSS3 einen fast schon unfassbar einfachen Weg, um dynamisch animierte Accordion Menus bzw. Boxen zu erstellen, die beim Anklicken des Titels sich gemächlich (natürlich nach genauer Vorgabe des Schöpfers) auseinanderfalten.

Nachfolgend dazu ein Beispiel:
Weiterlesen
Veröffentlicht unter CSS3 | Verschlagwortet mit , , | 5 Kommentare

Box-Shadow Generator

box-shadow CSS 3 code generator

Generieren Sie schnell und einfach Code für box-shadow


Box-Shadow Parameter

-
+
-
+
-
+
-
+
  #


box-shadow Generator



box-shadow styles

Schlagschatten
weich
Licht von Oben
reduziert
inset
glow (benötigt dunklen Hintergrund)


CSS3 Code für box-Shadow generieren

Mit CSS3 ist es möglich geworden, Elementen einen Schatten zuzuweisen, ohne diesen als Grafik anlegen zu müssen. Da das box-Shadow Attribut bis zu 5 Parameter bietet (siehe box-shadow in CSS3) ist es allerdings nicht ganz leicht, die Parameter zu durchschauen und das Erscheinungsbild vorherzusehen.

Mit diesem Generator können Sie die Werte manuell einstellen und sehen das Ergebnis direkt angezeigt.

Nutzen Sie auch dan "Surprise-Me" Werte Generator, um dem Box-Shadow Zufallswerte zuzuweisen.
Schließlich können Sie auch über die vordefinierten Styles von beliebten box-shadow Parametern inspirieren lassen.

Weiterlesen
Veröffentlicht unter CSS3 | Verschlagwortet mit , , , | Hinterlasse einen Kommentar