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
Less Framework : A CSS framework for cross-device layouts, built on the principles in Ethan Marcotte’s “ Responsive Web Design ”. I’m not a huge fan of frameworks, but they can come in handy at times. (See, however, my remarks regarding using media queries for mobile experiences .) … Read the rest here
WebKit HTML5 ‘search’ Inputs : A thorough overview of the support for input type=”search” and what can (and cannot) be customized for WebKit rendering. … Read the rest here
Jason Grigsby: CSS Media Query for Mobile is Fool’s Gold : This is an interesting piece that debates the merits of using CSS media queries to build mobile-optimized experiences, tackling Ethan Marcotte’s influential article on adaptive design, “ Responsive Web Design ”. For the most part, I agree with Jason’s arguments about the context of mobile and hidden/unused files downloading in the background. These same two points are what led me to argue against handheld CSS in my book , and they remain valid in discussions about media queries, too. With the prevalence of wi-fi in daily life and the ever-increasing speeds of mobile networks, it would be easily to write off file size and download speed when creating mobile experiences. However, with such news as the elimination of unlimited data plans and this net neutrality thing , I think it’s safe to say network speed, latency, and cost will remain relevant to mobile discussions for the foreseeable future… Read the rest here
25 HTML5 Tips & Features : This is a good overview of HTML5. On the whole, doesn’t HTML5 feel like one massive code release that fixes all the Flash and Javascript hacks we’ve used over the years, e.g. the placeholder attribute for inserting hints into input fields? … 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
HTML5 Reset : Building on the work of Eric Meyer, Ethan Marcotte, and others, this reset package by Monkey Do is more than just a single style sheet. It includes an HTML5 document with rudimentary structure, CSS placeholder files, and a suggested folder structure. … Read the rest here
Diagonal CSS Sprites : Aaron Barker describes a technique for preventing neighbor images from appearing by placing the images in a sprite diagonally, rather than horizontally or vertically. The tradeoff is file size, but Aaron argues the diagonal arrangement is a more reliable approach should the original container change size. … Read the rest here
LiveReload Safari Extension : Apply CSS or Javascript changes without even reloading the page. And Gregg Pollack’s casual voiceover makes the screencast a pleasure to watch. … 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
Last night I presented a 5 minute microslot on CSS Filters – excluding older versions of IE from seeing your CSS , and feeding extra styles to specific versions of IE and mobile browsers. The slides (with presenter notes) are now available to download from the new Speaking section. Comment on this … Read the rest here
CSS3D: Stereoscopic 3D Effect with CSS3 : 3D red-cyan glasses required. … Read the rest here
Font metrics and vertical space in CSS : Tim Brown from Typekit explains the complexities of visible and invisible vertical space between characters when typesetting with CSS. … Read the rest here
Just before noon (Eastern U.S. time) today, An Event Apart Minneapolis sold its last available seat. That’s three events so far in 2010 and three sell-outs. If you were hoping to join us in Minneapolis but hadn’t registered yet, we’re sorry we won’t see you there! You can contact our Event Manager to get put on the waiting list, or you can join us for one of the remaining two shows of the year: Washington DC and San Diego . There are strong reasons to prefer either one. In Washington DC , we’ll have our second-ever A Day Apart , a full day of in-depth learning with Jeremy Keith and Ethan Marcotte taking on the topics of HTML5 and CSS3, respectively… Read the rest here
Is CSS the New Photoshop? : John Nack, Photoshop’s principal product manager: As people can do more and more in code, it makes sense to ask whether even to use Photoshop in designing Web content. I think Adobe should be freaking out a bit, but in a constructive way…. As for Photoshop, we could either teach the app to speak HTML natively (via live HTML layers ), or we could translate Photoshop-native artwork into HTML (e.g. ‘copy this button/text as HTML/CSS’). It’s not yet clear to me, however, how such code would smoothly integrate into one’s projects… Read the rest here
WebINK Font Embedding by Extensis : Another entry into the font embedding market, this one by Extensis. Fonts foundries currently include Mark Simonson Studio, Porchez Typofonderie, TypeTogether, URW, and exljbris. One nice feature seems to be the ability to control kerning within your font settings rather than just through the letter-spacing CSS property. I’m not certain, however, that kerning should be set off-site rather than within the CSS. (Though admittedly, the current CSS/browser support for kerning is lacking considerably.) … Read the rest here
Tuning Condensed Fonts with Typekit’s WebFont Loader : Jason Santa Maria: With all the webfonts available for use on websites, we have to deal with something we haven’t had to worry about before: condensed fonts. Most of your standard typographic guidelines will still be the same, but the biggest difference is sizing and font stacks in your CSS…. I’ve solved this problem on my personal site where I use Mark Simonson’s Proxima Nova Extra Condensed by incorporating some of the events in WebFont Loader to adjust the size of my text when @font-face isn’t supported [or FOUT occurs]. I’m currently running into this exact issue with a project. Impeccable timing, Jason. … Read the rest here
…that having been the original working title for “ Prefix or Posthack “, my latest article for A List Apart . (Sort of like Return of the Jedi had a working title of Blue Harvest .) In a fairly quick read, I make the case that vendor prefixes are not only good, they have the potential to be great and to deliver greater interoperability and advancement of CSS. So far the reaction has been overwhelmingly positive, which frankly came as a bit of a surprise. The annoyance factor of prefixes is undeniable, and it’s been my experience that annoyance dramatically hardens opposition regardless of whether or not there are good reasons to oppose. … Read the rest here
