If you are at SXSW, Kevin Hale and I are talking about HTML5 forms and using them to improve lead generation (and generally how to make your forms better). It's a 2.5 hour workshop which we intend to be fun, …
|March 11, 2011|
Roger Johansson has a neat quick-tip style article on centering page content both vertically and horizontally by making the html element
|March 10, 2011||41 comments|
A CSS3 technique for selecting only texty inputs, without the burdon of listing every single attribute selector for every single new HTML5 input type. Plus alternates.
|March 8, 2011||59 comments|
Long writeup about the experience Jeff Starr and I had self publishing our book.…
|March 8, 2011|
New must-subscribe-to site. Under the hood: curiously not HTML5. Almost feels rare these days. …
|March 7, 2011|
Little download packages by Mark Pilgrim that contain @font-face files that are super tiny because they contain just a single character: the ampersand. They come with an HTML demo so using them is an easy copy-and-paste job.…
|March 7, 2011|
Microsoft themselves is tracking and promoting the demise of IE 6. China? 34.5%? Seriously?
And I can't help but hum a little Europe:
We're leaving together
|March 4, 2011|
Trevor Davis from Viget Labs with some clever and real-world implementations of pseudo elements.
There is so much to talk about with these pseudo elements it's crazy. I'm speaking at a few conferences coming up and I'm putting together a …
|March 3, 2011|
Randomly this week, I've had more-than-normal number of comments from folks who ask me something like:
Went to go tweet/share a blog post of yours, and noticed you don't have any of those on your site. Interesting, any reason why?…
|March 3, 2011||102 comments|
Kind of a classic little trick for ya'll today. You know the
|March 2, 2011||57 comments|
Declaring just 'sans-serif' as the font-family means you'll get Helvetica on Mac, Arial on PC, and still have the good generic keyword fallback.
|February 28, 2011||54 comments|
jQuery plugin by Daniel Rapp to fill any element with background noise. Uses
|February 27, 2011|
Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it's easiest/best to use the
|February 25, 2011||34 comments|
Just a fun experiment creating progress bars made with just CSS3 (no images). Loads of progressive nerdery packed into one little element.
|February 24, 2011||47 comments|
Bokuh is the effect of backgrounds in photographs with deep depth of field. Shapes round out and get blurry. Think of a really out of focus picture of a lighted Christmas tree. Divya Manian creates that effect in WebKit by …
|February 24, 2011|
Funny article from Thierry Koblentz on CSS selector efficiency. Although there are cases where multiple ID selectors are needed, a selector like
|February 21, 2011|
|February 20, 2011||26 comments|
As a follow up to asking people if they are using HTML5 or not, I asked the people who are:
What features of HTML5 have you used on production sites?
These are the levels of popularity, from almost 3,000 …
|February 17, 2011||31 comments|
When designing for print, having a properly calibrated monitor makes all the sense in the world. If done perfectly, what you see on the monitor should look like what you get on paper from a printer. No surprises.
When designing …
|February 15, 2011||76 comments|
Creating an image rollover is pretty easy with CSS. Give the element a background-image, then on it's
|February 14, 2011||44 comments|
Just in case anyone doesn't read Smashing Magazine, Eric Meyer has a long excerpt from his latest CSS book here which is loaded with good stuff. I particularly liked the bit about clearing :nth-child elements combined with media queries.…
|February 11, 2011|
A WebKit-only demo of a loading animation. Loading text slowly reveals itself over and over while a spinner rotates around in a circle over and over infinitely.
|February 10, 2011||29 comments|
You can set a max-width on the html element which helps keep fluid width sites under control with zero extra markup. Plus it's got pretty good browser support with a No Big Deal™ fallback.
|February 9, 2011||22 comments|
|February 8, 2011||60 comments|
Good news everyone! This is fixed in both stable releases of the WebKit browser Safari (5.1) and Chrome (13)
It's not every day you come across a solid bug in WebKit, which it seems to me leads the pack in …
|February 4, 2011||17 comments|
I bet a lot of you are using @font-face in your designs. It's probably worth updating to this new syntax, which deals with IE9 and Android better than previous popular methods.…
|February 3, 2011|
In other words, "Different transitions on
|February 3, 2011||35 comments|
Sam Collins with a big writeup on his experience using media queries and comparing them against other mobile optimization techniques. There are lots of good practical tips to use inside your media queries like:
|February 1, 2011|
|February 1, 2011||29 comments|
A jQuery based solution for equalizing the heights of boxes across the horizontal row they are in. Different rows can have different heights. Originally by Stephen Akins.
|January 31, 2011||79 comments|
Use jQuery to replace a section of the page with that same section of the page from a different URL. The trick is to grab the contents of the section, not the section itself.
|January 28, 2011||51 comments|
Tim Brown reminds us that:
When it comes to type rendering on the web, there’s not much web designers can do.
He's talking about literally how well type renders on the screen. There are a handful of properties that have …
|January 27, 2011|
|January 27, 2011||8 comments|
My buddies at Unmatched Style reviewed this here very site. Make sure to check out the video at the top where Gene and I talk about some of the design decisions and behind the scenes tech. …
|January 26, 2011|
I kinda like this idea:
It's a TXT file [at the root of your site] that contains information about the different people who have contributed to building the website.
A lot of websites should just have an about page where …
|January 25, 2011|
Tab Atkins Jr:
...the time until this starts showing up in nightly builds of Webkit is measurable in months.
...this is one of those things that you'll have to wait a decade for before you can reliably use in …
|January 25, 2011|
I was watching some commercial the other day and they had these letters fly in over a black screen and reveal an image beneath them. It was a pretty cool looking effect and it reminded me how WebKit has that …
|January 24, 2011||34 comments|
You know the little blue knobby on WebKit range inputs? And all those fancy
|January 20, 2011|
|January 18, 2011||11 comments|
|January 17, 2011||52 comments|
|January 15, 2011|
... is now the same as the Mozilla / Official spec version, which is great because 1) it's easier to write and technically more powerful and 2) yay standards!
It's only in the WebKit nightlies, but I'm sure will be …
|January 15, 2011|
|January 12, 2011||14 comments|
Google Chrome is dropping support for the video codec H.264. Kinda feels like an Apple vs. Google pissing match as H.264 is so heavily used by Apple and WebM was developed by Google.
For HTML5 video, this is how it …
|January 11, 2011|
Reader Paul writes in:
What's the difference between
It's great you are asking questions like this Paul. The answer is very important to understanding CSS, because these two selectors select very …
|January 10, 2011||26 comments|
I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. …
|January 9, 2011||44 comments|
From the source code:
this site is by Paul Irish
HSL is better than RGB. The reason it isn't used as much (according to me) is …
|January 5, 2011|
Have you ever wanted to absolutely or relatively position a table cell? Well, I can't help you there. Table cell elements just won't take those position values. And thus, you also can't absolutely position elements within the context of those …
|January 4, 2011||16 comments|
Got a couple of slightly-oldie-but-goodies for you:
|January 3, 2011||19 comments|
Reader Nicolas writes in:
I'm frequently seeing ID and class specifications to
|January 2, 2011||50 comments|
*May or may not contain any actual "CSS" or "Tricks".