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
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
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
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. … 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
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
Celebrating Firefox 3.6’s support for WOFF (Web Open Font Format), FontFont is giving away the WOFF version of FF Nuvo for free. … Read the rest here
Celebrating Firefox 3.6’s support for WOFF (Web Open Font Format), FontFont is giving away the WOFF version of FF Nuvo for free. … 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
You probably experience this on a regular basis: a client sends you an illustration or a logo they’d like to use in a project, but it’s a low-res bitmap or a flat image file with a background texture. Or both, if you’re really lucky. Sure, you can try and ask for a vector version, but more often than not what they originally sent was the best copy they had on hand. I seem to have made something of a hobby out of trying to coax useful results out of this type of file. Over the years I’ve stumbled across far better ways of doing it than manually clipping the background with the the magic wand or various selection tools. For the next time you’re handed a less-than-ideal source image, here are a few of my tricks for isolating the part of the file I want to work with in Photoshop. … Read the rest here
A really quick screencast today. I twittered about how frustrating it was to have to take 5 clicks to subscribe to a feed into Google Reader within Firefox. I finally decided to take a few moments to fix the issue and get it down to one click (well, technically two, but who’s counting). Of course, this is by no means the only way to do it. Plenty of people on Twitter recommended plugins and bookmarks that could simplify the process. If you got ‘em, link ‘em up in the comments. … Read the rest here
In case you hadn’t noticed the lovely titles on this page, they’re League Gothic . Well, they should be if you happen to be using the latest version of Firefox, Safari, or Internet Explorer. However, it took much trial and error to figure out exactly how to get there. There are a number of pieces to the puzzle but in the end, I got something to work. The assumption here is that you are on a Mac (as I am) but I believe these tools work the same on PC… Read the rest here
I’ve been using Cuf
I need to document all the stuff that went into this design but for now, I’m happy just to have it launched. Why did I redesign so quickly after the last one? Because I wanted to! Inspiration struck and I ran with it. In the end, I’m much happier with this iteration over the last one and I’ll be happy to keep this around for awhile. … Read the rest here
Beer o’clock in Brighton begins shortly after work ends on a Friday evening. That’s when the geeks of Brighton unshackle themselves from their keyboards and monitors to congregate in a pub. If the weather is good, it’ll be a sunny pub . Last friday the Clearlefties descended on The Eagle where we were joined by Ribotians and others. Glenn showed up and we proceeded to geek out on our usual favourite topics; microformats and data portability. He had spent the day hacking on a Firefox plug-in. … Read the rest here
A couple of weeks ago, I recorded an interview with Kevin Yank for the Sitepoint Podcast , part of a new series of interview casts. We had a lovely chat about various topics, such as print designers moving to the web, working for Opera and the new Firefox icon. I always tend to get a bit waffly, giggly and veer of course with interviews, but it sounds like Kevin has done a grand job of editing it into a listenable mp3! Listen to the interview over at Sitepoint.com , which also has a full transcript. … Read the rest here
Once again, after reading somebody else’s article , I felt inspired to put together an alternative example. In this case: Text Rotation. Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It’s like the top fell off the pepper shaker and you’ve suddenly got a large pile of pepper on your food. It makes me want to sneeze… Read the rest here
