Webdesigninformer.com

Eric Meyer Go to the source

In the course of expanding my documentation of color values, I failed to find a table that listed all 147 SVG-and-CSS3-defined keywords along with the equivalent RGB decimal, RGB percent, HSL, hexadecimal, and (when valid) short-hex values. There were some tables that listed some but not all of those value types, and one that listed all the value types (plus CMYK) along with a few hundred other keywords, but none that listed all of the CSS keywords and value types. And none that I saw used precise values for the RGB percent and HSL types, preferring instead to round off at the expense of some subtle differences in color. So I created my own table, which you can now find in the CSS area of meyerweb . Most of it is dynamically generated, taking a list of keywords and RGB decimal equivalents and then calculating the rest of the values from there. … Read the rest here

Eric Meyer Go to the source

I’m working my way through a rewrite of Two Salmon (more on that anon), and I just recently came to the ch unit. Its definition in the latest CSS Values and Units module is as follows: ch unit Equal to the advance measure of the “0″ (ZERO, U+0030) glyph found in the font used to render it. …and that’s it. I had never heard the term “advance measure” before, and a bit of Googling for font “advance measure” only led me to copies of the CSS Values and Units module and some configuration files for the Panda 3D game engine . … Read the rest here

Eric Meyer Go to the source

There’s a subtle aspect of CSS descendant selectors that most people won’t have noticed because it rarely comes up: selectors have no notion of element proximity. Here’s the classic demonstration of this principle: body h1 {color: red;} html h1 {color: green;} Given those styles, all h1 elements will be green, not red. That’s because the selectors have equal specificity, so the last one wins. The fact that the body element is “closer to” the h1 than the html element in the document tree is irrelevant. … Read the rest here

Eric Meyer Go to the source

Right in the middle of AEA Atlanta—which was awesome , I really must say—there were two announcements that stand to invalidate (or at least greatly alter) portions of the talk I delivered. One, which I believe came out as I was on stage, was the publication of the latest draft of the CSS3 Positioned Layout Module . We’ll see if it triggers change or not; I haven’t read it yet. The other was the publication of the minutes of the CSS Working Group meeting in Paris , where it was revealed that several vendors are about to support the -webkit- vendor prefix in their own very non-WebKit browsers. Thus, to pick but a single random example, Firefox would throw a drop shadow on a heading whose entire author CSS is h1 {-webkit-box-shadow: 2px 5px 3px gray;} . As an author, it sounds good as long as you haven’t really thought about it very hard, or if perhaps you have a very weak sense of the history of web standards and browser development… Read the rest here

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