It’s been a tradition for years now around here for me to do a year-end wrap-up. It’s a great way of reflecting on the year, sharing some random interesting statistics, and most importantly, saying thank you to everyone who comes to this site.
Several folks pointed out that this last poll question was worded a bit strangely:
Would you start a new web project today and not use HTML5?
I worded it that way to elicit comments on why a person or organization would not opt to use HTML. However, that meant you needed to answer Yes if you would not use HTML5 and No if you would, so, possibly a bit confusing, but whattagonnado? The results show that the majority of people…
One classic layout conundrum is how much stuff to put in a sidebar. Ideally the height of the main content area and the sidebar are about the same, to avoid either area having a large blank area which can be strange looking and a waste of good web real estate. Go light on sidebar content and short content pages may be just about right but long content pages have a lot of unused sidebar space. Go heavy on sidebar content…
It’s not “spec,” but WebKit browsers support image masks. If you are familiar with Photoshop, they work like that. You declare an image to use as as mask. The black parts of that image hide what it is over, white parts of that image show what is underneath, gray is partially transparent. So if you had this image
Big thanks to Mathias Bynens for the guest post today! I’d call this a bonafide CSS trick!
A few days ago, Chris tweeted:
If we could stack pseudo elements (e.g.
:after:after) we could build a whole website with no HTML other than<html>. Probably good we can’t.
In response to this, I created this quick demo (view in Firefox or Opera), illustrating that technically you don’t need any HTML at all to…
Lea Verou with a clever idea on using CSS3 gradients that repeat (by setting background size) to create striped and checkboard backgrounds with no images.
Harry Roberts with a nice technique on using pseudo elements to create the body border effect without extraneous markup (same idea with extra markup gets you older browser support). Read the comments for some other good suggestions.
Nicole Sullivan on forcing elements to create new formatting contexts with display: table-cell and a string of X's as pseudo content to force it full width.
Follow along as we use a few very simple CSS3 transitions to create a "slideup" box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected.
