AsktheCSSguy.com and Hunlock.com shows you how to add small icons next to your links that will show where that link will take you. Everything is managed by your CSS file and it’s pretty nifty!
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
RedVodkaJelly.com has a short and neat tutorial where you can learn to create easy image rollovers using the standards.
I really hate having to use JavaScript for image rollovers as it seems messy, requires two separate images and can only degrade gracefully to nothing if the user has JavaScript turned off. In an attempt to find an all CSS method of achieving the same effect I discovered the following all CSS image rollover method this morning.
Check out these free CSS layouts!
There are a total of 53 Fixed width CSS Layouts for download. All markup has been validated against a strict Doctype. I have made these CSS Layouts for Screen resolutions for 1024 x 764.Column CSS Layouts for download. All markup has been validated against a strict Doctype. I have made these CSS Layouts for Screen resolutions for 1024 x 764.
Webdeveloper.econsultant.com has posted a long link list of different ways to make a working CSS menu. It’s a total of 71 CSS menus. It’s a pretty useful bookmark for designers and programmers even if you just want to get inspiration or just want to get a working menu code.
Here comes two useful CSS design related links. The fist one is to katgal.com that shows you how to change your CSS style based on the time of the day. Katherine manage to do this using a bit of javascript and CSS.
http://www.katgal.com/2007/03/time-sensitive-css-switcher-change.html
The second link is to a site called CSS Tinderbox who offers free but very basic open source CSS/XHTML templates. This is very useful for those that want to learn CSS and XHTML.
The CSS Tinderbox is an effort to support open source web design by providing very basic, yet solid, CSS/XHTML design templates that web designers and web developers can use as the foundation for their own projects.
Here are several approaches and methods to replace a text or a text link with a background image using CSS.
Those methods are Classic FIR, Single-pixel Replacement, Radu Method and the Phark Method to name a few.
In my article yesterday, when I talked about how important the text on your website or blog is I mentioned that it is a good idea to have different stylesheets depending on if your user wants to print out the text or just read it on his screen. In this post I will show you how you make a special CSS Stylesheet for your users when they print out your homepage. It isn’t hard, in fact it is really easy!
For links there are 4 different options which you may already know, you have the standard link colour, you have the colour of the link when the mouse passes over it, you have the colour of the link once it has been clicked and you have the colour of an active link (while you have pressed the mouse on the link).
When writing these codes down many people have discussed about the order they should be written in, when a browser looks at a code it reads the top line first and works its way down, just the same as we read. I have seen many people ask about what order to put these attributes in and here is the correct way:
CSS lets you easily control your links look and style based on their current state. And with that I mean if the visitor is hovering their cursor on top of them, whetever the links have been visited etc.
Did you know that you can easily write comments in your CSS document? This can be very useful or just plain silly. It’s all up to you. 
1. Open up your CSS document.
2. Type in /*
3. Type in the comment you want to use.
4. End the tag with */
It could look something like this:
#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}
/* End Typography & Colors */
You are currently browsing the archives for the CSS category.
Subscribe to RSS-feed.