Difference between revisions of "Style Making Resources"

From Dreamwidth Notes
Jump to: navigation, search
(+ link to imgur)
 
(3 intermediate revisions by 2 users not shown)
Line 8: Line 8:
 
* [http://css3please.com/ CSS3 Please Rule Generator]
 
* [http://css3please.com/ CSS3 Please Rule Generator]
 
* [http://www.alistapart.com/topics/topic/css/ A List Apart CSS]
 
* [http://www.alistapart.com/topics/topic/css/ A List Apart CSS]
 +
* [https://developer.mozilla.org/en/CSS_Reference Mozilla's CSS Reference] Although geared towards Firefox users, this explains how the property work, provides visual examples and a compatibility table to mention which browsers it works in.
  
 
=== Indexes ===
 
=== Indexes ===
  
* [http://meiert.com/en/indices/css-properties/ CSS Properties Index ]
+
* [http://meiert.com/en/indices/css-properties/ CSS Properties Index]
 +
* [http://www.quirksmode.org/compatibility.html Compatibility Tables]
  
 
=== Cheatsheets ===
 
=== Cheatsheets ===
Line 47: Line 49:
  
 
* [http://www.colourlovers.com ColourLovers] -- There is even a [http://www.colourlovers.com/group/Dreamwidth Dreamwidth group]
 
* [http://www.colourlovers.com ColourLovers] -- There is even a [http://www.colourlovers.com/group/Dreamwidth Dreamwidth group]
 +
* [http://www.design-seeds.com/ Design Seeds]
 
* [http://kuler.adobe.com Kuler]
 
* [http://kuler.adobe.com Kuler]
 +
* [http://colorschemedesigner.com/ Color Scheme Designer]
  
 
== Graphics ==
 
== Graphics ==
Line 117: Line 121:
  
 
* [http://matthewjamestaylor.com/blog/ultimate-stacked-columns-pixels.htm Fluid full height column layouts]
 
* [http://matthewjamestaylor.com/blog/ultimate-stacked-columns-pixels.htm Fluid full height column layouts]
 +
 +
= Testing and Checking =
 +
 +
* [http://browsershots.org/ Browsershots.org] -- helps you check and see what your layout looks on different browsers
 +
 +
== Validation ==
 +
 +
* [http://validator.w3.org/ W3.org Validator] -- check the validity of your HTML
 +
 +
== Accessibility ==
 +
 +
* [http://snook.ca/technical/colour_contrast/colour.html Colour Contrast Check]
 +
* [http://www.vischeck.com/ Vischeck.com] Simulates how your style would look to an individual with color deficient vision.
 +
* [http://webaim.org/techniques/fonts/ Webaim.org article on fonts] -- List of ideas to keep in mind with the goal of making your text as legible as possible. (Also, just kinda interesting about fonts.)
  
 
= Web Hosts =
 
= Web Hosts =

Latest revision as of 02:58, 14 June 2011

Learning

CSS

Indexes

Cheatsheets

HTML

Cheatsheets

Materials

Programs

Graphics

  • Inkscape -- Open source vector image program
  • GIMP -- Open source photo/image editing
  • Aviary and Pixlr -- Web based image tools

Text Editors

Colors

Graphics

Icons

Icons can be used to replace action links, to provide visual clues and information, as decorations or to make wallpaper backgrounds. When they replace links or provide information it is important to associate alternative text to them so that screen readers or users who browse without images can use the page too.

Seamless background patterns

Seamless background patterns are patterns which can be repeated endlessly (or tiled) without elements being misaligned or lines being visible. That's why they can be used as backgrounds. They're also generally small, light images which take very little space on a server -- which is useful as image size is usually restricted on image hosts -- and are therefore much quicker to load than bigger images.

Vector Art

Vector images can usually be used to provide decorations or to make background images. The difference between ordinary images and vector images is that vector images can be easily rescaled, recolorized, rotated or transformed without distortion or quality loss then converted to the usual .jpg, .png or .gif formats.

Smashing Magazine regularly provides or links to free icon sets.

Fonts

Layouts

Testing and Checking

  • Browsershots.org -- helps you check and see what your layout looks on different browsers

Validation

Accessibility

Web Hosts

If you don't have your own server you will need to upload your resources to a web host, as Dreamwidth doesn't support media hosting yet.

  • Imgur Supports .apng, .bmp, .gif, jpeg, .jpg, .pdf, .png, .tif, .tiff, .xcf. Size is limited to 1MB for non-animated files and 2MB for animated files. Files must be viewed at least once every six months to prevent automatic deletion. File names are converted to numbers and letters. Uploading and managing is very easy.