Zum Inhalt

Schlagwort: CSS

Teile von Elementen ausschneiden mit clip-path

Wenn es früher darum ging Teile von Elementen auszuschneiden hat man oft zum Pseudo-Element als Lösung gegriffen. Dabei hat man die Pseudoelemente an den ausgeschnittenen Stellen platziert und in der Hintergrundfarbe eingefärbt.

Bei dem oben beschriebenem Vorgehen entstehen jedoch mehrere Probleme.

Die Pseudoelemente können nicht anderweitig verwendet und es gibt nur 2 Elemente. Die Ausschnitte müssen müssen mittels Rechtecken mit abgerundeten Kanten abgebildet werden kön […]

Einheitliche Animationen erstellen

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.

SASS Variablen

Die erste Möglichkeit sicherzustellen, […]

Teaser vollflächig verlinken

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

Das Problem bei diesem vorgehen ist es, dass Links auch im Teasertext vorkommen können oder sogar sollen. […]

Farben benennen

Umgefärbte Ananas
Photo by davisco on Unsplash

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.

Wofür überhaupt benennen?

Beim Erstellen von Webseiten arbeitet man oft mit Preprozessoren wie SASS und Less. […]

Linkanimationen mit BEM und SCSS

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, […]

Transparenz in Farbverläufen

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 &#8 […]

BEM Techniken im Detail

BEM Quellcodeausschnitt
BEM Quellcodeausschnitt

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 Grundlagen

BEM Quellcodeausschnitt
BEM Quellcodeausschnitt

BEM ist eine Methode zur Strukturierung von CSS Stylesheets. Was BEM im Detail ist und wo die Vorteile sind wird in diesem Artikel beschrieben.

Wofür steht BEM?

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. […]

Ausgeblendete Bilder nicht laden

Gallerie
Photo by Eric Park on Unsplash

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 vorgestellt

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. […]