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…
Nate Croft and Jon Longnecker (remember Jon?) from FortySeven Media have a new video podcast they are producing called The Kick Awesome Show. CSS-Tricks was happy to sponsor Episode 13.
These guys sure look like they have a lot of fun making this show. They do a little Q&A, highlight cool web-things, do music picks (ala their other pet project), etc. It’s also super high quality video. Check out the cool ad they did for…
What do you think folks? I’ll hold off on any opinions until we wrap it up. Poll is over in the sidebar.
A section of text that fades into the nothingness. But wait, a beacon. A “read more” link shines through the darkness. Click upon it and all text is revealed! CSS3 gradients are used for the text fading and jQuery is used to handle the animated reveal.
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.
There are all kinds of CSS resets, from the ever-popular Meyer reset, to the newfangled HTML5 reset. Do you know what the difference between the different ones are? It's a bit hard to picture, even when looking at and comparing the code. Jeff Starr created this new little clever website which allows you to see different types of content with different resets applied, and even pull in your own websites content to try.
Nice little article with visual demos on the different timing functions for CSS transitions. The progress bar is neat. Also notice the scaling transform on the table of contents. Not sure I love that exact implementation but I like the concept.
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.
