160 Tipps für Screendesigner

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

  1. Screendesign-Rasterset | 960 Grid System
  2. 1140px Rastersystem (ideal für 1280er-Auflösung) | cssgrid.net
  3. Rastersystem für responsives Webdesign | www.columnal.com
  4. Raster-Kalkulator | gridulator.com
  5. Individuelles Raster als Photoshop-Muster sichern | modulargrid.org/#app
  6. Plug-in für Photoshop, mit dem sich Hilfslinien und Raster exakt einrichten lassen | GuideGuide
  7. Adpative CSS-basierte Gridsysteme lessframework.com und cssgrid.net

    8. Effekte / Anwendungsbeispiele

  8. Parallax-Effekt | Ein paar Beispiele für Webseiten mit diesem Effekt
  9. CSS-Boxschatten-Generator im Stile eines Photoshop-Layers | LayerStyles
  10. Wabenstruktur ohne Grafiken | www.cssplay.co.uk/menus/hexagon.html
  11. Der Backgroundtrick | www.designmadeingermany.de/blog/der-backgroundtrick
  12. Boxen erstellen mit Schatten und Ecken | www.css3.me
  13. Bilder vollflächig im Hintergrund | css-tricks.com/perfect-full-page-background-image
  14. Octagons und andere Vielecke mit CSS | www.thestyleworks.de/tut-art/color-diamond.shtml
  15. Diagonale Linien mit CSS ! | net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css
  16. Select-Boxen mittels CSS | harvesthq.github.com/chosen
  17. Anwendungsbeispiel: Shading with CSS text-shadows
  18. Anwendungsbeispiel: CSS-Bändchen | css-tricks.com/snippets/css/ribbon
  19. Anwendungsbeispiel: Indeterminate Checkboxes
  20. Anwendungsbeispiel: Custom File Inputs with a Bit of jQuery | viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery
  21. Sliding-Doors mit nur einer Grafik | kailoon.com/css-sliding-door-using-only-1-image
  22. Anwendungsbeispiel: typemedia2011.com
  23. Slide-Effekt mit jQuery | jquery.malsup.com/cycle
  24. Anwendungsbeispiel: Clearing Floats The Old Fashioned Way | www.positioniseverything.net/easyclearing.html
  25. Anwendungsbeispiel: Eco Lecom | www.experiencialecom.com.br/experiencialecom/Portugues
  26. Anwendungsbeispiel: Pure CSS3 Spiderman Cartoon
  27. Anwendungsbeispiel: „Our Solar Sys­tem in CSS3“ – neography.com/journal/our-solar-system-in-css3
  28. Anwendungsbeispiel: Horizontal zentriertes CSS-Menü | matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

    29. Lese- und Blogtipps

  29. Lesetipp: Box-shadow, one of CSS3′s best new features
  30. Lesetipp: Building a pure CSS 3D City | cubiq.org und das entsprechende Live-Demo
  31. Lesetipp: CSS3 vs. CSS: A Speed Benchmark | smashingmagazine.com
  32. Lesetipp: 50 Extremely Useful And Powerful CSS Tools | smashingmagazine.com
  33. Lesetipp: css-tricks.com
  34. Lesetipp: Blogazines – interessant, ansprechend und anders | daswebdesignblog.de/blogazines-interessant-ansprechend-und-anders
  35. Lesetipp: CSS Sprites einfach erklärt | bueltge.de/css-sprites-einfach-erklaert/675/
  36. Lesetipp: CSS3 FOR WEB DESIGNERS | www.abookapart.com/products/css3-for-web-designers
  37. Webdesignblog | www.pixelgangster.de
  38. Webdesign- und CSS-Blog | www.blogrammierer.de/blog/css
  39. Lesetipp: List of Cross-Browser CSS Properties | www.impressivewebs.com/cross-browser-css-properties
  40. Webdesign-Blog, Inspiration, Tutorials | line25.com

    41. Webmaster-Tools

  41. Dopplungen oder falsche Angaben in den Metaangaben lokalisieren | META Description Crawler
  42. Diverse Browser auf einen CSS Stand zu setzen: Reset CSS
  43. CSS Lint spürt Syntax Fehler im CSS auf | csslint.net
  44. Einheitlich aussehende Formulare unter Mac und Windows: formalize.me
  45. Open-Source-Statitik | de.piwik.org
  46. W3C HTML Validator
  47. W3C CSS Validator
  48. Firefox AddOn – Web Developer Toolbar | addons.mozilla.org/de/firefox/addon/web-developer
  49. Browserkompatibilität testen (per Screenshots) | browsershots.org
  50. Firefox Add-on „Fireshot“ – Screenshots erstellen | addons.mozilla.org/de/firefox/addon/fireshot
  51. PageLayers – Tool, das Screenshots einer Website Ebenen einer PSD-Dokument überführt | www.ralfebert.de/products/pagelayers
  52. Tool, das nicht nur verschiedene Browser testet, sondern auch die Anzeige in verschiedenen Auflösungen | www.fwpscreenshots.de
  53. Add-on für Firefox | firebug
  54. CSS-Tipps und -Tricks | www.webmasterpro.de
  55. Einfach Quelltext reinkopieren, Kommentare einfügen, und Hilfe suchen | chopapp.com
  56. Kompatibilität-Tool – „When can I use…“ | caniuse.com

    57. Tools / Editoren / Programme

  57. Online-CSS-Editor mit Live-Preview uvm. | www.webputty.net
  58. Schnell und Browser-übergreifend Farbverläufe in CSS umzusetzen | CSS Gradient Editor
  59. Farbanalyse nach den W3C-Richtlinien | www.hacke.net/tools/farbanalyse.php
  60. Ultimate CSS Gradient Generator | www.colorzilla.com/gradient-editor
  61. Tool, um interessante Farbsets zu kreieren | kuler.adobe.com
  62. Platzhalter-Bilder | lorempixel.com
  63. Umfangreiches CSS3-Tool | www.css3maker.com
  64. CSS 3 Button Generator | www.cssbuttongenerator.com
  65. Webfarben (hexadezimal) | 0to255.com
  66. CSS3 -Generator | css3generator.com
  67. Ähnlich wie Adobe Kuler, aber ohne lange Ladezeiten | ColorScheme Designer
  68. Tool „Muse“ von Adobe für Webdesigner | muse.adobe.com
  69. CSS- und HTML-Editor | www.pspad.com/de
  70. jQTouch – Add-On für jQuery, mit dessen Hilfe man die typische iPhone-Darstellung imitieren kann | jqtouch.com
  71. Kostenlose Hintergrundmuster, auch als PS-Muster-Paket | Subtle Patterns
  72. Transformmatrix erstellen | CSS3 Matrix construction set
  73. Webdesign ohne Programmieren | www.application-systems.de/freeway
  74. Devoth’s HEX 2 RGBA Color Calculator | hex2rgba.devoth.com
  75. Semantische Inhalte erstellen, gleich bei der Eingabe | www.wymeditor.org
  76. Unterstützung von alten IE Versionen bei CSS3 | CSS3Pie.com
  77. Web Page Analyzer | www.websiteoptimization.com/services/analyze
  78. Site Link Analyzer – Anzahl externe und Interne Links feststellen | www.seochat.com/seo-tools/site-link-analyzer
  79. Optimierung von CSS-Code – csslint.net
  80. jQuery-Tools – Scripte, die schnell zu implementieren sind | flowplayer.org/tools
  81. Colourlover.com hilft dabei, interessante Farbkombinationen zu finden | www.colourlovers.com
  82. Lorem-Ipsum-Widget: tobiasahlin.com/blog/introducing-loremify
  83. Web Safe Colors | www.elizabethcastro.com/html/colors/websafecolors.html
  84. CSS Prefixer | cssprefixer.appspot.com
  85. Tool zum Erstellen des CSS-Codes von Spritegrafiken | www.spritebox.net
  86. Kostenloser Open-Source Editor | www.aptana.com

    87. Website-Sammlungen / Inspiration

  87. CSS-Website-Sammlung | cssbased.com
  88. Deutschsprachige Sammlung/Website zum Thema Cascading Stylesheets (CSS) | www.css4you.de
  89. Inspirationsquelle für die Gestaltung von Webseiten mittels CSS | www.cssdsgn.com
  90. Sammlung gut gestalteter Websites | www.thebestdesigns.com
  91. Inspirationsquelle | www.cssmania.com
  92. CSS-Gestaltungsmöglichkeiten | www.csszengarden.com
  93. Inspirationsquelle | siteinspire.com/showcase
  94. Showcase CSS-basierter Websites | www.awwwards.com
  95. Inspirationsquelle | www.webcreme.com

    96. CSS CSS3 (Sammlung, Tutorials, Foren)

  96. CSS mit Variablen, Verschachtelungen und einigem mehr bietet SASS | sass-lang.com
  97. CSS-Sammlung, viele Beispiele, Konzepte etc. pp. | www.cssplay.co.uk
  98. Background-Position in Spritesheets einfach auslesen | www.spritecow.com
  99. Sammlung zum Thema responsive Websites | Media Queries
  100. 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
  101. CSS-Tutorial | de.html.net/tutorials/css
  102. CSS Forum für Fragen rund um Cascading Style Sheets | www.css-info.de
  103. CSS Tutorial | www.w3schools.com/css
  104. Kleine Sammlung von CSS3 Beispielen | www.dzinepress.com/2011/07/40-useful-css3-tutorials-would-help-web-developers-designers
  105. CSS3: Leitfaden für Webdesigner | css3-leitfaden.de
  106. Blogazine von Jason Santa Maria | jasonsantamaria.com/articles
  107. Tricks und Kniffs zum Thema CSS | www.css-hack.de
  108. CSS3Please.com erleichtert das Arbeiten mit browser-spezifischen Prefixes.
  109. Vorgefertigte CSS-Layouts | blog.html.it/layoutgala
  110. CSS3-Framework für verschiedene Buttons | css3buttons.michaelhenriksen.dk
  111. Free CSS3 Video Tutorials | www.css3.info/free-css3-video-tutorials/
  112. Layer Hints für Sitegrinder
  113. The Power of CSS-Lists | css.maxdesign.com.au/listamatic/index.htm
  114. Koordinaten in Sprite-Sheets auslesen | Sprite Cow
  115. CSS-Framework | www.notjustagrid.com
  116. PHP-basierter CSS Processor | Turbine
  117. Dynamisch mit CSS entwerfen, statt dem Kunden statische Photoshop Layouts zu präsentieren | 24ways.org/2009/make-your-mockup-in-markup
  118. Blog und Tutorials | designlovr.com/examples/dynamic_stack_of_index_cards
  119. How to CSS-Positioning | www.barelyfitz.com/screencast/html-training/css/positioning
  120. CSS News | www.css-news.com
  121. Portal von Mozilla zum Thema CSS | developer.mozilla.org/de/demos
  122. CSS-Eigenschaften gängiger E-Mail-Programme | www.campaignmonitor.com/css
  123. Media Queries – verschiedene Stylesheets für verschiedene Auflösungen oder Gerätetypen ausgeben | webdesignerwall.com/tutorials/css3-media-queries
  124. CSS Templates | intensivstation.ch/templates
  125. CSS Tutorial | de.html.net/tutorials/css

    126. Webfonts / Fonts

  126. Adventkalender mit unterschiedlichen Webfonts | 2011.adfont-calendar.com
  127. Tool, um Schriften ohne viel Aufwand direkt auf Webseiten zu identifizieren: chengyinliu.com/whatfont.html
  128. Kostenlose @font-face-kits | www.fontsquirrel.com
  129. Bookmarklet, um Webfonts bzw. die Fallbackfonts direkt auf der eigenen Seite zu testen | ffffallback.com
  130. Lizenzfreie Webfonts | www.fontsquirrel.com
  131. Google Webfonts | www.google.com/webfonts
  132. Video-Tipp: CSS3 Web Fonts | www.youtube.com/watch?v=PdS4UbBz-Pc
  133. FontFace Generator: www.fontsquirrel.com/fontface/generator
  134. Die Silbentrennung funktioniert nun in neueren Browsern | blog.fontdeck.com/post/9037028497/hyphens
  135. Übersicht über die Verbreitung von Systemschriften | www.codestyle.org/css/font-family/index.shtml
  136. Systemschriften (Größe, Zeilenabstand, Farbe, etc.) miteinander vergleichen | www.typetester.org

    137. HTML5 / HTML / DHMTL

  137. Über und mit HTML5 und CSS3 | beta.theexpressiveweb.com
  138. HTML5 Developer Center | www.htmlgoodies.com/html5
  139. Alles drin, was ein Programmierer braucht | HTML5 Boilerplate
  140. Hype – einfaches Programm, um HTML5-Inhalte zu erstellen | itunes.apple.com/de/app/hype/id436931759?mt=12
  141. HTML5-Showcase von Apple | www.apple.com/html5
  142. Portal von Google zum Thema HTML5/CSS | www.html5rocks.com
  143. SelfHTML | de.selfhtml.org/css/index.htm
  144. DHTML – downloadbare Vorlagen und Tutorials: www.dynamicdrive.com
  145. Direkt aus Photoshop heraus HTML-Templates erzeugen | Sitegrinder

    146. JavaScript / Ajax

  146. Sammlung von Ajax-Anwendungsbeispielen | miniajax.com
  147. JavaScript Library für HTML5 und CSS3 | www.modernizr.com
  148. JavaScript InfoVis Toolkit – Tools zur Visualisierung von Daten | thejit.org/demos
  149. Eine komplett JavaScript-basierte Präsentationsanwendung: – 280 Slides – als Vorzeigebeispiel für Cappuccino, ein Framework, mit dem man Webanwendungen wie Desktop-Anwendungen schreiben kann

    150. Animationen mittels CSS3 und HTML5

  150. Animationen mit HTML5, CSS und JavaScript fürs Web und digitale Magazine: labs.adobe.com/technologies/edge
  151. Create, serve and track HTML5/CSS3 animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices | www.animatable.com
  152. Sencha Animator – CSS3-Animationen erstellen | Create amazing CSS3 animations
  153. CSS3-Transitions mit Keyframes | bradshawenterprises.com

    154. Verschiedene

  154. Eigenes WordPress-Template erstellen | wordpress.lernenhoch2.de/handbuch/eigenes-wordpress-template-erstellen
  155. Kickstart – Dokumente und Ordner für den Projektstart | praegnanz.de/weblog/htmlcssjs-kickstart
  156. Marktplatz für Webdesigner | www.1000webdesigner.com
  157. Schnellstmöglich zum eigenen Blog | posterous.com
  158. openbooks von Galileo Press | www.galileodesign.de/katalog/openbook?GalileoSession=68417225A5Jmv8JJk9I

    159. Gimmicks / Unterhaltung

  159. Der Webmaster-Klassiker | Webmaster 4 you
  160. Zum Abschalten für zwischendurch – „Goldenen Regeln für schlechtes HTML“ | www.karzauninkat.com/Goldhtml/goldhtml.htm
An den Anfang scrollen