Mithilfe von PHP kann man JavaScript- und CSS-Dateien sehr effizient Komprimieren und Cachen. Dadurch können diese wesentlich schneller übertragen werden und müssen zudem nicht bei jedem Seitenaufruf erneut runtergeladen werden. Read the rest of this entry

Normalerweise hat jeder CSS-Container die selbe Animation für das aktivierende und deaktivierende Hover – Ereignis (mit der Maus das Feld betreten bzw. verlassen). Mir bekannt waren bisher nur verschiedene Animationenstechniken in Zusammenhang mit JavaScript-Frameworks wie JQuery oder mootools bekannt. Doch auch mit reinem CSS3 kann man verschiedene Read the rest of this entry

Dreiecke mit CSS

Ein Kriterium für die Qualität einer Webseite ist die Ladegeschwindigkeit. Diese ist u.a. von der zu übertragenden Datenmenge abhängig. Um diese möglichst gering zu halten gibt es die Möglichkeit Dreiecke mit reinem CSS darstellen zu können. Dadurch können oft Teile des Templates durch reines CSS ersetzt werden, wodurch man weniger speicherintenisve Bilder braucht. Weil es nur sehr begrenze Dokumentation dazu im Netz gibt, möchte ich euch die Grundlagen vorstellen. Eine Demonstration ist neben diesem Abschnitt zu sehen. Read the rest of this entry

JavaScript und CSS befinden sich heute auf praktisch jeder Webseite. Bei beidem kann man allerdings aus Performance-sicht so einiges falsch machen. Deshalb möchte ich zusammenfassen, wie man die Performance von JavaScript- und CSS-Code optimieren kann und dadurch den Seitenaufbau beschleunigen kann. Read the rest of this entry

Ich vermute, dass sich kaum ein Webentwickler gedanken macht wie effizient das von ihm entwickelte CSS-File ist. Mit “effizient” meine ich, wie schnell der Browser eine Regel verarbeiten, d.h. die Designanpassung darstellen kann. Da das ganze (für mich) nicht messbar ist, verlasse ich mich bei diesem Bericht auf die, die es wissen müssen: zum einen hat Mozilla einen Artikel über “best practices” und Google einen Artikel “ways to make the web faster” veröffentlicht. Ich werde die Ideen beider Artikel zusammenfassen und Ratschläge geben. Read the rest of this entry

CSS3 unterstützt 2 Arten des shadow-Effekts (Schatten). Zum einen den Box-Shadow, d.h. einen Schatten um einen div-container und zweitens den Text-Shadow – ein Schatten für Texte. Read the rest of this entry

Mithilfe der CSS-Eigenschaft Content kann man automatisiert Texte innerhalb eines HTML-Documents einfügen. Das Content-Attribut funktioniert nur in Kombination mit einem der 2 pseudo elemente :after und :before. Read the rest of this entry

In Blockquotes leiten einen Absatz für Zitate ein. Im Gegensatz zu Cite handelt es allerdings um einen ganzen Zitatblock. Dieser wird in HTML werden Blockquotes so ausgezeichnet: Read the rest of this entry

Haben Sie jemals ein CSS-Element mit transparenter Rahmen (Border) gesehen? In diesem Artikel möchte ich Ihnen zeigen wie man transparente Borders erstellt. So soll das ganze am Ende aussehen: Read the rest of this entry

Jeder von euch kennt mehrspaltige Layouts aus Zeitungen. Heute möchte ich euch zeigen wie man diese mit CSS3 erstellen kann. Auf den ersten Blick ist passt einfaches Layouten und CSS nicht richtig zusammen, doch auf den zweiten Blick werden Sie erstaunt sein, wie leicht das ganze geht. Read the rest of this entry