Beiträge im Jahr 2014

CSS-Quicktipp: Tabs in HTML

Tabs in HTML

Im Textverarbeitungsprogramm Word erreicht man durch Tabs, dass einzelne Textteile untereinander stehen. Gerade hatte ich ein ähnliches Problem bei einer Webseite: Auf einer Webseite gab es die Texte „E-Mail: emailadresse@example.com“  und darunter „Telefon: 012-3456789“;  wobei die Telefonnummer und die E-Mail-Adresse exakt untereinander stehen sollten. In Word ist das ein klassischer Fall für Tabs, in HTML gibts es allerdings so etwas wie Tabs nicht. Wie lässt sich trotzdem die gewünschte Darstellung erreichen? Wenn man mehrere solcher Zuordnungen hat, dann ist das ein klarer Fall für eine Tabelle – aber nur für zwei Zeilen schien mir das zu aufwändig. Weiterlesen

Präfixe in CSS3 – die wichtigsten Basics

CSS3-Präfixe

CSS3-Code zu schreiben, heißt in vielen Fällen auch, den Code zu doppeln mit Angaben wie -webkit- oder -ms- oder -moz-. Was es genau damit auf sich hat und wie man diese Präfixe richtig verwendet – oder sich auch dabei helfen  lässt – zeige ich in meinem  Video „Präfixe bei CSS3-Eigenschaften“.

 

Weiterlesen

CSS3-Animationen debuggen

Firefox Nightly

Letztens habe ich eine Möglichkeit gesucht, CSS3-Animationen im Browser zu debuggen – und bin in den gängigen Entwicklertools nicht so recht fündig geworden. Um so erfreulicher fand ich es, als ich jetzt im Firefox Nightly die neuen Möglichkeiten entdeckt habe (ausprobiert habe ich es im Firefox Nightly 34.0a1).

Weiterlesen

CSS3-Media Queries für Einsteiger

Die wichtigste Komponente des Responsive Webdesign sind die CSS3-Media Queries. Damit kann man je nach Größe des Viewports dem Browser andere CSS-Angaben servieren. Einen Einstieg in Aufbau und Funktionsweise von Media Queries bietet das folgende Video aus meinem Videotraining Responsive Webdesign – das große Training von video2brain.

Weiterlesen

Quicktipp: Hoverzustand in Entwicklertools untersuchen

Hover

Wenn man die Formatierungen, d.h. den CSS-Code, von Websites untersucht, möchte man oft auch den Hoverzustand von Links genauer betrachten. Auch das ist bei den gängigen Browser-Entwicklertools möglich. Die entsprechenden Optionen versteckt sich aber an unterschiedlichen Stellen.

Weiterlesen

CSS3-Blendmodi für Bildüberlagerungen – und Alternativen

Bildüberlagerung

Im Artikel von Opera zu den Blendmodi gibt es schöne Beispiele für die CSS3-Blendmodi: Bilder werden über Blendmodi verfremdet und beim Hovern sieht man das Bild im Normalzustand. (http://dev.opera.com/articles/getting-to-know-css-blend-modes/demo_blendmodes_tile.html). Ich habe den Effekt einmal nachgebaut und dann überlegt, wie sich ähnliche Effekte ohne CSS3-Blendmodi (mix-blend-mode funktioniert derzeit nur im Chrome/Opera mit dem Flag, im Safari ab 7.1 oder in Firefox ab Version 32) erreichen lassen. Das Ziel ist dabei immer, Bilder mit einer Farbebene zu überlagern, ohne dass die Bilder von Haus aus so verändert werden. Weiterlesen

mix-blend-mode für schöne Texteffekte – Bilder und Text mischen (CSS3)

will-it-blend

Neben background-blend-mode zum Mischen von Hintergründen existiert in CSS3 die Eigenschaft mix-blend-mode. Diese Eigenschaft dient nicht zum Mischen von Hintergründen, sondern zum Vermischen von Eltern- und Kindelementen. So kann man beispielsweise mix-blend-mode für Texteffekte nutzen, bei denen der Text mit dem Hintergrund verwoben ist. Weiterlesen