Wenn HTML und CSS nicht ausreichen um bestimmte Bildeffekte auf einer Website zu erzielen, so kann eine Grafik das rettende Mittel sein.
Dies gilt zum Beispiel für Schatteneffekte.
Hinweis:
Dieser Tipp ist eine Coproduktion mit Friedhelm von meiner Partnerseite. Die Einzelheiten dazu, wie Du Farbverlaufsgrafiken wie den Röhrenbalken in Deine Webseite einbinden kannst, findest Du in Friedhelms CSS-Fundgrube anschaulich erklärt. Ein Besuch lohnt sich!
Auf Friedhelms Seite zum Webdesign mit Farbverlaufsgrafiken siehst Du wenn Du ein wenig nach unten scrollst eine "Röhrenüberschrift". Eine solche Röhrenüberschrift über die gesamte Webseite gezogen und mit einem dezenten nach unten gerichteten Schatten versehen, kann das Ganze so richtig zur Geltung bringen:
Wie erstellst Du einen solchen Röhrenbalken in PI?
Es reicht eine Grafik aus, die lediglich 1 Pixel breit ist. Wegen der besseren Erkennbarkeit arbeiten wir hier jedoch mit einer Grafikbreite von 30 px.
Die Höhe der Grafik richtet sich danach wie hoch die Balkenüberschrift sein soll, im obigen Beispiel sind das ebenfalls 30 px. Da wir zunächst nur den Balken erstellen wollen, also ohne den Schatten darunter, öffnen wir eine neue Leinwand in der Größe 30x30 px. Diese füllen wir mit einem Farbverlauf von oben nach unten, wie im Screenshot zu erkennen:
Als Ergebnis erhalten wir (nur für die bessere Erkennbarkeit mit Rahmen versehen):
Diesen Schritt nicht vergessen:
Wir benötigen den Farbverlauf für einen späteren Arbeitsschritt als Objekt. Deshalb schneide ihn aus und füge ihn sogleich wieder in die Leinwand ein. Du hast den Farbverlauf jetzt vom Hintergrund gelöst, was Du an der tänzelnden Linie um das Objekt herum erkennen kannst
Als nächstes muss die Arbeitsfläche vergrößert werden, damit noch der Schatten Platz hat.
Deshalb erweitere die Leinwand nach unten hin um ein paar Pixel. Sei dabei nicht zu sparsam, denn alles, was nachher zuviel an Leinwand vorhanden ist kann entfernt werden. Als Hintergrund für die Erweiterung wählst Du die Hintergrundfarbe Deiner Webseite:
So in etwa müsste es jetzt bei Dir aussehen (Dein Objekt, der Farbverlauf, ist immer noch aktiviert!):
Vollziehe einen Rechtsklick auf das Objekt und gebe ihm einen Schatten, zum Beispiel mit diesen Einstellungen, wobei Du als Schattenfarbe zur Unterstützung der Farbintensität auch einen dunklen Violett-Ton wählen könntest:
Schließlich schneide die Leinwand mit dem "Zuschneidewerkzeug" zurecht und entferne so den überschüssigen Teil am unteren Bildrand (hier ca. 10 px). Hauptsache dabei ist, dass der gesamte Schattenbereich auf der Leinwand verbleibt! Als Ergebnis erhälst Du eine Farbverlaufsgrafik, die nur noch in Deine Webseite eingebaut werden muss:
roehrenbalken.jpg
