:nth-child tester
Handy tool for testing various equations in an :nth-child CSS3 selector (which rocks)…. Read the rest here
Posts Tagged css3
Events and A Day, Belatedly
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
Multiple Backgrounds and CSS Gradients
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
Multiple Backgrounds and CSS Gradients
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
Events in 2010
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
The Handbag has been raised!
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
The Handbag has been raised!
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
Making Workshops for the Web
The latest Clearleft offering is Workshops for the Web . It made sense to move our workshop offerings out of the Clearleft site—where they were kind of distracting from the main message of the company—and give them their own home, just like our other events, dConstruct and UX London . As well as the range of workshops that can be booked privately at any time, there’s a schedule of upcoming public workshops for 2010: CSS3 Wizardry on January 29th , Copywriting for the Web on March 5th , HTML5 for Web Designers on April 23rd , UX Fundamentals on June 11th and Usability Testing on July 16th . The next workshop, CSS3 Wizardry with Rich and Nat , promises to be packed full of cutting-edge front-end techniques. Book a place if you want to have CSS3 kung-fu injected into your brainstem. Visual Design I’m pretty pleased with how the site turned out. … Read the rest here
Going Nuts with CSS Transitions
Wonderful article by Natalie Downe on using CSS3 transitions and transforms. Excellent and appropriate examples. … Read the rest here
More on the sorry state of web design education
Yesterday I documented my thoughts and observations on the standard of digital design education. From talking to current and recent students I’ve shared their frustrations as they bemoan being taught out-of-date technologies by lecturers far removed from the daily practices of design. Through visiting degree show I’ve witnessed a slew of substandard work caused by an over reliance of tool based education and a lack of design thinking ( If I witness one more Flash portfolio in the shape of a designers studio I think I’m going to cry.) So where does this problem arise from and what can be done? It’s true that the web is still in it’s infancy and the profession doesn’t have the heritage of architecture or product design. However the web isn’t as young as it used to be and change happens a lot slower than we’d like to think. I’ve been pushing web standards for nearly a decade, yet we’re only now starting to see wide spread adoption. … Read the rest here
Think Vitamin interview
A quick interview with Carsonified’s Keir Whitaker, on bulletproof design, CSS3 and a little leak on what Dribbble is. … Read the rest here
Future Talk
Ten years ago, two of my biggest fears were: flying and public speaking. I’ve done enough of both (usually combined) over the last several years to where I’m now OK with either. At times even comfortable with it. I’ll probably always get nervous right before a talk — but the anxiety has shifted from, “crap, how am I going to get through this” to, “I want this to be good . I don’t want to let anyone down”. With that confession out of the way, the next year is filling up with some great events, and I thought I’d list them here: Future of Web Design NYC — November 17th, 2009. … Read the rest here
Browser support for CSS3 and HTML5
“I’ve taken all the A-Grade browsers and tested them one-by-one for their feature support. Needless to say it’s produced some interesting results.” … Read the rest here
The dConstruct Time Capsule
You have just two more days to enter the dConstruct Time Capsule competition which could win you a VIP ticket to the conference, including dinner with the speakers at a swish restaurant and two nights at a fancy-pants hotel in Brighton. Tickets to the conference are very, very near to selling out so winning might be your only chance to get to dConstruct this year. How do you enter? Well, the theme of this year’s dConstruct is Designing for Tomorrow so that got us thinking about what we would preserve for the future in a time capsule. So take a look around you. … Read the rest here
The dConstruct Time Capsule
You have just two more days to enter the dConstruct Time Capsule competition which could win you a VIP ticket to the conference, including dinner with the speakers at a swish restaurant and two nights at a fancy-pants hotel in Brighton. Tickets to the conference are very, very near to selling out so winning might be your only chance to get to dConstruct this year. How do you enter? Well, the theme of this year’s dConstruct is Designing for Tomorrow so that got us thinking about what we would preserve for the future in a time capsule. So take a look around you… Read the rest here
How to stop images breaking rounded corners in Safari
Currently when you place an image (or any ‘replaced content’) inside a block with rounded corners set by -webkit-border-radius , the image pokes through the rounded corners on Safari (version 4.01 at the time of writing). Image breaking through rounded corners in Safari 4.01 The expected and desired behaviour is that the image be cropped by the rounded corners. This can be achieved by applying overflow:hidden to the container, as per my little test case . Image cropped at the rounded corners in Safari 4.01 As you can see it’s still not perfect as the image overlaps the border. However work is at hand to rectify the situation, which was seemingly caused by a vagueness in the CSS 3 Backgrounds and Borders module. On the CSS WG public mailing list it was resolved that “overflow:visible does not allow replaced content to overflow”… Read the rest here
dConstruct Tickets on sale from 11am Monday
Yes, it’s that time of year again. Time to set your alarms or calendar notifications as tickets for dConstruct go on sale this Monday at 11am. As always we’ve scoured the world to bring you an amazing line-up of speakers. People who educated, entertained and inspired us over the last couple of years. We’ve got insightful speakers like Adam Greenfield , author of “Everyware”, talking about ubiquity and location, or Russell Davies from Wired Magazine talking about the rise in post digital culture… Read the rest here
dConstruct Tickets on sale from 11am Monday
Yes, it’s that time of year again. Time to set your alarms or calendar notifications as tickets for dConstruct go on sale this Monday at 11am. As always we’ve scoured the world to bring you an amazing line-up of speakers. People who educated, entertained and inspired us over the last couple of years. We’ve got insightful speakers like Adam Greenfield , author of “Everyware”, talking about ubiquity and location, or Russell Davies from Wired Magazine talking about the rise in post digital culture. We’ve got entertaining and educational sessions like Nathan Shedroff and Chris Noessel ’s excellent talk about interaction paradigms in science fiction movies. … Read the rest here
Font Embedding Now
Currently one of the biggest stumbling blocks to embedded type on the web is of a legal nature rather than any genuine technological barrier. Most of the major browsers have now implemented the @font-face property, and between sIFR and Cufón there are also alternatives for providing non-standard typefaces to browsers that haven’t caught up yet. So the technology that allows us to embed custom fonts is more or less here, but the licensing debate rages on. Richard Rutter and Simon Klein have written a great pair of posts summarizing the concerns some foundries have with embedding, while countless other opinions have come out in favour of both addressing and ignoring these concerns. But this is really for the foundries and the browsers to figure out. … Read the rest here
Hyphen Nation
Lionel Schriver’s piece in the Standpoint called Dashed Bad Form is a witty affair, comparing and contrasting the semicolon and the em dash . Alas, the self-describing nature of the article is completely lost in the online version—though presumably not in the print edition—having suffered the all-too-common fate of emdashculation; every instance of an em dash in the article has been converted into a plain ol’ hyphen. Oh, the irony! …proper irony too—not that confused Alanis Morissette kind . It’s probably a CMS issue. But, hey, it’s as good an opportunity as any to point to the classic article on A List Apart , The Trouble With EM ’n EN (and Other Shady Characters) . … Read the rest here