Acuity Designs » CSS http://www.acuitydesigns.net Fri, 11 Mar 2011 11:36:18 +0000 en hourly 1 5 Tutorials and Resources for Image Replacement Techniques http://www.acuitydesigns.net/5-tutorials-and-resources-for-image-replacement-techniques/ http://www.acuitydesigns.net/5-tutorials-and-resources-for-image-replacement-techniques/#comments Tue, 21 Oct 2008 08:27:59 +0000 London Design @ Acuity http://www.acuitydesigns.net/?p=691

1) 9 techniques For CSS Image Replacement

CSS

s a quick review, CSS image replacement is a technique of replacing a text page element with an image. An example of this would be including a logo on a page. You may want to use a tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, not text.

2) Using Background Image to Replace Text

Do you still crave the typographic control of creating headlines and decorative type with images instead of pure HTML text? Even with all the options we have for styling text with CSS, sometimes there’s just nothing that beats the indulgence of opening up Adobe Photoshop, then setting type in your favorite font at just the right size, kerning, and tracking. You know if you save it as an image and place it on a webpage, anyone with an image-enabled browser will see your typographic mastery just as you intended. Right?

3) Accesible Image Replacement

Now, I do not have a screen reader, nor have I ever used one, but I believe that I have found a better image replacement technique that actually works for people with screen reading software. The goal is to keep the text “visible” to the browser, but hidden to the user. That is to say, the text must not be able to be seen by the person viewing the website, but still has to be there.

4) Thierry Image Replacement

he various successors to the original Fahrner Image Replacement method have explored many different techniques. It seems that no stone has been left unturned by designers attempting to enhance the method. To achieve this goal they have tried all sorts of CSS attributes

5) Choose an Accessible Image Replacement Technique

What surprises me a little is that I still see people using image-based techniques that do not work at all for people browsing with images off. One of the tests I perform when checking sites for accessibility and universality is to simply turn off images in my web browser. In some cases that makes text disappear because an image replacement has been used that does not account for people with CSS on and images off.

Related Posts:

]]> http://www.acuitydesigns.net/5-tutorials-and-resources-for-image-replacement-techniques/feed/ 1 10 Tutorials and Resources to Teach You CSS http://www.acuitydesigns.net/10-tutorials-and-resources-to-teach-you-css/ http://www.acuitydesigns.net/10-tutorials-and-resources-to-teach-you-css/#comments Sat, 13 Sep 2008 00:58:55 +0000 London Design @ Acuity http://www.acuitydesigns.net/?p=474

In my quest to learn how to design using CSS to style my web designs in my development of my web skills, I compiled a list of 10 resources and tutorials that I have found invaluable in learning the basics and some intermediate tips and tricks in CSS. Hope you all find them useful in helping you to learn CSS.

Learn CSS


1) Introduction to CSS

HTML was originally designed as a simple way of presenting information, with the aesthetics of a web page being far less important than the content (and largely being left up to the web browser). Of course, now that the web has become as popular as it has, the presentation of your content has become almost critical to a site’s success. This, among other things, was why CSS was brought in.

2) Cascading Style Sheets: an Interactive Tutorial

Imagine you’ve just designed a two hundred page web site for a client (or maybe for yourself) but at the last minute your client (or you) decide the font is a little two small or the typeface should be serif instead of sans-serif? You didn’t know how to use cascading style sheets (CSS) so you coded all of the pages with the old-style tag. If you didn’t know CSS, chances are you’d have to replace every occurrence of the old tag with the new tag.

3) HTML+CSS Begineer’s Guide

So, you’re ready to take the plunge and begin to learn how to build your own web pages and sites? Fantastic! We’ve got quite a ride ahead, so I hope you’re feeling adventurous.

4) Let’s Make a CSS Web Page

Make a what, you may be asking? Well a CSS, or Cascading Style Sheet, is a file used to style a single web page — or an entire site — and position its elements. CSS is supported by the vast majority of visual browsers and offers many specific advantages (keep reading). In this tutorial I will begin with a simple Extensible Hypertext Markup Language, XHTML, layout and, using CSS, without hacks, I will position its elements and style it to make it look nice — and once done, it will remain accessible.

5) CSS Tutorial

It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and feel of your HTML documents in an organized and efficient manner.

6) Complete CSS Guide

Welcome to the Complete CSS Guide, a reference to every aspect of cascading style sheets. If you need help learning CSS or if you’re looking for info about selectors, properties and all the other aspects of cascading style sheets, this is the place.

7) Quick CSS Tutorial

A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML’s STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.

8 ) W3C CSS Tutorial

Save a lot of work with CSS!
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.

9) Create Your First CSS Website!

This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before.

10) W3C CSS Validator

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets

Related Posts:

]]> http://www.acuitydesigns.net/10-tutorials-and-resources-to-teach-you-css/feed/ 4