Die Welt aus Entiwckler-Sicht
Damit eine Webseite oder App gut aussieht werden heutzutage viele Animationen mit der transition Property verwendet. Doch damit es wirklich rund wirkt sollten die Animationen bis auf wenige Ausnahmen die gleiche Dauer und das gleiche Timing haben. Die Frage wie man das in großen Projekten sicherstellen kann wird in diesem Artikel beantwortet.
Die erste Möglichkeit sicherzustellen, […]
Um den Besuchern einer Webseite möglichst viel Komfort zu bieten geht der Trend dazu Teaser vollflächig zu verlinken, um die Clickfläche möglichst groß und klar zu gestalten, anstatt nur den “mehr” Link als Clickfläche anzubieten.
Das Problem bei diesem vorgehen ist es, dass Links auch im Teasertext vorkommen können oder sogar sollen. […]
Es gibt laut Phil Karlton zwei komplizierte Dinge die Programierern begegnen.
There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.
Phil Karlton
Das Benennen von Dingen soll aber ab jetzt ein wenig einfacher werden.
Beim Erstellen von Webseiten arbeitet man oft mit Preprozessoren wie SASS und Less. […]
Es kommt vor, dass Module angelegt werden, bei denen man zunächst fest davon ausgeht, dass diese immer Links beinhalten werden. So gibt es Teaser mit dem Element Link.
.c-teaser {
&__link {
&:hover {
border-bottom: solid 1px red;
}
}
}Nun kann es passieren, dass die Anforderungen sich ändern und das Link Element auch mal ein Text sein muss, […]
Es gibt viele Anwendungsfälle für Farbverläufe, welche teilweise transparent dargestellt werden. Jedoch gibt es ein Problem mit Safari, und somit auch iOS, welches man immer bedenken muss.
In der Erwartung sieht das Ergebnis von einem Farbverlauf von rot zu transparent auf einem rosa Hintergrund wie folgt aus:
Farbverlauf Erwartungshaltung – ambientimpact.com
Entgegen der Erwartungshaltung verhält sich der Farbverlauf unter Safari und iOS jedoch wie folgt:
Farbverlauf Safari  […]
Wenn man sich bereits mit BEM vertraut gemacht hat wird man im Alltag einigen Problemstellungen begegnet sein. In diesem Artikel geht es darum möglichst viele dieser Problemstellungen zu beheben.
Die Annahme ist, dass für die Umsetzung SCSS verwendet wird. Einige der Probleme gibt es bei reinem CSS nicht, andere haben unabhängig davon ob ein Preprocessor verwendet wird Bestand. […]
BEM ist eine Methode zur Strukturierung von CSS Stylesheets. Was BEM im Detail ist und wo die Vorteile sind wird in diesem Artikel beschrieben.
Als Erstes die Basis – BEM steht für Block Element Modifier. Dabei handelt es sich um die drei Säulen der Benamung von Klassen im BEM Kontext. […]
Es gibt immer wieder den Anwendungsfall Bilder auszublenden. Wenn das Ausblenden mit display: none erfolgt gibt es den großen Nachteil, dass das Bild trotzdem vom Browser heruntergeladen wird.
Die folgende Idee kam mir beim Lesen des Artikels How CSS display:none Affects Images on Page Load. Dort werden zwei Lösungen für dieses Problem aufgezeigt:
Bilder sollen erst dann im DOM auftauc […]
Keyframes ist eine Erweiterung für Chrome (und weitere auf Chromium basierende Browser). Diese erlaubt es auf eine sehr einfache Art @keyframe zu erstellen.
Im ersten Schritt klickt man auf die Erweiterung. Dann muss man ein Element auswählen, welches man animieren möchte.
Man wählt beliebige Punkte auf der Zeitachse aus und definiert für diese die gewünschten Styles. […]
Wenn es darum geht Elemente anzuordnen ist Flex-box ein sehr mächtiges Werkzeug. Leider gibt es aber keine Möglichkeit zu bestimmen, welches Element das Letzte in einer Zeile sein soll.
Im folgendem CodePen sind 2 50%, 4 33% und 2 50% breite Elemente. Das Ziel ist es nach dem letzten 33% breiten Element einen Zeilenumbruch zu erzeugen. […]
