1. Warum ich Flexbox-Fan bin? Vorkonfektionierte Frameworks wie das Responsive Grid System, xy.css, pure.css, Bootstrap oder UIkit haben sicher ihre Vorteile, sind aber in der Nutzung nicht immer supereinfach, Außerdem bin ich – und der/die ein oder andere Leser/in – immer daran interessiert, alles (1) "from scratch" und (2) ganz alleine selber zu machen. Und von Grund auf verstehen, was da eigentlich passiert – oder daran verzweifeln und am Ende […]
Zu Beginn wieder eine Spielerei 🙂 Rakete! Via jQuery wird über den Button eine Klasse zweier Container (für die Rakete und den Hintergrund) getoggelt, bei denen die Position mittels CSS Transition animiert wird. Es gibt aber auch sinnvolle Beispiele, z.B. beim Button-Design: Auch hier auf der Seite wird übrigens der Menü-Button via toggleClass() und CSS Transitions animiert: Und das geht "recht einfach": Der Button besteht lediglich aus zwei divs, einem […]
CSS-Filter sind Manipulationen an Texten oder Bildern ist eine "nicht-destruktive" Veränderung. Das "Original" wird also nicht verändert, sondern lediglich in der Ausgabe (hier dem Rendering des Browsers) nach entsprechenden Vorgaben angezeigt. Bilder und Texte können mit folgenden Filtern versehen werden (alphabetisch): blur() – Weichzeichnen brightness() – Helligkeit ändern contrast() – Kontrast ändern drop-shadow() – Schlagschatten grayscale() – Graustufen hue-rotate() – "Farbtonrotation" invert() – Umkehren opacity() – Deckkraft saturate() – Sättigung […]
Ein erstes "reines CSS"-Beispiel – eine nette Spielerei: Los / Zurück Dieses Anwendungsbeispiel verwendet unprefixed transitions. Funktioniert nicht in Internet Explorer 9 (oder älter) und nicht in Oprea mini. Vgl. https://caniuse.com/#search=transitions Hier verwende ich übrigens eine unsichtbare Checkbox, die mit dem (als Button gestylte) Klick / Tap auf das Label de-/aktiviert wird. Die Pseudoklasse :checked dient dazu, um das Folgeelement ~ #carway .car zu animieren. Hier die Codes: HTML <div […]
Bei dem Artikel zu CSS-Transitions ist mir mal wieder aufgefallen, wie selbstverständlich (sprich: altmodisch, da desktop-sozialisiert 🙂 ) man mit der Pseudoklasse :hover umgeht, obwohl doch Benutzer von Endgeräten mit Touchscreens nicht "hovern" können. Da aber irgendwas zwischen 30 und 50% aller Seitenaufrufe im Internet (je nach Quelle, Tendenz: steigend) von Mobilgeräten getätigt werden, ist das ein wenig vermessen – vor allem, wenn man den Anspruch hat, geräte-unabhängige Webseiten zu […]
Was sind Transitions und wem können sie zugewiesen werden? Transitions sind dynamische Änderungen von CSS-Eigenschaften. Diese können so manipuliert werden, dass weiche fließende Übergänge entstehen, welche wie Animationen wirken. Transitions sind nicht zu verwechseln mit CSS Animations und CSS Transformatios. Transitions können den meisten HTML-Elementen über CSS-Klassen oder -IDs zugewiesen werden. Dabei definiert man einen Wert einer CSS-Eigenschaft als Anfangs- und einen davon abweichenden Wert der gleichen Eigenschaft als Endpunkt […]
Die in der Überschrift angedeutete Anforderung kommt mir unter allem bei eingebetteten Videos unter. Daher bezieht sich das Beispiel auf diesen Anwendungsfall, lässt sich aber problemlos auf andere Anwendungen – z.B. im CMS/LMS hochgeladene Videos – übertragen. Problem: iframes mit fester Breite 🙁 Die "Teilen"-Funktion der gängigen Videoportale bietet auch immer die Möglichkeit an, die Videos in eine eigene Webseite einzubetten. Das ist toll, hat aber für den Designer einige […]
Den Anspruch "Footer immer unten" hat man vor allem, wenn man Seiten mit wenig Content hat. Konstruieren wir mal ein Beispiel. Ein gängiger Seitenaufbau nach dem Strickmuster "Header – Content – Footer" sieht ja oft in etwa so aus: HTML <html> <header> … </header> <section> … </section> <footer> … </footer> </html> Hier mal ein beispielhaftes Styling mit fixierter Kopfzeile: CSS body { font-family: Arial, sans-serif; margin:0; padding:0; background:#eee; } header […]
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Weitere InformationenSie sehen gerade einen Platzhalterinhalt von X. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen