IE9 Beta and CSS3 : Internet Explorer 9 Beta will be unleased in a week . Here’s what it’ll support in regards to CSS3. border-radius , box-shadow , multiple background images, RGBA, opacity , media queries, loads of selectors and much more. … Read the rest here
Building a Custom HTML5 Audio Player with jQuery : Ben Bodien, who also masterminds a lot of the jQuery, HTML5, and CSS3 material for Authentic Jobs , explains what it took to make Tim Van Damme’s audio player design for The Box a reality. … Read the rest here
CSS3 Playground : Explore CSS3 radius, box-shadow, text-shadow, and transforms in a WYSIWYG environment. See Mike Plate’s notes on the development of it. … Read the rest here
CSS3 Generator : Handy tool that spits out the syntax and associated vendor-prefixed CSS3 for properties like border-radius, box-shadow, multi-column layout and more. Especially helpful are the supported browsers icons with pop-up version numbers for each property. … Read the rest here
I’m probably way behind the curve on this one, but I recently realized the following: All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today. That’s handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend. An example: p { text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; } That will produce a paragraph with a 20% opacity black drop shadow that will blend into any background colour below it. … Read the rest here
CSS3D: Stereoscopic 3D Effect with CSS3 : 3D red-cyan glasses required. … Read the rest here
The Declaration of Independence, Rendered with CSS3 and @font-face : The markup is fairly clean, but still somewhat presentational. On the whole, however, this is nicely executed. … Read the rest here
Louis Harboe has recreated 11 iOS icons using nothing but CSS . Incredibly impressive. … Read the rest here
All of a sudden, people have been asking me to yak about myself and stuff that I know (or at least think I know). These things tend to come in waves, and right now I’m surfing like a search engine’s crawlerbot. I don’t think that metaphor made any sense at all. Anyway, here’s what I’ve had to say so far: The Geek Talk: Eric Meyer — a brief e-mail interview I did a week or so back. Want to know my favorite color… Read the rest here
CSS3 flash light : Another impressive demo from simurai (Safari only right now). … Read the rest here
Firefox 4 to Add CSS3 calc() : Paul Rouget, Mozilla: This feature hasn’t landed yet in any Firefox tree but work to implement it is underway. Firefox will support the CSS calc() value, which lets you compute a length value using an arithmetic expression. This means you can use it to define the sizes of divs, the values of margins, the widths of borders, and so forth. Ace. … Read the rest here
The Design Cubicle : A fantastic redesign by Brian Hoff; a suitable example of the reasoning behind the design: Even if living on the bold side of things isn’t for you, try at least one thing different in your next work and build around that idea. Without push[ing] boundaries the world around us remains stagnant and lifeless. Also check Trent Walton’s write-up on creating the logo entirely with CSS and @font-face . … Read the rest here
Responsive Web Design : Ethan Marcotte raises the bar regarding flexible web design with CSS3 media queries and other magic. … Read the rest here
You thought our long nightmare of PNG alpha transparency support was finally over as of IE7, didn’t you? Yeah, me too. Over the past few months I’ve been collaborating with Chris Glass on the newly-launched Joyent site. (When someone comes to you and says, hey, we have Chris Glass helping us out with this project and we’d like the two of you to work together, you jump at that chance.) I was tossing around ideas for building an interactive infographic Chris had designed, and thought of at least four different ways of pulling it off. We’re reaching this interesting point with front end web technology where we now have actual choices besides Flash for jobs like this… Read the rest here
HTML5 Readiness : Handy chart detailing comment HTML5 and CSS3 support in major browser engines. … Read the rest here
I spent the weekend immersing myself in HTML5 and CSS3. I gave Principia Gastronomica a bit of a fine-tuning under the hood. I decided to ditch all the background images I was using to get rounded corners and drop shadows, and just use border-radius and box-shadow instead. Internet Explorer gets the same content with more pointy corners and without the illusion of depth. I also launched a brand new site: ScienceHackDay.com … Read the rest here
Which Email Clients Support CSS3? : With the current minimal support for CSS3 in most email clients, the easy counter-argument here is typically, “Why bother?” But I share the same views as Ros Hodgekiss, who authored the article: Finally, just as many of the properties we have tested are considered to be experimental, we encourage you to be experimental, too. As more email clients join the fray, CSS3’s applications in email will certainly become wider-reaching than pretty shadows and rounded corners. So, take a look at the properties available to you, test it out and share your own experiences. There’s never been less of an excuse for creating a dull email! If you and I aren’t willing to explore graceful degradation and encourage email clients to adopt new features sooner than later, who will? … Read the rest here
New HTML5 Form Field Type: range : Amidst all the HTML5 buzz over the past year, somehow I missed this: HTML5 offers a new input field type, type=”range” , which renders a UI slider for entering data anywhere between the min and max values you specify. This feature could become as useful as CSS multiple backgrounds, in that a) it’s long overdue and b) we’re already faking it all over the web. The HTML5 presentation from which this slide was taken, by the way, is wonderful. It’s an interactive teaching tool on the subject of HTML5, CSS3, and JavaScript APIs. Slide 41 is really wild—press 3, then arrow left or right. Update: I failed to mention these slides are best viewed with a browser that already supports these features, i.e… Read the rest here
The central theme of Mobile Web Design was carefully and thoughtfully built on the assumption that the browser will always provide the most consistent, reliable medium for users of web content, and the most open and sustainable platform for developers of the same—all thanks to HTML, CSS, and web standards. Additionally, I argued that “smart clients” (lightweight apps installed on a device whose content is primarily fed by and stored in the cloud) would and should remain secondary to providing the same experience in the browser, again for the reasons mentioned above. Since the release of iPhone and now with the release of iPad, I’ve gradually found myself questioning more and more the assumption I made. Apple has consistently proven that holistically controlling the entire user experience—inclusive of hardware to software and everything in between—has the potential to yield a more pleasant experience overall. Think of Mac OS + Mac, iPhone OS + iPhone, and now iPhone OS + iPad… Read the rest here
iPad Ready Websites : Apple: iPad features Safari, a mobile web browser that supports the latest web standards—including HTML5, CSS3, and JavaScript. Here are just a few of the sites that take advantage of these web standards to deliver content that looks and functions beautifully on iPad. They’re speaking our language. I’m listening. /via Daring Fireball … Read the rest here
