animation mit @kreyframes und mehreren Hintergrundbildern

Heute habe ich als Kombination der Eigenschaft backgrounds bzw. mehrere Hintergrundbilder (multiple backgrounds) und den @keyframes Animationen eine weitere kleine Variation meiner ersten Animation erstellt. 🙂

Hier wechseln alle 3 Hintergrundbilder ihre Position. Zudem werde ich im nächsten Schritt noch Text und weitere Grafiken einfügen, um dann als “Endziel” einen animierten CSS3.de Banner zu haben.

 
Weiterlesen

CSS3 – multiple backgrounds – noch ein Anwendungsbeispiel

Ja, noch ein Beispiel für die Anwendung der Eigenschaft background und der Möglichkeit, mehrere Hintergrundbilder für ein HTML-Element zu verwenden. Und ich fürchte schon jetzt, das es nicht das letzte Beispiel bleiben wird. Es macht einfach Spass. Einerseits mit CSS3 die Bilder zu arrangieren, andererseits aber auch, mit den Fotos zu spielen, sie freizustellen, etc.

Das Spielen und Wiederholen übt in der Anwendung. Welches Bild überlagert warum das andere, welche Positionen sind am sinvollsten, usw.. Erst dann, wenn man das Gefühl dafür hat, macht es Sinn weitere Eigenschaften wie background-size etc. ins Spiel zu bringen.

Ob ich das so auf einer “live”-Webseite anwenden würde, ist sicher eine andere Frage, als Übung, um sich mit der Technik anzufreunden, ist es perfekt. Für Startseiten oder “Baustellenseiten” brauche ich sowieso immer Vorlagen.

Link zur Beispielseite

multiple backgrounds

multiple backgrounds

Gerne schaue ich mir auch eure Anwendungsbeispiele an. Zeigt her, eure … Beispiele.

mehrere Hintergrundbilder – Anwendungsbeispiele

Mit der background Eigenschaft in CSS3 und mehreren Hintergrundbildern lässt sich prima spielen! Hier ist Phantasie gefragt und grafisches Verständnis. Beides nicht unbedingt Bereiche in denen ich richtig glänzen kann, dennoch habe ich heute einmal zwei recht einfache Beispiele mitgebracht.

Schaut euch den Quelltext an (ich habe die Style-Angaben in die HTML-Datei geschrieben), 2 recht einfach und schnell umzusetzende (Start-)Seiten.

Im ersten Beispiel habe ich insgesamt 3 Hintergrundbilder verwendet, die ich teilweise vorher freigestellt hatte. Mich, den Mond und den Rasen. Der Esel nennt sich immer zuletzt, ich weiss, aber ich habe das hier extra so geschrieben, weil die Bilder auch tatsächlich so angeordnet sind und das zuletzt genannte von den anderen bei Überschneidung überlagert wird.

http://www.css3.de/spielwiese/background/001/index.html

spielwiesse-001

Im zweiten Beispiel habe ich nur 2 Hintergrundbilder benutzt, dafür zusätzlich die Eigenschaft “transform” für den Text recht unten “hochkant”:

den “I-Punkt”:
i-punkt

und den “Tapetenhintergrund”:
bg

http://www.css3.de/spielwiese/background/002/index.html

spielwiesse-002

Da ist viel Potential drin. Bringt man zu den multiple backgrounds eigene Grafiken und auch noch andere nette CSS3-Eigenschaften ins Spiel, hat man schnell eine individuelle Seite, die man toll z. B. als Startseite etc. benutzen kann.

Und das “coole” an der Sache: es macht auch noch Spass!

CSS3 – mehrere Hintergrundbilder für ein HTML-Element

Mit CSS3 ist es möglich, mehrere Hintergrundbilder für ein HTML-Element zu definieren. Die Vorgehensweise dabei? Eigentlich die gleiche, wie man ein einzelnes Hintergrundbild definieren würde, außer das man nun die verschiedenen Hintergrundbilder (und ggf. die Werte zusätzlicher Eigenschaften) mit einem Komma (“,”) trennt.

Also statt “normal” (ein HG-Bild):
background: url(image) no-repeat top left;

verwendet man z. B.:
background: url(image1) no-repeat top left, url(image2) no-repeat bottom left, url(image3 no-repeat top right, url(image4) no-repeat bottom right;

oder, wenn man nicht die Kurzschrift benutzt:
background-image: url(image1, url(image2), url(image3), url(image4);
background-repeat: no-repeat;
background-position: top left, bottom left, top right, bottom right;

Ist hierbei eine Eigenschaft nur einmal aufgeführt, gilt sie für alle angesprochenen Hintergrundbilder.

In der Reihenfolge liegen die Bilder, wie sie in der Eigenschaft aufgeführt sind, will sagen, das zuerst Genannte liegt oben und überlagert alle anderen bei Überschneidung, das an zweiter Stelle genannte darunter, (…) das Vierte ganz unten. Hier eine Grafik dazu:

multiple-background

Natürlich habe ich auch wieder ein Demonstrationsbeispiel angelegt:

CSS3 – mehrere Hintergrundbilder für ein HTML-Element

CSS3 background linear-gradient, Linearer Farbverlauf

Das Thema “lineare Farbverläufe” soll heute nocheinmal kurz aufgegriffen werden. Am Wochenende hatte ich mir ja schon einige Seiten zu diesem Thema, wie ja z.B. den CSS Gradient Generator von ColorZilla, angeschaut, von einigen anderen werde ich sicher noch berichten. Richtig beeindruckt, im Sinne, was technisch möglich ist, hat mich aber Lea Verou und ihre Seite mit Beispielen zu CSS3 Mustern (engl.: patterns). WOW! Nicht, das ich alle Muster gleich als Hintergrund für eine Webseite nutzen wollte, aber … genial, was geht!

In ihrem Beitrag auf 24ways.org css3 patterns explained beschreibt sie detaillierter die Funktionsweise von linearen Farbverläufen.

Hier sind meine ersten Übungsbeispiele, als ich dem Beitrag entsprechend gefolgt bin. Auf jeden Fall macht das Spass und weckt den “Spieltrieb”.

Für CSS3 Übungen macht es sicherlich grundsätzlich Sinn, sich z. B. prefix-free (da wir ja gerde bei Lea Verou sind …) zu laden und einzubinden. Das hält den CSS Code schlank und wesentlich übersichtlicher. Solch ein Script lädt zur Laufzeit, also beim Laden der Webseite, die für den gerade benutzten Browser (unter Umständen) benötigten prefix-Eigenschaften (-moz-, -webkit-, -o-). Darüber, ob man solch ein Script im Echtbetrieb einer Webseite nutzen sollte, streiten sich die Gemüter derweil. Ich habe das prefix-free-script hier an dieser Stelle nur für diesen einen Beitrag eingebunden.

Trotzdem, es klappte bei mir nicht alles auf Anhieb, erstaunlicher Weise zickte mein firefox (18.0.2) etwas rum.

Weiterlesen