""

Um die Hintergrundfarbe einer HTML Tabellenzeile mit einer Farbe zu versehen, hilft CSS. Für eine gute Lesbarkeit kann es aber gerade bei längeren Tabellen hilfreich sein, die Zeilen unterschiedlich zu färben: So kann man zum Beispiel jede zweite Zeile einfärben, um das Lesen zu erleichtern.   Tabellenzeile abwechselnd automatisch färben Das Auswählen und Färben der HTML Tabelle geht ganz einfach, indem man zum Beispiel jeder ...

Transparenter iFrame - Dafür ist er praktisch: Mit einem transparenten iFrame kann man den Inhalt einer anderen Webseite in die aktuelle Seite einbetten. Ein vorhandenes Hintergrundbild der eigentlichen Webseite ist dabei weiter zu sehen: Da der iFrame mit dieser Methode transparent, also ohne Hintergrundfarbe, ist, sieht man die unten liegende Webseite durch. Hat diese Webseite ein Hintergrundbild (oder andere hinter dem iFrame liegende Elemente), sieht man diese durch: Sie werden nur verdeckt, wenn der iFrame ...

Mit dem CSS Attribut "transition" lassen sich weiche Übergänge und auch CSS Animationen erzeugen: Durch die CSS Transition werden Zwischenwerte zwischen zwei Zuständen berechnet und angezeigt. Mit dem Attribut "visibility" geht das aber nicht: Visibility kann nur "visible" oder "hidden" sein: Es gibt keine Zwischenwerte. Um trotzdem ein sanftes Ein- und Ausblenden den Elementen per CSS Transition zu ermöglichen, muss man statt dem Attribut "visibility" den Wert von "opacity" nutzen: Damit lässt sich die Sichtbarkeit (oder ...

Ein Hintergrundbild muss nicht zwingen ein schönes Foto sein, das tatsächlich im Hintergrund angezeigt wird: Stattdessen lässt sich mit der CSS Eigenschaft "background-image" auch ein Button erstellen: Dies ist zum Beispiel ein klickbares DIV Element, dass statt einem IMG Bild ein Hintergrundbild enthält. Das muss aber nicht zwingend den ganzen Bereich ausfüllen, sondern kann auch als ein Icon mittig in dem Element platziert werden: Das ist mit einem als IMG eingebundenen Bild schon nicht mehr ganz ...

Wer Webseiten mit HTML und CSS programmiert, kennt das Problem bestimmt: Wenn man die Größe eines Elements mit "width" und "height" angibt, werden die Werte für den Rahmen "border" und den Innenabstand "padding" noch hinzu addiert. Das kann oft störend sein, wenn man eine feste Breiten- oder Höhen-Vorgabe hat. Wer trotzdem nicht auf padding und border verzichten möchte, kann einen einfachen Trick nutzen.   Box Sizing: Padding und Border von der Breite abziehen Mit der CSS Eigenschaft "Box ...

Statt einem transparenten oder halbtransparentem Hintergrundbild kann man mit CSS auch eine mehr oder weniger stark transparente Hintergrundfarbe mit background-color wählen: Die verdeckt dann ein Hintergrundbild nur leicht: So ist sowohl der Hintergrund als auch Text im Vordergrund noch zu erkennen. Statt der sonst üblichen RGB-Werte im HEX-Format gibt man diese als RGBA an: Neben den drei RGB-Farbwerten gibt der letzte Wert die Transparenz an. Dies hat den Vorteil, dass nur die Hintergrund-Farbe eine Transparenz enthält, ...

Mit der CSS-Eigenschaft "box-shadow" lassen sich ganz einfach Schatten zu einem Objekt hinzufügen: Dazu braucht man neben der Farbe nur die Größe und sowohl die vertikale als auch die horizontale Position. So lässt sich der Schatten auch nur nach unten positionieren, ohne eine Verschiebung nach rechts oder links! Der Code für einen hell-grauen Schatten mit nur leichtem Versatz sieht also so aus: box-shadow:1px 1px 5px #333333; Der erste Wert steht dabei für einen horizontalen Versatz nach rechts oder ...

Mit Javascript lassen sich alle Elemente einer Webseite ändern: Auch die CSS Hintergrundbilder (background-image). So kann man per Javascript das Bild ändern: Zum Beispiel als Reaktion auf einen Klick oder einen mouseover Effekt. In Javascript heißen die CSS Stile allerdings anders: Statt "background-image" heißt der Befehl dort "backgroundImage":   CSS: background-image:url('bild.jpg');   Javascript: style.backgroundImage = "url('bild.jpg')";   Das funktioniert auch nachträglich, nachdem die Seite geladen wurde: Dann kann man über die ID eines DIVs dessen Hintergrundbild ändern: <div id="bild" style="background-image:url('bild1.jpg');"> <script type="text/javascript"> document.getElementById('bild').style.backgroundImage = "url('bild2.jpg')"; </script>   Javascript: Background-Image ...

Mit CSS Filtern kann man Bilder im Browser verändern: Damit lassen sie sich aufhellen, abdunkeln, in Graustufen umwandeln oder mit dem Blur-Filter weichzeichnen. Das ist praktisch, weil nicht jeweils zwei verschiedene Bilder übertragen werden müssen, sondern die Umwandlung im Browser stattfindet. Mit den CSS Filtern lassen sich Bilder daher zum Beispiel abdunkeln und bei Mausberührung (hover oder mouseover) aufhellen: Das klappt mit reinem CSS, ganz ohne Javascript!   Bild mit CSS abdunkeln Mit dem CSS Filter "brightness" lässt sich ...

Mit unserem CSS Farbverlauf Generator kann man einen HTML / CSS Farbverlauf ganz einfach online erstellen: Dazu wählt man die erste und die zweite Farbe und die Richtung aus: Anschließend kann man sich CSS Befehle mit dem HTML Code direkt kopieren und in die eigene Webseite einfügen. Aktuell unterstützt unser Generator Farbverläufe mit zwei Farben: Wer mehr Farben braucht, für den haben ...

Mit den CSS Media Queries hat man praktische Funktionen für responsive Websites: Damit kann man die Webseite per CSS direkt für die Größe (z.B. Breite) des Bildschirms anpassen. Für manche Funktionen braucht man aber auch Javascript: Hier ist es oft praktisch, wenn das Skript auch auf die Media Eigenschaften von CSS zugreifen kann!   Beispiele für CSS Media Queries: Mit diesem CSS Code passt man die Schriftgröße von einem Div-Element an die Breite des Bildschirms an: Auf kleineren ...

Farbverläufe mit CSS sind ein einfaches Mittel, dezent etwas Farbe auf die Webseite zu bringen. Mit einem CSS Farbverlauf kann man aber auch ein Bild am oberen oder unteren Rand abdunkeln und Text lesbarer machen. Den CSS Farbverlauf erstellt mal als Hintergrund-Bild (background-image) eines Objektes: Dabei kann man entweder einen Verlauf zwischen zwei oder mehr Farben erstellen oder mit Transparenz arbeiten: Damit kann man dann zum Beispiel eine Farbe auslaufen lassen.   CSS Farb-Verlauf: zwei Farben Mit zwei ...

Mit HTML und CSS lassen sich Texte ganz einfach mit einem Farbverlauf belegen. Dieser wird dann statt der eigentlichen Textfarbe angezeigt und von allen großen Browsern unterstützt. Das sieht vor allem bei Überschriften sehr schick aus, wenn man es mit dem Farbverlauf nicht übertreibt. Achtung: Hierbei handelt es sich um reinen Text, es wird kein Bild benutzt. Das kann aus SEO Sicht wichtig sein, wenn ...

Mit CSS hat jedes HTML Element einen äußeren Abstand ("margin"), einen Rahmen ("border") und einen inneren Abstand ("padding"). Je größer der Rahmen und der innere Padding-Abstand sind, desto größer wird am Ende auch das Element: Meist ein <DIV> Container. Für pixelgenaues Webdesign ist das manchmal aber störend, da sich neben den Attributen für Höhe und Breite (height und width) auch die Abstandswerte ...

Kreise mit CSS, ganz ohne Bilder? Das geht und passt sich so auch noch der Auflösung an! Mit CSS ist es nämlich ganz ohne Grafiken möglich, einfache Elemente zu zeichnen. Rechteckige Boxen sind dabei sehr einfach, runde Formen etwas aufwendiger - aber nicht viel. Durch die Eigenschaft "border-radius" lässt sich einem eckigen Element eine runde Ecke hinzufügen. Nimmt man jetzt einen sehr großen "border-radius" an allen vier Seiten des Elements, erhält man einen Kreis - über ...