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