Florence Maurice

Webthemen

Ausschneiden mit CSS3 - clip-path

sternförmig ausgeschnittenes Bild

Bilder im Web sind im Prinzip eckig ... das ändert sich glücklicherweise mit dem CSS-Masking-Module.

Das CSS Masking Module Level 1 ist am 26. August 2014 in den Status einer Candidate Recommendation erhoben worden - und das W3C fordert zu Implementierungen auf. Der richtige Zeitpunkt, das einmal genauer unter die Lupe zu nehmen ...

Weiterlesen ...

CSS3: Hintergrundbilder skalieren - so geht's

Bei manchen CSS3-Eigenschaften kann man sich fragen, ob sie sinnvoll sind oder nicht.

Das Skalieren von Hintergrundbildern über background-size ist aber eindeutig ungeheuer praktisch. Wie es geht und welche Optionen zur Verfügung stehen, zeige ich in einem kleinen Video.

Weiterlesen ...

CSS3-Farbverläufe mit background-image oder background?

Soll man für CSS3-Farbverläufe die Eigenschaft `background-image` oder `background` verwenden? Es funktioniert prinzipiell beides:

Weiterlesen ...

CSS-Quicktipp: Tabs in HTML

email: XX und Telefon: XX. Email und Telefon sind untereinander und nach einem Abstand die E-Mail-Adresse und die Telefonnummer

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 ...

Hintergrundbilder mit halbtransparenten Farben überlagern

ein Bild normal, das andere mit halbtransparenter Farbe überlagert

Letztens habe ich eine Möglichkeit gesucht, Hintergrundbilder mit einer Farbe zu überlagern. Eigentlich dachte ich, das müsste ganz einfach gehen - aber von Anfang an.

Weiterlesen ...

CSS3-Animationen debuggen

Blaue Weltkugel

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 ...