Webdesigninformer.com

Adactio Go to the source

By far the most common use of media queries is to execute CSS based on viewport width (using min-width or max-width ). Lately there’s been more talk about using media queries based on height as well. Paul talked about using min-height media queries to adjust content appearing above the fold . Owen Gregory wrote his superb 24 Ways article on using viewport proportions and device-aspect-ratio for media queries. Trent has documented his use of horizontal and vertical media queries to bump up the font size for wide and tall viewports . One of the areas where I’ve found height-based media queries to be quite handy is in combination with another CSS3 module: multiple columns . … Read the rest here

SimpleBits Go to the source

Yesterday, a copy of my latest book arrived in the mail, the Third Edition of Bulletproof Web Design . The first edition came out back in 2005, and I’ve been revising it every few years. This latest edit was a bit larger than the 2nd because so much has changed. HTML5, CSS3, Responsive Web Design—all of these things dovetail nicely into the core bulletproof concepts from the original book. If you have the 2nd edition, the new version is likely not a necessary upgrade (New Riders probably loves me for saying that). Meaning, the guidelines for building flexible websites are still there, but a lot of the code and some of the examples have been brought up to speed. … Read the rest here

Cameron Moll Go to the source

A Farewell to CSS3 Gradients : Alex Walker: While the idea of programmable gradients is great, using them is seriously messy. Even in perfect-​​browser-​​utopia, gradients are consciously limited to rudimentary linear or radial application. You certainly can’t combine them, or make them contour a shape or anything useful like that…. In short, [CSS gradients are] a blunt instrument with cranky syntax and patchy support. … Read the rest here

Eric Meyer Go to the source

In the course of experimenting with some new artistic scripts to follow up “ Spinning the Web “, I ran across an interesting interaction between positioning and transforms. Put simply: as per the Introduction of the latest CSS 2D Transforms draft , a transformed element creates a containing block for all its positioned descendants. This occurs in the absence of any explicit positioning of the transformed element. Let’s walk through that. … Read the rest here

Cameron Moll Go to the source

Spin.js, a Loading Spinner Sans Images : Uses CSS3 to render the animation, falling back to VML for Internet Explorer (all the way back to IE6). 2.8K of total code and supported by newer versions of most browsers. /via @ jc … Read the rest here

Adactio Go to the source

I was in Minnesota last week for An Event Apart Minneapolis . A great time was had by all. Not only were the locals living up to their reputation with Amy and Kasia demonstrating that Kristina isn’t an outlier in the super-nice, super-smart Minnesotan data sample, but the conference itself was top-notch too. It even featured some impromptu on-stage acrobatics by Stan . A recurring theme of the conference—right from Zeldman ’s opening talk—was Content First . In Luke ’s talk it was more than a rallying cry; it was a design pattern he recommends for mobile: content first, navigation second. … Read the rest here

Snook Go to the source

I’ve been thinking quite a bit about CSS architecture these days. One thing in particular that has crossed my mind is how to handle certain situations. For example, we want to hide content on the page and then reveal it (or vice versa). In JavaScript, this is relatively straightforward: get an element, and apply a class or remove a class to change the state of the element. … Read the rest here

Cameron Moll Go to the source

Gridless Boilerplate : This has all the right buzzwords in the sales pitch — responsive, HTML5/CSS3, vertical rhythm, CSS normalization, and the like. The only snafu I see is that the placeholder image on the demo page isn’t responsive. I’ll trust that isn’t indicative of the rest of the framework, though I admit I haven’t dived into the code too deeply. … Read the rest here

Cameron Moll Go to the source

CSS Mask-Image & Text : Here’s something I wasn’t aware of: Add a texture to HTML text using the CSS property mask-image and a transparent PNG. Currently works only in WebKit but degrades nicely for other browsers. Thanks, Trent. … Read the rest here

Cameron Moll Go to the source

Flux CSS3 Slider : Hardware-accelerated image transitions using CSS3, which, as described in the readme on GitHub , “improves performance on less powerful devices such as mobiles and tablets.” Indeed, this functions quite well on both my iPad and iPhone. … Read the rest here

Snook Go to the source

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It’s just a matter of which less-desirable is most desirable. There are two main techniques that are extolled: Size with px Size with em Let’s review these two approaches before I reveal the magical third. Sizing with px In the early days of the web, we used pixels to size our text. … Read the rest here

Cameron Moll Go to the source

