Suchergebnisse für den Tag: CSS

Flexible/Fluid Grid als Grundlage für Webdesign

Um Webseiten schnell auf Grundlage von CSS zu erstellen und dabei so viel Freiheiten wie möglich zu erhalten, dienen häufig CSS-Frameworks, die eine flexible Gestaltung zulassen und gleichzeitig vorgefertigte Klassen anbieten, die zur Gestaltung genutzt werden können. Dabei geht es vor allem um die Anordnung von Elementen. Als ich kürzlich den Markt dazu wieder einmal durchforstete, bemerkte ich einen starken Anstieg an Frameworks auf diesem Gebiet. In diesem Post möchte ich einige – meiner Meinung nach sehr gute – Frameworks vorstellen.

Weiterlesen

Abgelegt unter: CSS, HTML5, Tools | Schlagworte: , , , , | Kommentar verfassen

Bilderinformationen bei MouseOver wie bei Google Images mit CSS

Google Images

Google Images

Google hat die Bildersuche auf der amerikanischen Variante google.com schon angepasst. Dabei werden nach einer getätigten Suche nur noch die Bilder an sich gezeigt, ohne weitere Metainformationen wie bisher. Will man diese Informationen sehen, genügt es mit der Maus auf das gewünschte Bild zu fahren. Das Bild erhält dann einen Rahmen, wird herausgestellt und die Informationen werden sichtbar. Diesen Effekt möchte ich im folgenden Artikel nachahmen und zeigen mit welchen einfachen Mitteln dies bewerkstelligt werden kann. Dazu nutze ich hier nur etwas CSS.

Weiterlesen

Abgelegt unter: CSS, Demo | Schlagworte: , , , , | Kommentar verfassen

Cloud Canvas: online Bildbearbeitung dank HTML5

Cloud Canvas

Cloud Canvas

HTML5 setzt sich immer weiter durch. Die meisten aktuellen Browser unterstützen HTML5 und somit ist der Weg für Neuentwicklungen auf dieser technischen Grundlage geebnet. Cloud Canvas hat diesen Weg mit ihrem gleichnamigen Produkt beschritten und hat ein HTML5 Bildeditor auf der Markt gebracht. Cloud Canvas ist kostenlos nutzbar und ermöglicht die Bearbeitung von Bildern im Netz mit Hilfe der Cloud-Technologie und HTML5. Dabei unterstützt Cloud Canvas das Editieren von Rastegrafiken und auch Vektorgrafiken. Darüber hinaus bietet es alle Standardmethoden bei der Bearbeitung von Bildern sowie einige einfache Filter (beispielsweise Blureffekte und Schlagschatten).

Abgelegt unter: Tools | Schlagworte: , , , | Kommentar verfassen

Web Performance Management Teil 4: Optimiertes Nutzen von CSS durch Beschränkung in der Strukturtiefe

Da Webseiten heute sehr viel beschreibende CSS-Dateien besitzen, lohnt es sich bei der Suche nach Flaschenhälsen genau diese unter die Lupe zu nehmen. Dabei gibt es insgesamt drei praktische und einfache Tricks die CSS-Dateien klein und für den Browser schnell ausführbar zu halten.

Weiterlesen

Abgelegt unter: CSS, Suchmaschinenoptimierung | Schlagworte: , | Kommentar verfassen

Web Performance Management Teil 2: Komprimierung von CSS und Java Script mit dem YUI Compressor

LadezeitenoptimierungIm zweiten Teil der Serie zum Thema Web Performance Management möchte ich Euch mit dem YUI Compressor von Yahoo eine sehr effektive Variante der Komprimierung von CSS, Java Script und Textdateien vorstellen.

Der YUI Compressor ist eine von Yahoo in Java implementierte Software, die es uns mit einigen Eingaben auf einer Eingabekonsole (Shell) ermöglicht unsere CSS und Java Scripts um 70% reduziert auszuliefern. Bei komplexen Webseiten mit mehreren CSS-Dateien und einer Masse an Java Script Code kann dies ganze Sekunden Ladezeit ausmachen.

Weiterlesen

Abgelegt unter: CSS, Java Script, Suchmaschinenoptimierung | Schlagworte: , , , , | Kommentar verfassen

Formee: HTML Forms mit CSS leicht gestalten

Wer kennt es nicht: Kontaktformulare, Bestellformulare und andere Eingabemasken sind in der heutigen Onlinewelt allgegenwärtig. Dabei ist es für den Entwickler häufig ein größerer Aufwand die Elemente ordentlich auszurichten, als für den Nutzer auf den ersten Blick ersichtlich ist. Genau diesem Thema widmet sich das CSS-Framework Formee.

Da Formee noch nicht lange auf dem Markt ist, möchte ich in diesem Artikel kurz die Handhabung dieses Frameworks erläutern und ein praktisches Beispiel aufzeigen. Der Vorteil an Formee liegt auf der Hand: Es ist crossbrowserfähig, es ist flexibel und darüber hinaus anpassbar.

Weiterlesen

Abgelegt unter: CSS, Demo | Schlagworte: , , | Kommentar verfassen