| CSS… 3? |
As promised, here is more on CSS techniques and graphic element implementations. To start I would like to explain what “Sliding Doors� are that I mentioned in my last post.
Simply it is a method of using CSS positioning to fake a rollover with one image that has both instances of the button and there by on the rollover it slides the image over to show the other state of the button. This greatly reduces loading time because there is no preloading required and you only have one image that you are working with instead of a separate instance for each button. The drawback is that you cannot use styled fonts. If you want a non-standard font (e.g. serif or sans serif along with the classic Arial, Helvetica, Veranda, Times New Roman, etc.) this is not the way you want to go because this effect is made by changing the a:link, a:visited, and a:hover background-image position.
I am impatiently awaiting a full support for CSS 3. Just some of the nifty things the newest version of CSS can do is rounded corners through the definition of only two numbers you can define an elliptical radii and thereby set the curvature of your container. This will also set the background to a rounded state even it you have your border set to none. Speaking of borders, CSS 3 has a new “wavy� boarder style that applies a wavy line to the boarder. You can also define images to your borders now just to increase the customization that so many designers have been using hacks and other less desirable methods to achieve the aesthetic quality they demand in their work. Unfortunately this presents us the same problem that exists now with the IE (Internet Explorer) browser support of the PNG file format. IE 6 does not support the alpha channel required to correctly display transparent PNG images. IE 7 however does. Because IE 6 does not we still must avoid the PNG and settle for the GIF format because IE 6 is still widely in use. If we were to try to use a PNG image then we would not be able to make a good design for IE 6, so for now we must ignore the advancements made in IE 7. So Until CSS 3 becomes supported by all browsers we will still have to use our workaround methods and hacks to get a display that will work for everyone. Even CSS 2 isn’t fully supported by all the browsers, or it is rendered differently because of the functionality of that particular browsers interpretation of the CSS.
Some CSS 3 properties are supported by some browsers, but not all. Transparency is one such property. One of the main focuses of CSS 3 was better text / font control for the designers that have wanted to implement some more typographical elements into their web designs. These text / font properties are almost all fully supported, but some workarounds are required still.
To take a look at the new CSS 3 properties for backgrounds and borders follow this link. http://www.w3.org/TR/css3-background/
To view a tutorial for the “Sliding Door� technique follow this link. http://www.expertsrt.com/tutorials/Cd/CSSrollovers.shtml
