If you want to preserve whitespace within an HTML element (div/span) without using non-breaking spaces (and therefore breaking word-wrap), add the following property to the CSS style(s) for that element:
There are more options available for this property as well:
This little tool is awesome. It’s like the eyedropper in Photoshop, except that it works on any pixel of your screen and gives you the hex code for the color in your clipboard. Very cool!
How it works
Move the mouse pointer to the Instant Eyedropper icon in the system tray.
Press and hold the left mouse button and move the mouse pointer to the pixel whose color you want to identify.
Release the mouse button.
That’s it. The clipboard now contains the color code – in HTML format (or any other format that you have previously specified). It can be pasted and used in any text or HTML editor or the Color Picker tool of Photoshop.
Very, very cool article for web designers:
Most designers and web developers only scratch the surface of the potent language that is CSS. In terms of programming languages, CSS has a fairly simple learning curve. That doesn’t mean that CSS isn’t a powerful language. Sometimes it’s the small things that make a huge difference in a website design.
In this post we’re going to outline 10 awesome CSS techniques for web developers who know their stuff.
There are plenty of CSS techniques and hacks out there for beginning designers. Everyone knows about the routine tricks like:
These simple tricks are all fine and very important, but today we’re going to look at some CSS techniques that are a bit more challenging. They’re not the run-of-the-mill techniques you’d teach a CSS beginner. These 10 tricks are slightly more difficult, but if done well they can add an extra special something to your website layout.
This website is incredibly useful for HTML color management, and just looks super cool:
Examine the test images in the left column below. To determine how your browser handles PNG transparency, find the images on the right that look the most similar.
Not all possible results are shown; there are too many combinations of background colors and shapes of the opaque region. However, I intend to include every result that actually occurs in a mainstream browser. If I am missing any, please let me know.
It’s come to my attention that my images which show how alpha transparency should look are not quite perfect in regard to precisely how transparent they are at various points. Rather than try to modify this page to test gamma correction issues as well, I’ve created a separate test page for that.
This test page was constructed by Jason Summers. Comments may be emailed to firstname.lastname@example.org.
There are other test pages listed at the PNG web site.
(via PNG transparency test)