Start 160 Tipps für Screendesigner

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

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

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

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

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

  92. CSS-Website-Sammlung | cssbased.com
  93. Deutschsprachige Sammlung/Website zum Thema Cascading Stylesheets (CSS) | www.css4you.de
  94. Inspirationsquelle für die Gestaltung von Webseiten mittels CSS | www.cssdsgn.com
  95. Sammlung gut gestalteter Websites | www.thebestdesigns.com
  96. Inspirationsquelle | www.cssmania.com
  97. CSS-Gestaltungsmöglichkeiten | www.csszengarden.com
  98. Inspirationsquelle | siteinspire.com/showcase
  99. Showcase CSS-basierter Websites | www.awwwards.com
  100. Inspirationsquelle | www.webcreme.com
  101. CSS CSS3 (Sammlung, Tutorials, Foren)

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

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

  145. Über und mit HTML5 und CSS3 | beta.theexpressiveweb.com
  146. HTML5 Developer Center | www.htmlgoodies.com/html5
  147. Alles drin, was ein Programmierer braucht | HTML5 Boilerplate
  148. Hype – einfaches Programm, um HTML5-Inhalte zu erstellen | itunes.apple.com/de/app/hype/id436931759?mt=12
  149. HTML5-Showcase von Apple | www.apple.com/html5
  150. Portal von Google zum Thema HTML5/CSS | www.html5rocks.com
  151. SelfHTML | de.selfhtml.org/css/index.htm
  152. DHTML – downloadbare Vorlagen und Tutorials: www.dynamicdrive.com
  153. Direkt aus Photoshop heraus HTML-Templates erzeugen | Sitegrinder
  154. JavaScript / Ajax

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

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

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

  171. Der Webmaster-Klassiker | Webmaster 4 you
  172. Zum Abschalten für zwischendurch – „Goldenen Regeln für schlechtes HTML“ |  www.karzauninkat.com/Goldhtml/goldhtml.htm

3 Kommentare

Kommentieren

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src> <a> <blockquote>