CSS

Schatten mit CSS Pseudo-Elementen hinzufügen

Updated on by Mathias Karstädt
S

In diesem Beitrag möchte ich euch zeigen, wie man mit ganz einfachen Mitteln einen Schatteneffekt an beliebige Block-Elemente hinzufügen kann. Der Clou dabei ist jedoch, dass dafür kein HTML angefasst werden muss, sondern dies ausschließlich über normale CSS Mittel funktioniert.

Ja klar, werden jetzt einige rufen. Dafür kann man ja einfach die CSS Deklaration box-shadow verwenden! Richtig. CSS3 erlaubt es seit einiger Zeit, mit box-shadow schöne Schatteneffekte an beliebige HTML Elemente zu zaubern und ist dabei ziemlich flexibel.

Aber leider ist es wie mit vielen neuen Dingen - einige Browser unterstützen es noch nicht, oder nur mit speziellen Browserprefixen wie -moz-, -o- oder -webkit-. Dies bedeutet, man muss diese Deklaration für jeden Browser in seiner speziellen Schreibweise wiederholen und bläst damit sein Stylesheet unnötig auf. Und selbst dann werden ältere Browser wie IE8 (und niedriger) oder Opera 10.10 (oder niedriger) nicht unterstützt.

Aus diesem Grund möchte ich euch eine weitere Möglichkeit vorstellen, wie man noch einen Schatten erstellen kann.

Gestatten, Pseudo-Elemente :before und :after

CSS2 bietet schon seit einiger Zeit die Möglichkeit mit Hilfe der Pseudo-Elemente :before und :after Inhalte vor bzw. nach Elementen per CSS hinzuzufügen. So lässt sich zum Beispiel mit folgender Anweisung vor allen Link-Elementen ein Text hinzufügen:

a:before {content: "Ich bin ein Link: "}

Und das alles, ohne etwas am HTML selbst ändern zu müssen. Und ein weiterer Vorteil für uns ist, dass diese Pseudo-Elemente auch schon von einigen älteren Browserversionen unterstützt werden und zudem noch ohne spezielle Prefixe auskommen.

Mehr lesenSchatten mit CSS Pseudo-Elementen hinzufügen

Wie erstelle ich eine Webseite?

Updated on by Mathias Karstädt

An diesem Punkt hat jeder schon einmal gestanden. Man hat so viele verschiedene gute oder auch weniger gute Webseiten im Internet besucht und die eine oder andere gute Information für sich aus diesen Seiten gezogen. Doch wenn man Anderen sein eigenes Wissen oder die eigenen Ansichten und Gedanken mitteilen möchte, wird man nicht drum herum kommen, sich eine eigene Homepage zu erstellen.

Doch wie genau funktioniert das? Und welche Tools brauche ich dafür? Genau diesen Fragen möchte ich in diesem und in kommenden Artikeln auf den Grund gehen.
Mehr lesenWie erstelle ich eine Webseite?

Hierarchische Menüs mit CSS erstellen

Updated on by Mathias Karstädt

Eines der wichtigsten Elemente eines Webauftritts ist das Menü. Das Menü hilft dem Nutzer dabei, sich in komplizierten Seitenstrukturen zurechtzufinden und um schnell an jeden gewünschten Punkt in dieser Hierarchie springen zu können.

Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.

Das barrierefreie CSS Menü

In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und CSS beruht und keine Verwendung von JavaScript macht. So soll es möglich sein, dass Menü auch dann noch bedienen zu können, wenn der Nutzer JavaScript oder gar CSS im Browser ausgeschaltet hat.

So sieht das fertige Menü aus

Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)
Mehr lesenHierarchische Menüs mit CSS erstellen

Ist display=“none“ jetzt irrelevant?

Updated on by Mathias Karstädt

Beim Studieren der aktuellen HTML5 Spezifikation, ist mir ein neues Attribut aufgefallen, welches möglicherweise bald eine große Bedeutung bekommen könnte. Ich spreche hier vom Attribut irrelevant, welches allen HTML Elementen zugewiesen werden darf.

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

HTML 5 Draft Recommendation Screenshot

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)
Mehr lesenIst display=“none“ jetzt irrelevant?

Back to Top