Funny Bugs is a non-profit endeavor our family has been working on over the past several months. We think kids with Type 1 diabetes deserve a fun, educational, and social experience for managing their diabetes and helping others do the same. We’re making plans to build that experience in our (very) limited spare time. Our 7-year-old son, a Type 1 diabetic, has been the chieftain of the project. Funny Bugs is literally a product of his imagination. … Read the rest here

Eric Meyer Go to the source

I just shipped off the last of my drafts for CSS Pocket Reference, 4th Edition to my editor. In the process of writing the entries, I set up an ad-hoc test suite and made determinations about what to document and what to cut. That’s what you do with a book, particularly a book that’s meant to fit into a pocket. My general guide was to cut anything that isn’t supported in any rendering engine, though in a few cases I decided to cut properties that were supported by a lone browser but had no apparent prospects of being supported by anyone else, ever. For fun, and also to give fans of this or that property a chance to petition for re-inclusion, here are the properties and modules I cut… Read the rest here

Eric Meyer Go to the source

Here’s an interesting little test case for transitions . Obviously you’ll need to visit it in a browser that supports CSS transitions, and additionally also CSS 2D transforms. (I’m not aware of a browser that supports the latter without supporting the former, but your rendering may vary.) In Webkit and Gecko, hovering the first div causes the span to animate a 270 degree rotation over one second, but when you unhover the div the span immediately snaps back to its starting position. In Opera 11, the span is instantly transformed when you hover and instantly restored to its starting position when you unhover. … Read the rest here

Cameron Moll Go to the source

Ceaser: CSS Animation Tool : Speaking of year 12, this is brilliant. Preview different easing defaults, adjust the bézier curve if you like, and then grab the CSS. /via CSS3 Watch … Read the rest here

Snook Go to the source

It’s been a long time coming but I and the rest of the folks in Sidebar Creative are back this year with a brand new edition: the Web Design Master Class . We’ve partnered with UIE to put on not one, not two, but three workshops this year. Crazy, I know. Even crazier is that we’ve actually been rather quiet about the whole affair (well, except for the occasional tweet or two). Allow this venerable blog post to rectify that. What is the Web Design Master Class… Read the rest here

Eric Meyer Go to the source

Over the past couple of months, I’ve been hacking together some CSS3 tests . I did this to try to figure out what should be included in the upcoming fourth edition of the CSS Pocket Reference (and thereafter CSS: The Definitive Guide ) and didn’t plan to do anything public with them, but at this point, I figure what the heck. Maybe they’ll be of interest to others. I was especially interested by the results for list-style-type , where I found some small spots of support for various types in various browsers. In contrast, WebKit supports most of the CSS3 types, so far as I can tell, though in my install several types were apparently mangled by a lack of appropriate fonts. … Read the rest here

Cameron Moll Go to the source

Hiring: Mobile Web Developer at WillowTree Apps : Virginia-based WillowTree Apps has launched an impressive 70+ apps since 2008 for the iOS, Blackberry, Windows 7, and Android platforms. I was fairly impressed as I flipped through their portfolio. If you know HTML5/CSS3 inside and out, have a solid understanding of JavaScript, and have experience working with at least one high-level, server-side language, you’ll contribute to making their portfolio even more impressive. Position is in Charlottesville, and relocation assistance is offered for the right candidate. … Read the rest here

Eric Meyer Go to the source

To follow up on my border-image post from Monday , it turns out that as currently written, border-image literally cannot take an image of a single symbol and repeat it around the border of an element. Instead, you have to create an image with at least eight copies of the symbol in a 3×3 grid pattern. Note that allowing a 3×3 grid pattern for border-image is potentially very useful, as it permits the creation of sophisticated border ‘frames’ with a single image. The objection I have is that it’s required , even in simple cases like the one I described in the previous post. The reason this 3×3 pattern is required is found in the description of border-image-slice , which states: The regions given by the ‘ border-image-slice ‘ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts… Read the rest here

Eric Meyer Go to the source

As I dig into the nooks and crannies of the various CSS3 modules, I’ve come across something that seems like I should be able to do, but I can’t make it work in browsers. Now, I know as well as anyone that if you try to do something and browsers won’t do it, it might well be the fault of the browsers. Particularly if you can get various browsers to fail differently on the same declaration, as I have. But this is, bizarrely, complicated enough that it’s hard to be sure if it’s me or them. So allow me to pose this to you as a challenge. Given the following ideal rendering, how would you arrive at the depicted result using the single 5-pixel-by-5-pixel image shown within the content? … Read the rest here