Im Rahmen der Buchrezension „Modernes Webdesign mit CSS“ sind mehr als 160 Link-Tipps zusammengekommen, die einem als Screendesigner das Leben einfacher machen und die man kennen sollte. Die Liste ist handverlesen und nach Kategorien sortiert.
- Raster / Grid-Systeme
- Effekte / Anwendungsbeispiele
- Lese- und Blogtipps
- Webmaster-Tools
- Tools / Editoren / Programme
- Website-Sammlungen / Inspiration
- CSS CSS3 (Sammlung, Tutorials, Foren)
- Webfonts / Fonts
- HTML5 / HTML / DHMTL
- JavaScript / Ajax
- Animationen mittels CSS3 und HTML5
- Verschiedene
- Gimmicks / Unterhaltung
- Screendesign-Rasterset | 960 Grid System
- 1140px Rastersystem (ideal für 1280er-Auflösung) | cssgrid.net
- Rastersystem für responsives Webdesign | www.columnal.com
- Raster-Kalkulator | gridulator.com
- Individuelles Raster als Photoshop-Muster sichern | modulargrid.org/#app
- Plug-in für Photoshop, mit dem sich Hilfslinien und Raster exakt einrichten lassen | GuideGuide
- Adpative CSS-basierte Gridsysteme lessframework.com und cssgrid.net
- Parallax-Effekt | Ein paar Beispiele für Webseiten mit diesem Effekt
- CSS-Boxschatten-Generator im Stile eines Photoshop-Layers | LayerStyles
- Wabenstruktur ohne Grafiken | www.cssplay.co.uk/menus/hexagon.html
- Der Backgroundtrick | www.designmadeingermany.de/blog/der-backgroundtrick
- Boxen erstellen mit Schatten und Ecken | www.css3.me
- Bilder vollflächig im Hintergrund | css-tricks.com/perfect-full-page-background-image
- Octagons und andere Vielecke mit CSS | www.thestyleworks.de/tut-art/color-diamond.shtml
- Diagonale Linien mit CSS ! | net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css
- Select-Boxen mittels CSS | harvesthq.github.com/chosen
- Anwendungsbeispiel: Shading with CSS text-shadows
- Anwendungsbeispiel: CSS-Bändchen | css-tricks.com/snippets/css/ribbon
- Anwendungsbeispiel: Indeterminate Checkboxes
- Anwendungsbeispiel: Custom File Inputs with a Bit of jQuery | viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery
- Sliding-Doors mit nur einer Grafik | kailoon.com/css-sliding-door-using-only-1-image
- Anwendungsbeispiel: typemedia2011.com
- Slide-Effekt mit jQuery | jquery.malsup.com/cycle
- Anwendungsbeispiel: Clearing Floats The Old Fashioned Way | www.positioniseverything.net/easyclearing.html
- Anwendungsbeispiel: Eco Lecom | www.experiencialecom.com.br/experiencialecom/Portugues
- Anwendungsbeispiel: Pure CSS3 Spiderman Cartoon
- Anwendungsbeispiel: „Our Solar System in CSS3“ – neography.com/journal/our-solar-system-in-css3
- Anwendungsbeispiel: Horizontal zentriertes CSS-Menü | matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
- Lesetipp: Box-shadow, one of CSS3′s best new features
- Lesetipp: Building a pure CSS 3D City | cubiq.org und das entsprechende Live-Demo
- Lesetipp: CSS3 vs. CSS: A Speed Benchmark | smashingmagazine.com
- Lesetipp: 50 Extremely Useful And Powerful CSS Tools | smashingmagazine.com
- Lesetipp: css-tricks.com
- Lesetipp: Blogazines – interessant, ansprechend und anders | daswebdesignblog.de/blogazines-interessant-ansprechend-und-anders
- Lesetipp: CSS Sprites einfach erklärt | bueltge.de/css-sprites-einfach-erklaert/675/
- Lesetipp: CSS3 FOR WEB DESIGNERS | www.abookapart.com/products/css3-for-web-designers
- Webdesignblog | www.pixelgangster.de
- Webdesign- und CSS-Blog | www.blogrammierer.de/blog/css
- Lesetipp: List of Cross-Browser CSS Properties | www.impressivewebs.com/cross-browser-css-properties
- Webdesign-Blog, Inspiration, Tutorials | line25.com
- Dopplungen oder falsche Angaben in den Metaangaben lokalisieren | META Description Crawler
- Diverse Browser auf einen CSS Stand zu setzen: Reset CSS
- CSS Lint spürt Syntax Fehler im CSS auf | csslint.net
- Einheitlich aussehende Formulare unter Mac und Windows: formalize.me
- Open-Source-Statitik | de.piwik.org
- W3C HTML Validator
- W3C CSS Validator
- Firefox AddOn – Web Developer Toolbar | addons.mozilla.org/de/firefox/addon/web-developer
- Browserkompatibilität testen (per Screenshots) | browsershots.org
- Firefox Add-on „Fireshot“ – Screenshots erstellen | addons.mozilla.org/de/firefox/addon/fireshot
- PageLayers – Tool, das Screenshots einer Website Ebenen einer PSD-Dokument überführt | www.ralfebert.de/products/pagelayers
- Tool, das nicht nur verschiedene Browser testet, sondern auch die Anzeige in verschiedenen Auflösungen | www.fwpscreenshots.de
- Add-on für Firefox | firebug
- CSS-Tipps und -Tricks | www.webmasterpro.de
- Einfach Quelltext reinkopieren, Kommentare einfügen, und Hilfe suchen | chopapp.com
- Kompatibilität-Tool – „When can I use…“ | caniuse.com
- Online-CSS-Editor mit Live-Preview uvm. | www.webputty.net
- Schnell und Browser-übergreifend Farbverläufe in CSS umzusetzen | CSS Gradient Editor
- Farbanalyse nach den W3C-Richtlinien | www.hacke.net/tools/farbanalyse.php
- Ultimate CSS Gradient Generator | www.colorzilla.com/gradient-editor
- Tool, um interessante Farbsets zu kreieren | kuler.adobe.com
- Platzhalter-Bilder | lorempixel.com
- Umfangreiches CSS3-Tool | www.css3maker.com
- CSS 3 Button Generator | www.cssbuttongenerator.com
- Webfarben (hexadezimal) | 0to255.com
- CSS3 -Generator | css3generator.com
- Ähnlich wie Adobe Kuler, aber ohne lange Ladezeiten | ColorScheme Designer
- Tool „Muse“ von Adobe für Webdesigner | muse.adobe.com
- CSS- und HTML-Editor | www.pspad.com/de
- jQTouch – Add-On für jQuery, mit dessen Hilfe man die typische iPhone-Darstellung imitieren kann | jqtouch.com
- Kostenlose Hintergrundmuster, auch als PS-Muster-Paket | Subtle Patterns
- Transformmatrix erstellen | CSS3 Matrix construction set
- Webdesign ohne Programmieren | www.application-systems.de/freeway
- Devoth’s HEX 2 RGBA Color Calculator | hex2rgba.devoth.com
- Semantische Inhalte erstellen, gleich bei der Eingabe | www.wymeditor.org
- Unterstützung von alten IE Versionen bei CSS3 | CSS3Pie.com
- Web Page Analyzer | www.websiteoptimization.com/services/analyze
- Site Link Analyzer – Anzahl externe und Interne Links feststellen | www.seochat.com/seo-tools/site-link-analyzer
- Optimierung von CSS-Code – csslint.net
- jQuery-Tools – Scripte, die schnell zu implementieren sind | flowplayer.org/tools
- Colourlover.com hilft dabei, interessante Farbkombinationen zu finden | www.colourlovers.com
- Lorem-Ipsum-Widget: tobiasahlin.com/blog/introducing-loremify
- Web Safe Colors | www.elizabethcastro.com/html/colors/websafecolors.html
- CSS Prefixer | cssprefixer.appspot.com
- Tool zum Erstellen des CSS-Codes von Spritegrafiken | www.spritebox.net
- Kostenloser Open-Source Editor | www.aptana.com
- CSS-Website-Sammlung | cssbased.com
- Deutschsprachige Sammlung/Website zum Thema Cascading Stylesheets (CSS) | www.css4you.de
- Inspirationsquelle für die Gestaltung von Webseiten mittels CSS | www.cssdsgn.com
- Sammlung gut gestalteter Websites | www.thebestdesigns.com
- Inspirationsquelle | www.cssmania.com
- CSS-Gestaltungsmöglichkeiten | www.csszengarden.com
- Inspirationsquelle | siteinspire.com/showcase
- Showcase CSS-basierter Websites | www.awwwards.com
- Inspirationsquelle | www.webcreme.com
- CSS mit Variablen, Verschachtelungen und einigem mehr bietet SASS | sass-lang.com
- CSS-Sammlung, viele Beispiele, Konzepte etc. pp. | www.cssplay.co.uk
- Background-Position in Spritesheets einfach auslesen | www.spritecow.com
- Sammlung zum Thema responsive Websites | Media Queries
- CSS-Framework, das nach dem 960-Grid-Prinzip die Website einteilt und ganz einfach mit vordefinierten Klassen die Website einteilen lässt. | www.blueprintcss.org
- CSS-Tutorial | de.html.net/tutorials/css
- CSS Forum für Fragen rund um Cascading Style Sheets | www.css-info.de
- CSS Tutorial | www.w3schools.com/css
- Kleine Sammlung von CSS3 Beispielen | www.dzinepress.com/2011/07/40-useful-css3-tutorials-would-help-web-developers-designers
- CSS3: Leitfaden für Webdesigner | css3-leitfaden.de
- Blogazine von Jason Santa Maria | jasonsantamaria.com/articles
- Tricks und Kniffs zum Thema CSS | www.css-hack.de
- CSS3Please.com erleichtert das Arbeiten mit browser-spezifischen Prefixes.
- Vorgefertigte CSS-Layouts | blog.html.it/layoutgala
- CSS3-Framework für verschiedene Buttons | css3buttons.michaelhenriksen.dk
- Free CSS3 Video Tutorials | www.css3.info/free-css3-video-tutorials/
- Layer Hints für Sitegrinder
- The Power of CSS-Lists | css.maxdesign.com.au/listamatic/index.htm
- Koordinaten in Sprite-Sheets auslesen | Sprite Cow
- CSS-Framework | www.notjustagrid.com
- PHP-basierter CSS Processor | Turbine
- Dynamisch mit CSS entwerfen, statt dem Kunden statische Photoshop Layouts zu präsentieren | 24ways.org/2009/make-your-mockup-in-markup
- Blog und Tutorials | designlovr.com/examples/dynamic_stack_of_index_cards
- How to CSS-Positioning | www.barelyfitz.com/screencast/html-training/css/positioning
- CSS News | www.css-news.com
- Portal von Mozilla zum Thema CSS | developer.mozilla.org/de/demos
- CSS-Eigenschaften gängiger E-Mail-Programme | www.campaignmonitor.com/css
- Media Queries – verschiedene Stylesheets für verschiedene Auflösungen oder Gerätetypen ausgeben | webdesignerwall.com/tutorials/css3-media-queries
- CSS Templates | intensivstation.ch/templates
- CSS Tutorial | de.html.net/tutorials/css
- Adventkalender mit unterschiedlichen Webfonts | 2011.adfont-calendar.com
- Tool, um Schriften ohne viel Aufwand direkt auf Webseiten zu identifizieren: chengyinliu.com/whatfont.html
- Kostenlose @font-face-kits | www.fontsquirrel.com
- Bookmarklet, um Webfonts bzw. die Fallbackfonts direkt auf der eigenen Seite zu testen | ffffallback.com
- Lizenzfreie Webfonts | www.fontsquirrel.com
- Google Webfonts | www.google.com/webfonts
- Video-Tipp: CSS3 Web Fonts | www.youtube.com/watch?v=PdS4UbBz-Pc
- FontFace Generator: www.fontsquirrel.com/fontface/generator
- Die Silbentrennung funktioniert nun in neueren Browsern | blog.fontdeck.com/post/9037028497/hyphens
- Übersicht über die Verbreitung von Systemschriften | www.codestyle.org/css/font-family/index.shtml
- Systemschriften (Größe, Zeilenabstand, Farbe, etc.) miteinander vergleichen | www.typetester.org
- Über und mit HTML5 und CSS3 | beta.theexpressiveweb.com
- HTML5 Developer Center | www.htmlgoodies.com/html5
- Alles drin, was ein Programmierer braucht | HTML5 Boilerplate
- Hype – einfaches Programm, um HTML5-Inhalte zu erstellen | itunes.apple.com/de/app/hype/id436931759?mt=12
- HTML5-Showcase von Apple | www.apple.com/html5
- Portal von Google zum Thema HTML5/CSS | www.html5rocks.com
- SelfHTML | de.selfhtml.org/css/index.htm
- DHTML – downloadbare Vorlagen und Tutorials: www.dynamicdrive.com
- Direkt aus Photoshop heraus HTML-Templates erzeugen | Sitegrinder
- Sammlung von Ajax-Anwendungsbeispielen | miniajax.com
- JavaScript Library für HTML5 und CSS3 | www.modernizr.com
- JavaScript InfoVis Toolkit – Tools zur Visualisierung von Daten | thejit.org/demos
- Eine komplett JavaScript-basierte Präsentationsanwendung: – 280 Slides – als Vorzeigebeispiel für Cappuccino, ein Framework, mit dem man Webanwendungen wie Desktop-Anwendungen schreiben kann
- Animationen mit HTML5, CSS und JavaScript fürs Web und digitale Magazine: labs.adobe.com/technologies/edge
- Create, serve and track HTML5/CSS3 animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices | www.animatable.com
- Sencha Animator – CSS3-Animationen erstellen | Create amazing CSS3 animations
- CSS3-Transitions mit Keyframes | bradshawenterprises.com
- Eigenes WordPress-Template erstellen | wordpress.lernenhoch2.de/handbuch/eigenes-wordpress-template-erstellen
- Kickstart – Dokumente und Ordner für den Projektstart | praegnanz.de/weblog/htmlcssjs-kickstart
- Marktplatz für Webdesigner | www.1000webdesigner.com
- Schnellstmöglich zum eigenen Blog | posterous.com
- openbooks von Galileo Press | www.galileodesign.de/katalog/openbook?GalileoSession=68417225A5Jmv8JJk9I
- Der Webmaster-Klassiker | Webmaster 4 you
- Zum Abschalten für zwischendurch – „Goldenen Regeln für schlechtes HTML“ | www.karzauninkat.com/Goldhtml/goldhtml.htm
super Sammlung, vielen Dank. Dieses Gratisposter zum Thema CSS könnte noch hilfreich sein:
Vielen Dank für diese Sammlung. Und das Gratisposter von CB ist auch echt hilfreich :-)
Tolle Sammlung – herzlichen Dank dafür!
Hallo,
ich bin gerade auf deinen Blog gestoßen. Vielen Dank für die geniale Ansammlung! Hat mir sehr geholfen!
Danke für diese umfangreiche Sammlung!!
olaf
Danke
Wow, da habt Ihr eine tolle Zusammenstellung geschaffen! Danke!