Webdesign-Tutorials

Bild mit transparentem Hintergrund erstellen

Bilder sind in der Regel viereckig. Handelt es sich um ein “freigestelltes” Bild oder Button, ist es oft sinnvoll, den eigentlich ungewollten Hintergrund transparent zu gestalten, anstatt ihn mit der darunterliegenden Hintergrundfarbe zu füllen. Vorteile sind, dass bei einem Farbwechsel des Hintergrundes das entsprechende Bild nicht angepasst werden muss und keine Farbabweichungen bei unterschiedlichen Browsern zu sehen sind.

Im kostenlosen Grafikbearbeitungsprogramm GIMP kann man ein Bild folgendermaßen mit einem transparenten Hintergrund versehen:

Bild in GIMP laden

Rechtsklick auf das Bild > “Ebene” > “Transparenz” > “Alphakanal hinzufügen“.

Nochmaliger Rechtsklick auf das Bild > “Auswahl” > “Nach Farbe auswählen”

Linksklick auf das Bild an einer Stelle, an der die Hintergrundfarbe zu sehen ist (Der freizustellende Bildanteil ist nun gestrichelt umrandet)

Rechtsklick an gleicher Position (auf der zu löschenden Hintergrundfarbe) > “Bearbeiten” > “Löschen” (Die ursprüngliche Hintergrundfarbe verschwindet und statt dessen erscheint ein Karomuster)

Bild speichern, und zwar als GIF oder PNG, weil nur diese Formate Transparenz unterstützen.

Dieses Verfahren klappt natürlich nur, wenn der Hintergrund aus genau einer Farbe besteht. Falls dem nicht so ist, ist die Hintergrundfarbe vorher unifarben zu gestalten (z.B. durch Ausmalen oder Radieren).

Schrift per CSS als Großbuchstaben anzeigen lassen

Ein einfaches Mittel, um Buchstaben (z.B. innerhalb eines H1-Tags) unabhängig von der Schreibweise im HTML-Code ausschließlich als Großbuchstaben anzeigen zu lassen, ist die Formatierung mittels CSS:

text-transform:uppercase;

Einrückung und Aufzählungszeichen bei unsortierten Listen

Die Unsortierte Liste ist mit Default-Werten versehen, die die Einrückung und das Aufzählungszeichen der Listenpunkte (list items) definieren. Einen einfacher Weg, die Formatierung selbst in die Hand zu nehmen, stellt folgende CSS-Anweisung dar:

ul { list-style-image: url(‘images/ul.png’); margin: 0; padding-left: 20px; }

Mit den Margin- und Padding-Werten werden die Default-Werte überschrieben. Die Angabe eines Padding-Lefts sichert den Platz für die Darstellung des Aufzählungszeichen. Das Aufzählungszeichen, in diesem Fall als PNG-Datei im Ordner /images abgelegt, kann nun ebenfalls beliebig gestaltet werden.

Ladereihenfolge von Bildern

Die Ladereihenfolge einer Webseite ist die folgende:

1. HTML
2. CSS
3. Grafikdateien, die aus dem Quelltext aufgerufen werden
4. Grafikdateien, die aus CSS aufgerufen werden

Ruft man über den HTML-Code größere Bilder auf, werden diese vor den CSS-Hintergrundbildern geladen und angezeigt, was unschön aussehen kann. Gegebenenfalls kann man die Bilder vorabladen lassen. Einmal geladene Bilder werden im Browser-Cache des Besuchers gespeichert und stehen dann zur Verfügung, ohne neu vom Server geladen werden zu müssen. Bilder können auf vorgelagerten Seiten vorgeladen werden, indem man

-ihnen das CSS-Attribut “invisible” oder ”visible:none” zuweist,
-Breite und Höhe auf 0 oder 1 Pixel setzt,
-die Bilder in einem Div (Layer) aufruft, der mithilfe des z-indexes (Stapelreihenfolge) von einem anderen Container komplett verdeckt wird.

Wenn seiteninterne Links an die falsche Stelle springen

Falls der Browser beim Anklicken eines seiten-internen Verweises an die falsche Stelle springt, überprüfen Sie, ob Sie nicht ein Div/Span den selben Namen wie dem Anker gegeben haben. Der Mozilla Firefox springt sonst zu diesem Element, anstatt zum gewünschten Anker.

Default-Werte bei Überschriften

Einige HTML-Tags sind von Haus aus mit vordefinierten CSS-Eigenschaften belegt. Dies kann einem zu schaffen machen, wenn man es gerne selbst in der Hand hat, wie eine Webseite aussehen soll. Wir kennen das alle von Links, die immer blau und unterstrichen sind, falls man die Default-Werte nicht mit anderen Werten überschreibt.

Die H1-Überschrift hat z.B. folgende Default-Eigenschaften:
font-size: 2em;
margin: .67em;
font-weight:bolder;

Die bolder-Eigenschaft kann übrigens dazu führen, dass die Schrift verwässert aussieht (nur bei bestimmten Schriftarten). Ausserdem sind Überschriften als Block-Element definiert, so dass stets (vereinfacht gesagt) ein “Zeilenumbruch” hinter der Überschrift erfolgt.

Wollen wir den Umbruch verschwinden lassen, definieren wir im CSS-StyleSheet:

h1 { display:inline; }

Genauso können wir die anderen Standard-Eigenschaften überschreiben:

h1 { display:inline; margin: 0px; font-weight:normal; }

P.S.: Natürlich können verschiedene Browser unterschiedliche Default-Werte aufweisen.