CSS

CSS

Es wird bunt: 20+ kostenlose Vorlagen und GUIs in HTML, CSS und PSD aus dem Oktober 2014

30. Oktober 2014
von
Es wird bunt: 20+ kostenlose Vorlagen und GUIs in HTML, CSS und PSD aus dem Oktober 2014

In zwei Monaten ist schon Weihnachten. Aktuell schmückt sich die Welt mit bunten Farben, stellenweise fallen schon die Blätter. Es ist eine Zeit radikalen Wandels, die jedenfalls mich immer wieder inspiriert, es der Natur nach zu tun. Wenn Ihnen auch danach ist, finden Sie in unserer neuesten Sammlung der besten kostenlosen Vorlagen und GUIs in HTML, CSS und PSD bestimmt auch genug Material. Mein...

Weiterlesen »

CSS

Sequence.js: Responsiver Content-Slider mit CSS3-Transitions und Gestensteuerung

18. September 2014
von
Sequence.js: Responsiver Content-Slider mit CSS3-Transitions und Gestensteuerung

Plug-ins für Content-Slider findet man wie Sand am Meer. Viele dieser Slider unterstützen auch CSS3-Transitions für Animationen und sind zum Teil responsiv gestaltet. Sequence.js ist dennoch eine Besonderheit unter den Content-Slidern. Denn dieses JavaScript ermöglicht nicht nur einen animierten Wechsel der einzelnen Slides. Auch die einzelnen Inhalte der Slides – Überschriften, Bilder etc. – können beim Wechsel animiert eingeblendet werden. Und wie es sich...

Weiterlesen »

CSS

SVG-Fallback für ältere Browser: Tipps zur alternativen Auszeichnung ohne JavaScript

12. September 2014
von
SVG-Fallback für ältere Browser: Tipps zur alternativen Auszeichnung ohne JavaScript

Das SVG-Format wird mittlerweile von allen gängigen Browsern unterstützt. Es ist vor allem der Internet Explorer, der in älteren, leider aber immer noch verwendeten Versionen Probleme macht. Da er das SVG-Format nicht kennt, müssen Alternativen wie PNG oder JPEG als Fallback her. Zwar gibt es per JavaScript Möglichkeiten, für bestimmte Browser alternative Dateien einzubinden – für JavaScript-Verweigerer ist das jedoch keine Option. Außerdem gibt...

Weiterlesen »

CSS

CSS3-Background-Blends: Überblendungseffekte wie mit Photoshop, aber in purem CSS3

19. August 2014
von
CSS3-Background-Blends: Überblendungseffekte wie mit Photoshop, aber in purem CSS3

Seit CSS3 ist es möglich, mehrere Hintergründe auf ein Element anzuwenden. Dabei werden diese Hintergrundgrafiken oder -farben einfach übereinander gelegt. Sind Transparenzen innerhalb der Hintergründe vorhanden, sorgen sie dafür, dass der darunter liegende Hintergrund hindurchscheint. Mit den neuen CSS3-Überblendungseffekten gibt es nun weitere Möglichkeiten, mehrere Hintergründe miteinander zu kombinieren. Hintergründe anlegen und Effekt auswählen Zunächst einmal müssen mehrere Hintergründe per „background“-Eigenschaft angelegt werden. Sollen...

Weiterlesen »

CSS

HTML5: Native Dialogfenster mit dem neuen Dialog-Element

14. August 2014
von
HTML5: Native Dialogfenster mit dem neuen Dialog-Element

Die neuen HTML5-Elemente und JavaScript-APIs ermöglichen es, komplexe Anwendungen für den Browser zu entwickeln. Dazu gehören ganz häufig auch Dialogfenster, über die Nutzer das Ausführen von bestimmten Handlungen bestätigen müssen oder die einfach eine Meldung ausgeben. Mit dem neuen „<dialog>“-Element lassen sich solche Dialogfenster zukünftig nativ per HTML5 auszeichnen. Einfache Auszeichnung ohne Stylesheets möglich Das „<dialog>“-Element kann an beliebiger Stelle im HTML-Body platziert werden....

Weiterlesen »

CSS

HTML5: zeitgemäße Rasterlayouts mit CSS-Grids

18. Juli 2014
von
HTML5: zeitgemäße Rasterlayouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen. Die einfache Einteilung eines Weblayouts in Zeilen und Spalten war mit CSS nicht mehr möglich. Mit...

Weiterlesen »

Animationen

Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

9. Juni 2014
von
Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

Seit CSS3 sind Animationen in HTML-Dokumenten kein Problem mehr. Mit der „@keyframes“-Regel werden verschiedene Eigenschaften wie Position oder Größe eines HTML-Elementes definiert. Die dazugehörige „animation“-Eigenschaft sorgt dafür, dass die in den Keyframes festgelegten Eigenschaften in Bewegung geraten. Ganz ohne JavaScript und Plug-ins erstellen Sie so auch durchaus komplexe Animationen, die in allen modernen Browsern problemlos laufen. Problematisch wird es, wenn JavaScript ins Spiel kommen...

Weiterlesen »

CSS

CSS3: Viewport Units – Neue Einheiten für responsive Designs

3. Juni 2014
von
CSS3: Viewport Units – Neue Einheiten für responsive Designs

Dank prozentualer Angaben ist es ein Leichtes, Webdesigns zu entwickeln, die sich der Breite und bei Bedarf auch der Höhe des Browserfensters anpassen. Gerade wenn es darum geht, eine Website für verschiedene Medien wie Tablets und Smartphones zu entwickeln, ist dies eine gängige Praxis. Textblöcke, Bilder und andere Elemente passen sich so automatisch jeder Größe an. Doch Angaben in Prozent sind nicht immer angebracht,...

Weiterlesen »

CSS

Magic.css: CSS3 Animations mit Spezialeffekten

21. Mai 2014
von
Magic.css: CSS3 Animations mit Spezialeffekten

Seit Juli letzten Jahres arbeitet Christian Pucci aka miniMac an seinem Stylesheet mit Spezialeffekten auf Basis von CSS3 Animations. Konnte er zum Start lediglich eine Handvoll vorweisen, bringt es seine Sammlung mittlerweile auf stattliche 55 Effekte, die komplett geprefixed in allen modernen Browsern funktionieren. Das Projekt steht unter MIT-Lizenz, kann also frei verwendet werden. Magic.css: Viel Bewegung auf der Website CSS3 Animations sind im...

Weiterlesen »

CSS

The CSS Animations Pocket Guide: Kostenloser denn je

18. Mai 2014
von
The CSS Animations Pocket Guide: Kostenloser denn je

Der Verlag Five Simple Steps hängte im letzten Monat abrupt sein Geschäft an den berühmten Nagel. Ein einfacher Tweet und schon war’s vorbei. Übergangsfristen gab es keine. Immerhin waren die gescheiterten Verleger nett genug, unverzüglich alle Rechte an den eingereichten Werken an die jeweiligen Autoren rückzuübertragen. Darüber freute sich unter anderem Val Head, die Autorin des kleinen Ebooks "The CSS Animations Pocket Guide". Flugs...

Weiterlesen »