Ok, so on a site like this one, there is a tremendous amount of 'code' styled with CSS fonts in a pre, code, var, tt, samp, or kbd html tag. When using an programming tool like VIM to write code it is shown beautifully using your OS fonts. So then, how can we get that same font beauty to be there on the web? And, of course the solution must use best-practices (and preferably only use CSS and (X)HTML).
Also, text effects! --> View Solution
The idea is to use CSS to have the browser display programming and code similar to the high-quality look of a developers machine, like this older screenshot of my VIM.
Its really nice to be able to print out a webpage you are reading using your browsers built-in print feature. Using CSS you can easily transform your site into a print-friendly site.
Today I received an email from a visitor to my site requesting that I add a way to print site articles on AskApache
Let me show you an example that works so well I am using it right now on my site. Every page in fact. If you are a young or up and coming web developer with skills to pay the bills, lets make the future Net fast, learn about optimization and refactoring while you still have the chance.
CSS is one of the most useful tools I have in my toolbox as a Web Developer. Having a CSS Toolbox containing good CSS Classes that you repeatedly use is quite helpful for us XHTML / web-standards / best-practices developers. Check out 10 of my favorite CSS classes.
PoshCSS.com has links to nice and new CSS Articles. Don't worry, they aren't snobs. ;)
Using a CSS Background Image Sprite with the CSS
background-image I can display all these icons: . I can even have them show up anywhere on the page!
I used to have a problem of controlling flash elements on my sites.. On one site we have 6 different flash flv movies that are all the same size and are in the same position on the page. But only 1 is displayed at a time based on what the user wants to watch. So the selected flash movie needs to have the highest stacking order/zIndex.
An Image Sprite is simply multiple images combined into one image. Using the
background-position in CSS you can display a specific image from the image sprite.
Sprites reduce the number of files that are requested and downloaded by site visitors, resulting in noticeable decreases in Page-Loading times, Bandwidth usage, and Server loads.
full article: alistapart.com
- Everything you know is wrong sort of
- It's not going to look exactly the same everywhere unless you're willing to face some grief and possibly not even then
- You will be forced to choose between the ideal and the practicable
- (with thanks to Antoine de Saint-ExupÃƒÂ©ry): Perfection is not when there's nothing to add, but when there's nothing to take away
- Some sites are steaming heaps of edge cases
- Longer lead times
When you want to compress your CSS files, heres a list of some free online CSS compression tools. Of course I am partial to my own CSS Compression Tool.