Every now and then I look at using background-position-x and background-position-y but can never seem to find a definitive and up-to-date resource. To save myself the trouble in the future, I’m documenting it here. Positioning via separate X and Y values is a feature that Internet Explorer introduced but never made it into a W3C specification. Any recommendations to add it to the spec have been denied . Why have separate X and Y values? … Read the rest here
Handy tool for testing various equations in an :nth-child CSS3 selector (which rocks)…. Read the rest here
The winners of Microsoft’s MIX 10K Smart Coding Challenge (for which I was honored to serve as one of the judges ) have been announced, and the Grand Prize has been awarded to… Jimmy D ’s Frog Log . Which is an HTML5/CSS/JS entry. That doesn’t run in Internet Explorer. Yep. Frog Log was my top pick, and obviously did very well with the other judges too, for a good reason: it’s a fun game. It doesn’t play quite the same in Firefox previous to v3.5, as the drag-n-drop doesn’t work. … Read the rest here
It’s been said before that web inspectors—Firebug, Dragonfly, the inspectors in Safari and Chrome, and so forth—are not always entirely accurate. A less charitable characterization is that they lie to us, but that’s not exactly right. The real truth is that web inspectors repeat to us the lies they are told, which are the same lies we can be told to our faces if we ask directly. Here’s how I know this to be so: body {font-size: medium;} Just that. Apply it to a test page . Inspect the body element in any web inspector you care to fire up. … Read the rest here
Monospace text sizing is, from time to time, completely unintuitive and can be quite maddening if you don’t look at it in exactly the right way. Fortunately, there is a pretty simple workaround, and it’s one you might want to consider using even if you weren’t aware that a problem existed. But first, allow me to lay some foundations. Assuming no other author styles beyond the ones shown, consider the following: span {font-family: monospace;} <p>This is a ‘p’ with a <span>’span’</span> inside.</p> All right, what should be the computed font-size of the span element? Remember, there are no other author styles being applied. … Read the rest here
In the course of digging into the guts of a much more complicated problem, I stumbled into an interesting philosophical question posed by web inspection tools. Consider the following CSS and HTML: p {font-size: 10px;} b {font-size: 1.04em;} <p>This is text <b>with some boldfacing</b>.</p> Simple enough. Now, what is the computed font-size for the b element? There are two valid answers. Most likely one of them is intuitively obvious to you, but take a moment to contemplate the rationale for the answer you didn’t pick. Now, consider the ramifications of both choices on a situation where there are b elements nested ten layers deep. … Read the rest here
In the course of digging into the guts of a much more complicated problem, I stumbled into an interesting philosophical question posed by web inspection tools. Consider the following CSS and HTML: p {font-size: 10px;} b {font-size: 1.04em;} <p>This is text <b>with some boldfacing</b>.</p> Simple enough. Now, what is the computed font-size for the b element? There are two valid answers. … Read the rest here
I’m a bad conference organizer. Why? Because we opened the An Event Apart 2010 schedule for sales back in, um, flippin’ November , and I never mentioned it here. Cripes, I never even posted when we announced the lineup of cities. I could go through the great big long sob-story list of reasons why 2009 was really tough and blah blah blah, but when you get right down to it, I fell down on my job. Okay… Read the rest here
CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I’m covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting. Multiple Backgrounds What are multiple backgrounds when it comes to CSS? I mean the ability to define more than one background image for a single element. That sounds wonderful, doesn’t it… Read the rest here
This year will be a busy one in terms of speaking events. I’m currently crafting a brand new talk titled, “The CSS3 Experience”. It’ll focus on enriching the experience layer with advanced CSS and CSS3. Everyone can easily add enhancements to to their designs when focusing on the interactions and events that happen on the page. And by targeting the user experience with these new and evolving standards, you can start using these flexible techniques now, on any site, with less worry. Well damn, that sounded rather pitchy, didn’t it… Read the rest here
This year will be a busy one in terms of speaking events. I’m currently crafting a brand new talk titled, “The CSS3 Experience”. It’ll focus on enriching the experience layer with advanced CSS and CSS3. Everyone can easily add enhancements to to their designs when focusing on the interactions and events that happen on the page. And by targeting the user experience with these new and evolving standards, you can start using these flexible techniques now, on any site, with less worry… Read the rest here
How often have you read a snide, bumptious or haughty comment where you feel the only reaction could be a raised handbag, accompanied by the high-pitched mocking call of “oooOOOooooh!”? If you’re not familiar with the work of Vic and Bob , the chances are that it’s never . Well, hopefully that will soon change, as Hicksdesign has launched a site to fulfill that need you never knew you had to “oooOOooooh!”: Now whenever you see such a comment, you point them in the right direction: oo00.eu (2 oh’s, 2 zeros and a european union). Obviously, feel free to use it on me if say some deserving! 
If you’re still confused, this video might help explain the origins of the raised handbag as a retort, (before going on to become a surreal contest): Playing catch-up This little side-project was the perfect opportunity to play with new CSS3 toys and HTML5 tags that I haven’t had time to experiment with yet: CSS Animations : In any webkit browser (Safari, Omniweb, Chrome), the handbag will actually be raised, waved at you, and then lowered. There is a separate animation for the shadow underneath the bag. … Read the rest here
How often have you read a snide, bumptious or haughty comment where you feel the only reaction could be a raised handbag, accompanied by the high-pitched mocking call of “oooOOOooooh!”? If you’re not familiar with the work of Vic and Bob , the chances are that it’s never . Well, hopefully that will soon change, as Hicksdesign has launched a site to fulfill that need you never knew you had to “oooOOooooh!”: Now whenever you see such a comment, you point them in the right direction: oo00.eu (2 oh’s, 2 zeros and a european union). Obviously, feel free to use it on me if say some deserving! If you’re still confused, this video might help explain the origins of the raised handbag as a retort, (before going on to become a surreal contest): Playing catch-up This little side-project was the perfect opportunity to play with new CSS3 toys and HTML5 tags that I haven’t had time to experiment with yet: CSS Animations : In any webkit browser (Safari, Omniweb, Chrome), the handbag will actually be raised, waved at you, and then lowered. There is a separate animation for the shadow underneath the bag… Read the rest here
I had noticed this little bug on my own site. In the footer, there’s a 5px border with the colour set using rgba. In Safari, it’s as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares. Not quite what you’d expect. … Read the rest here
I had noticed this little bug on my own site. In the footer, there’s a 5px border with the colour set using rgba. In Safari, it’s as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares. Not quite what you’d expect. … Read the rest here
I was recently honored to be asked to be a judge for the MIX 10k Smart Coding Challenge , running in conjunction with Microsoft’s MIX conference . The idea is to create a really great web application that totals no more than 10KB in its unzipped state. Why did I agree to participate? As much as I’d like to say “ fat sacks of cash “, that wasn’t it at all. (Mostly due to the distinct lack of cash, sacked or otherwise. Sad face.) The contest’s entry requirements actually say it for me. … Read the rest here
Wonderful article by Natalie Downe on using CSS3 transitions and transforms. Excellent and appropriate examples. … Read the rest here
A friend was looking at doing a simple slideshow. The requirements were very straightforward: No animation controls. eg: play, stop. Images should cross-fade. Her instinct was to find an existing jQuery plug-in and revise it to work to her needs. … Read the rest here
Pitchfork pitched in with theirs back in October, the NME did it more recently, and this weekend the Observer/Guardian published theirs . Today it’s my turn. I know you’ve been waiting with baited breath for what is the ultimate list of the top fifty albums of the decade. And was it a good decade? There was no emerging or prevalent musical ‘movement’ that I’m aware of, unlike Britpop and the ecstasy-fuelled Dance of the Nineties. That decade will always be a defining era for me because it’s when my musical taste left the mainstream for a more independent view… Read the rest here
Jason Santa Maria Go to the source
Well, it only took nearly a hundred issues since working on the A List Apart redesign for me to get around to writing an article. I’ve had a blast working behind the scenes working with authors on fleshing out the visuals for their articles, but after repeated kindly nudges from the rest of the ALA staffers, I wrote one of my own: On Web Typography . This has been a year packed with talk of type on the web. We’ve been making great strides in bringing real fonts to the web, a good progression that will help us rely less on replacement techniques. There are many great articles that boil down the technical hurdles involved in doing so, but I wanted to tackle what happens to our designs once we have lots of typefaces to choose from… Read the rest here