CSS is a valuable tool to help web designers quickly and easily add quality design effects to web pages while keeping the presentation layer completely separate from the structural layer. Here is a roundup of several current (and future) advanced CSS tutorials that you can use to help give your web site the professional look that people expect.
CSS Selectors
1. CSS attribute selectors: Precision styling at your fingertips
A CSS attribute selector is a special style declaration that allows you to target elements through their attributes.
2. How to add file type Icons to Links with CSS
CSS 2.1 has many new wonderful capabilities, and I'm going to show you one of my latest tricks I've picked up - automatic link icons.
Drop Shadows
3. 10 resources to get the most out of the CSS text-shadow property
The CSS text-shadow property is very popular among web designers and front-end developers. In this article, let's take a look at 10 resources to get the most out of the text-shadow CSS property.
The CSS2 text-shadow property makes it easy to add a drop shadow to a web page's text, but so far it's only supported by the Safari browser for OS X. Today we're going to create CSS drop shadows for other browsers, including Firefox.
5. Make cool and clever text effects with css text-shadow
The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.
6. CSS Text-Shadow in Safari, Opera, Firefox and other Web Browsers
The CSS 2 property text-shadow is supported in Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Google Chrome since version 2, Konqueror and iCab. In fact, text-shadow is supported by all browsers that are based on WebKit, the rendering engine behind Safari and Chrome. Internet Explorer 8 does not support such text shadows (except for some DirectX image transform filters).
Gradient Fill
Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).
Text Gradient is a simple css trick that allows you to improve your site's appearance by putting gradients on system font titles using nothing but css and a png image.
Letterpress Text
9. Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it's now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
10. Two simple ways to create text embossing effect
Embossing is very popular trend in web design (the actual term for this effect is "inset", although many people call it embossing). In the same time it is very simple to create. This short tutorial will show you how to create this effect usng pure CSS and using Artweaver.
11. Text Embossing Technique With CSS
In this article I will show you a couple of real world examples of this, as well as describing how to implement this effect with CSS. More importantly, I give you the rules around how to correctly add an embossed effect to any text depending on the colors used.
Modal Window
12. CSS Lightbox
This is a demonstration of the lightbox technique, using XHTML and CSS without any javascript. Sorry IE users, it only works in Firefox and Safari.
Rounded Corner
13. CSS Rounded Corners 'Roundup'
This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it's hard to know which one to choose.
Navigation Menus
14. Ultimate CSS List Creation Methods and Examples
There are many uses of Unordered list such as horizontal navigation, vertical navigation, creating a box or any kind of list. In this post we will show you some really useful CSS list methods that you can use to create horizontal, vertical list or CSS list box.
15. Using CSS and a simple list to create radically different list options
Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.
In this article, I'll demonstrate how to use CSS to bring unwieldy lists under control. It's time for you to tell lists how to behave, instead of letting them run wild on your web page.
Transparency
17. A working solution for transparency in web standards browser
The RGBa let's you set the RGB values for Red, Green and Blue, like in a regular RGB CSS color, but then adds 'a' for the alpha channel.
18. Creating transparent images with CSS is easy.
Note: This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.
What is your favorite CSS property to give your web designs that extra 'wow' factor?
Twitter Reactions:
CSS is a valuable tool to help web designers quickly and easily add quality design effects to web pages while keeping the presentation layer completely separate from the structural layer. Here is a roundup of several current (and future) advanced CSS tutorials that you can use to help give your web site the professional look that people expect.
CSS Selectors
1. CSS attribute selectors: Precision styling at your fingertips
A CSS attribute selector is a special style declaration that allows you to target elements through their attributes.
2. How to add file type Icons to Links with CSS
CSS 2.1 has many new wonderful capabilities, and I'm going to show you one of my latest tricks I've picked up - automatic link icons.
Drop Shadows
3. 10 resources to get the most out of the CSS text-shadow property
The CSS text-shadow property is very popular among web designers and front-end developers. In this article, let's take a look at 10 resources to get the most out of the text-shadow CSS property.
The CSS2 text-shadow property makes it easy to add a drop shadow to a web page's text, but so far it's only supported by the Safari browser for OS X. Today we're going to create CSS drop shadows for other browsers, including Firefox.
5. Make cool and clever text effects with css text-shadow
The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.
6. CSS Text-Shadow in Safari, Opera, Firefox and other Web Browsers
The CSS 2 property text-shadow is supported in Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Google Chrome since version 2, Konqueror and iCab. In fact, text-shadow is supported by all browsers that are based on WebKit, the rendering engine behind Safari and Chrome. Internet Explorer 8 does not support such text shadows (except for some DirectX image transform filters).
Gradient Fill
Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).
Text Gradient is a simple css trick that allows you to improve your site's appearance by putting gradients on system font titles using nothing but css and a png image.
Letterpress Text
9. Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it's now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
10. Two simple ways to create text embossing effect
Embossing is very popular trend in web design (the actual term for this effect is "inset", although many people call it embossing). In the same time it is very simple to create. This short tutorial will show you how to create this effect usng pure CSS and using Artweaver.
11. Text Embossing Technique With CSS
In this article I will show you a couple of real world examples of this, as well as describing how to implement this effect with CSS. More importantly, I give you the rules around how to correctly add an embossed effect to any text depending on the colors used.
Modal Window
12. CSS Lightbox
This is a demonstration of the lightbox technique, using XHTML and CSS without any javascript. Sorry IE users, it only works in Firefox and Safari.
Rounded Corner
13. CSS Rounded Corners 'Roundup'
This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it's hard to know which one to choose.
Navigation Menus
14. Ultimate CSS List Creation Methods and Examples
There are many uses of Unordered list such as horizontal navigation, vertical navigation, creating a box or any kind of list. In this post we will show you some really useful CSS list methods that you can use to create horizontal, vertical list or CSS list box.
15. Using CSS and a simple list to create radically different list options
Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.
In this article, I'll demonstrate how to use CSS to bring unwieldy lists under control. It's time for you to tell lists how to behave, instead of letting them run wild on your web page.
Transparency
17. A working solution for transparency in web standards browser
The RGBa let's you set the RGB values for Red, Green and Blue, like in a regular RGB CSS color, but then adds 'a' for the alpha channel.
18. Creating transparent images with CSS is easy.
Note: This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.
What is your favorite CSS property to give your web designs that extra 'wow' factor?
1/12/2010, 7:19pm
Reader