Categories
Links

A Deep Dive on Z-Index Usage

How do you make sure your annoying popup is shown on top of every other element in the page, when you don’t know how many there are, who wrote them, and how bad they wanted their elements to be on top? That’s when you set your z-index to 100, or maybe 999, or maybe, just maybe 99999 to be really sure yours will win. That, at least, is how I write my CSS. In the rest of this post, we will look at millions of z indices to see what everyone else does.

Of course, if you make websites for a living you’ll find this interesting. Like most things available here.

Categories
Links

CSS Sans

A font constructed entirely by CSS. It is, essentially, a programmatic realtime typeface. I love how it degrades for older versions of IE:

It’s not what I’d consider practical for production use. Still, CSS Sans is a hell of a demonstration of how far CSS has come since Microsoft shipped Internet Explorer 3 in 1996, which was first browser to implement some of the CSS1 spec (CSS v1 was not yet a W3C recommendation).

Categories
Links

Layout Land: CSS Grid

Jen Simmons is doing a great job of introducing the core concepts of CSS Grid with this video series on Layout Land. These videos have been a huge help to me getting up to speed on the state of the tech. Highly recommended.

Categories
Links

Stop using device breakpoints

Adam Silver with some good horse sense. This is a surprisingly common practice here in the Year of Luigi 2017. It’s mostly surprising because we spent so much time talking about this during the original web standards push that I’d hoped it had sunk in.

Categories
Links

You Might Not Need JavaScript

Examples of common UI elements and interactions with HTML and CSS alone.

You Might Not Need JavaScript is doing the lord’s work. Maybe we don’t need to replace everything with some flavor of Javascript, huh? Maybe?

Categories
Posts

No CSS

I’m turning off my stylesheets for the rest of 2014. And probably some of 2015. It’s an experiment. Plus it will force me to do a full redesign when the time comes.

We used to do this kind of stuff all the time before the internet got all serious and everyone started pretending to know what they were doing.

Categories
Links

Big, Beautiful Dropcaps with CSS initial-letter

Nice post from Dudley Storey on the new CSS proposal for initial-letter. CSS typography has come a long way in the previous 5 years but we’re still in the woods with a lot of the things that print media take for granted.

Categories
Links

CSS Performance metrics from the creator of Bootstrap

A reasonable, if unscientific, look at the performance of various common CSS methods, comparing things like Attribute .vs. Class-based selectors, box-sizing resets, floats .vs. flexbox .vs. inline-block, and a lot more.

Love that someone took the time to do this so I don’t have to.

Categories
Links

Float Labels with CSS

Slick technique that is worth looking into for many applications. As someone who deals with a lot of form inputs both as a user and a designer, there are some useful ideas here.

Categories
Links

Structure.io homepage refresh

So, we just launched an update to the Structure Sensor homepage, and it features some neat HTML5 / CSS3 tech. I’m pretty happy with it. It required me to learn a few things, which I’ll hopefully have time to write about here soon.

It also marks the first time I’ve ever encoded video in WebM! It was easy thanks to Miro Video Converter and FFMPEG.

Categories
Links

Semantic UI

Yet another HTML/CSS/JS framework, but built so that the classes are understandable in english. It’ll create some HTML bloat, but it has a certain Applescript-y charm to it.

The site is pretty snazzy, too. Very readable, very smooth.

Categories
Links

Tridiv

A visual editor for creating 3D shapes with CSS. Damned impressive.

Categories
Links

csscss

csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations.

Been looking for something like this for YEARS now. Hope it’s good.

Categories
Links

hint.css

A CSS-only tooltip library, written in SASS.

Categories
Links

Harry Roberts on CSS selector intent

Had me shaking my head in agreement on every single point. Bad / inefficient CSS selectors written by people who don’t know any better are the bane of my very existence right now. Education can only help everyone.

Categories
Links

An Event Apart: CSS Best Practices

Luke Wroblewski’s notes from the An Event Apart talk “Our Best Practices Are Killing Us” by Nicole Sullivan. There’s some good horse sense here re: revisiting pixel-based layouts and overly semantic markup.

Categories
Links

CSS Shaders

Adobe’s John Nack:

So, yeah: Adobe’s using Flash-derived technology to make HTML5 more competitive with Flash.

Crazy, right? Not at all: this increases your ability to present visually rich experiences, and that increases Adobe’s ability to sell you tools for creating those experiences.  The different playback technologies are just means to those ends.

Working with Opera, they’ve put together a spec and submitting it to the W3C. Latest nightly of WebKit has it implemented. Really good to see Adobe looking forward like this.

Categories
Links

CSS PANIC

A whack-a-mole game written entirely in CSS/HTML. No Javascript. Chrome/Safari only.

Categories
Links

CSS3 Isometric Text Demo

Build isometric boxes and text in HTML and CSS. Inching towards the day when someone can build an X-Com port.

Categories
Links

Pure CSS3 box-shadow page curl effect

Works in Safari, FF, falls back gracefully in IE.