Pipeline-Effekt

Fundgruben-Tipp: Bildeffekt 'Pipeline'


Wer ein Weblayout möchte, das nicht von der Stange ist, greift häufig zu einer seitenfüllenden Background-Grafik. Das hat seine Tücken, denn nicht jeder Besucher einer Website hat die gleiche Auflösung eingestellt wie der Webdesigner. So kann es vorkommen, dass die Background-Grafik entweder doch zu klein oder aber zu groß ist, und daher unschön abgeschnitten dargestellt wird. Ferner gilt zu bedenken, dass eine solche Grafik von der Dateigröße, und also von der Ladezeit, her recht unerfreulich sein dürfte.

Dank PI und CSS gibt es Alternativen!

Hinweis:

Dieser Tipp ist eine Coproduktion mit Friedhelm von meiner Partnerseite. Die Einzelheiten dazu, wie Du Grafiken wie die hier vorgestellte, in Deine Webseite einbinden kannst, findest Du in Friedhelms CSS-Fundgrube anschaulich erklärt. Ein Besuch lohnt sich!


Mit relativ einfachen Mitteln ist so etwas wie auf diesem etwas unscharfen Bildschirmausschnitt möglich:


Screenshot-Ausschnitt



Machen wir uns an die Arbeit!


Die reine mittels CSS zusammen gesetzte Grafik sieht in verkleinerter Form so aus:

Grafik


Und das sind die Einzelbilder, die es zu erstellen gilt:

Teilgrafik 1: Teilgrafik1Teilgrafik 2: Teilgrafik2


1. Teilgrafik

Öffne eine neue Leinwand in 160x165 px und fülle sie mit einem himmelblauen Farbverlauf:


Farbverlaufs-Einstellungen


Aus der Werkzeugpalette wählst Du das Pfad-Zeichenwerkzeug und ziehst damit einen 10 Pixel schmalen Balken in einer Erdfarbe (#ac9662) auf, der über die gesamte Breite der Leinwand reicht. Ordne diesen Balken unten an:


Leinwand mit Pfadobjekt


Lasse den Balken aktiviert und vollziehe einen Rechtsklick auf ihn. Verdoppele ihn über "Duplizieren". Nun ist dieser verdoppelte Pfad aktiviert und Du kannst ihn über "Bearbeiten" - "Füllen" mit einem Grasgrün (#387728) füllen.

Da auch dieses Pfadobjekt 10 px hoch ist kannst Du es über zehn Klicks auf die nach-oben-Pfeiltaste Deiner Tastatur pixelgenau über den erdfarbenen Streifen platzieren.


Leinwand mit 2 Pfadobjekten


Wähle erneut das Pfad-Zeichenwerkzeug und ziehe in dem gleichen Grün wie eben die "Benutzerdefinierte Form Fl09", ...

Pfadform wählen


... das Kleeblatt, auf. Platziere es auf der Leinwand. Fertig ist die Teilgrafik 1!


Teilgrafik 1kleeblatt.gif



2. Teilgrafik

Die zweite Teilgrafik schneidest Du einfach aus der ersten Teilgrafik aus. Hierzu lösche das Kleeblatt aus der Leinwand oder revidiere die letzten Arbeitsschritte über den Rückgängig-Pfeil bis das Kleeblatt verschwunden ist und nur noch der Farbverlauf mit dem grünen und Balken zu sehen sind.

Aus der Werkzeugpalette aktiviere das "Zuschneidewerkzeug" und schneide aus der Leinwand einen 10 px breiten Streifen heraus. Achte dabei darauf, dass der Ausschnitt sich nicht auch von der Höhe her verändert, da es sonst später zu einer verzogenen Gesamtgrafik kommt:


Leinwand zuschneiden


Fertig ist auch die Teilgrafik 2!


Teilgrafik 2konsole.gif



Wie Du die Teilgrafiken mittels CSS zum Beispiel zu einem schmucken Header in Deine Homepage einbaust, erklärt Dir Friedhelm in seiner CSS-Fundgrube!



... Hier geht's nach oben !


... Zur Inhaltsübersicht der PI-Fundgrube !

PI-Miniaturmalereien