Archiv für die Kategorie ‘HTML / CSS’
HTML 5 Cheat Sheet
Beim Smashing Magazine gibt es ein Cheat-Sheet für HTML 5 zum Download. Da einige Browser ja bereits die neuen Tags (oder zumindest einen Teil dieser) unterstützen und ein offizieller Releasetermin nirgendwo zufinden ist (ich hab zumindest keinen gefunden). Kann jeder die spezifizierten Tags auf eigene Gefahr hin einsetzen.
Schön auf einen Blick zu sehen, der HTML-Tag, eine kurze Info dazu, die HTML-Version, seit wann der Tag unterstützt wird und eine Übersicht der möglichen Attribute.
Nett; das Cheat-Sheet ist für alle Designer auf jeden Fall einen Blick wert.
Quelle: http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
50 Nützliche CSS-Tools
Eine sehr gute Ansammlung von CSS-Tools hat momentan das Smashing-Magazine im Angebot. Dabei ist alles vom CSS-Editor, über CSS-Frameworks bis hin zu Browser spezifischen Erweiterungen.
Mir persönlich gefallen in diesem Zusammenhang die Online-Tools, da schlicht und ergreifend das leidige installieren entfällt und immer die neueste Version verfügbar ist.
Viel Spaß beim probieren.
Link zum Artikel “50 Extremely Useful And Powerful CSS Tools”
Navigation Menus: Trends und Beispiele
Sucht ihr gerade nach Ideen für die Gestaltung von Menüs einer Website oder wollt ihr euch einfach mal Anregungen für zukünftige Projekte holen? Dann nix wie hin zum Smashing-Magazine. Dort gibt’s in einem aktuellen Artikel jede Menge toller Beispiele zu vertikalen und horizontalen Menüelementen.
This article presents recent trends, examples and innovative solutions for design of modern navigation menus
Die Menüs sind in verschiedene Gruppen aufgeteilt. Mit dabei auch einige neue Ideen, die weg von bisher gewohnter Gestaltung gehen. Wie sinnvoll diese sind und wo diese am besten einzusetzen sind, muss allerdings genau betrachtet werden. Wichtig ist schließlich, dass sich ein Benutzer schnell zurechtfinden soll.
Quelle: Navigation Menus: Trends and Examples | Smashing Magazine
CSS-Galerien
Kennt Ihr das Problem? Man macht sich wieder mal an eine neue Website, ist ja kein Thema, man hat ja schon genügend gestaltet und plötzlich, gähnende leere im doch so kreativen Hinterkopf.
Gerade in dieser Situation, aber auch um sich neue Anregungen zu holen oder einfach zu sehen was andere so an neuen, kreativen Ideen aus den aktuellen Browsern holen, eignen sich Design bzw. CSS-Galerien. Letzteres natürlich mit dem Hinblick das Website-Design komplett mit CSS zu generieren.
Nachfolgend mal die Galerien, die ich mehr oder weniger regelmäßig begutachte um mir frische Ideen zu holen. Betonung liegt natürlich auf Ideen und Anregungen und bei weitem nicht auf kopieren! Einige der genannten Galerien bieten neben der eigentlichen Galerie noch einigen Zusatzcontent in Form von Tutorials oder Foren.
CSS-Mania (Url: http://cssmania.com/)
Zugegeben mein Favourite momentan. Echt gute Designs und auf jeden Fall einen Blick wert.
CSS Vault (Url: http://cssvault.com/)
Auf CSS Vault findet Ihr neben der eigentlichen CSS Galerie noch weitere Artikel zum Thema Gestaltung via CSS
CSS-Frameworks
Was sind CSS-Frameworks und wo braucht man die “Dinger”? Das sind die Fragen, die oft im Zusammenhang mit den nützlichen Frameworks auftauchen. War im Web 1.0 CSS mehr als Schrift und Tabellenformatierung verwendet worden, hat sich das in den letzten Jahren immer mehr verändert.
Im Web 2.0 werden fast immer die kompletten Websites über CSS Positionierung gestaltet und designed. Wie bereits im Web 1.0, ist immer noch ein deutlicher Unterschied erkennbar, wie die einzelnen Browser mit CSS umgehen (hierzu gibt es Tonen an speziellem Material im WWW, deshalb lass ich das einfach mal so stehen).
CSS-Frameworks beschäftigen sich in Summe damit, eine entsprechend einfache und trotzdem browserübergreifende Gestaltung zu ermöglichen und zwar nicht nur für ausgesprochene CSS Spezialisten, sondern bereits für den ambitionierten Hobby WebDesigner.
Was alle nachfolgenden Frameworks gemeinsam haben, ist die Tatsache, dass sich diese mehr oder weniger an einem Raster-System (Grid) orientieren um Elemente entsprechend auf der Seite zu positionieren. Je nach verwendetem System kann dies mehr oder weniger komfortabel von statten gehen.
Nachfolgend mal eine Übersicht über die vier großen Frameworks, die in vielen Projekten Verwendung finden:
Blueprint
Das Blueprint CSS Framework besteht aus 24 Spalten mit einer Breite von 30 Pixeln + jeweils 10 Pixeln Freiraum zwischen den einzelnen Spalten. Dadurch ergibt sich für das Basis-Framework eine feste Seitenbreite von 950 Pixeln. Im Downloadpaket enthalten sind zusätzlich eine gut aufgebaute Typography – CSS Datei, sowie eine gute Formatierung für Formulare. Die Dateien sind sowohl in einem lesbaren Format vorhanden, als auch zusammengefasst in einer Datei um die Ladezeiten entsprechend zu reduzieren. Wer eigene Blueprint basierende Dateien erstellen will, findet sogar einen entsprechend verwendbaren Kompressor. Durch letzteres ist es möglich ein individuelles Blueprint zu erstellen und auf den ganzen Balast einer “Download-Lösung” zu verzichten.