PNG-Bilder statt JPG und GIF?

Darstellung überprüfen, weitere Beispiele

  1. Bildformate neu entdecken
  2. Tricks mit PNG
  3. Darstellung überprüfen, weitere Beispiele
#footer_2 {
background: url(footer_2.png) 0 0
no-repeat;
width: 900px;
margin: 95px auto 0;
height: 91px;
}

Für diese Art der Platzierung geben Sie die angenommene Breite in Pixel für Ihre Webseite an, damit die Platzierung entsprechend erfolgen kann. Da das Hintergrundelement 900 Pixel breit ist und sich die Positionierung daran anlehnt, wird die Breite analog gewählt.

Unser Beispiel war nur eine abstrakte Spielerei, im täglichen Einsatz können Sie jedoch Ihre Webseite so gestalten, dass Sie am unteren Ende beispielsweise Kontaktdaten, Impressum und weiterreichende Links platzieren. Eine Sammlung an Beispielen von Footern, die auf CSS und oftmals auch auf PNG basieren, finden Sie hier.

Durch die freie Kombination der beiden Elemente haben Sie auch mehr Flexibilität in der Gestaltung. Sind beide bereits im Vorfeld über ein Grafikprogramm zu einer Einheit verschmolzen worden, müssen Sie bei der Neugestaltung das komplette Design wieder anpassen. In diesem Beispiel genügt es, eine der beiden Dateien auszutauschen und gegebenenfalls die Positionierung der Elemente zu überprüfen.

Darstellungsprobleme

Gerade mit älteren Browsern gibt es massive Darstellungsprobleme im Zusammenhang mit PNG und der Transparenz der Bilder. Nutzen Sie einen der aktuellen Browser, lassen sich diese Probleme für Sie nicht mehr nachvollziehen. Damit Sie sichergehen können, dass Ihre Darstellung korrekt arbeitet und der Hack für den Internet Explorer bis Version 6 auch wie geplant funktioniert, sollten Sie dies vorab prüfen.

Da sicherlich nicht mehr alle eine alte Version des Browsers parallel installiert haben, bietet sich die Nutzung eines Dienstes, wie Browsershots an. Mit diesem können Sie die Interpretation der Webseite simulieren.

Das Tool arbeitet die Darstellung der URL über alle angegebenen Browser ab und fertig jeweils einen Screenshot an. Dieser wird anschließend ausgegeben. Abhängig von der Anzahl der ausgewählten Browser kann die Bearbeitung bis zu einer Stunde dauern.

Beispiele und Ideen

Diese Beispiele mit PNG-Grafiken lassen sich noch beliebig ausbauen. Auf der Webseite von Self-HTML finden Sie ein Beispiel, in dem mithilfe von CSS und PNG-Dateien sowohl am oberen, als auch am unteren Ende des Fensters eine Art Vorgang platziert wurde und der Bereich dazwischen für die Darstellung von Text verwendet wird (aktuell.de).

Auch für die Navigation lassen sich PNG-Grafiken gut einsetzen. Auf der Webseite von Creative Pro wird erläutert, wie Sie mithilfe von CSS und PNG eine ansehnliche Navigation darstellen können (www.creativepro.com).

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…