Tag: css

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](https://yusugomori.com/projects/css-sans/fonts). 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 (https://www.youtube.com/playlist?list=PLbSquHt1VCf1x_-1ytlVMT0AMwADlWtc1). 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][1]. 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.

[1]: https://medium.com/simple-human/stop-using-device-breakpoints-b11a87e2625c “Stop using device breakpoints – Simple = Human – Medium”

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][link]. 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.

[link]: http://demosthenes.info/blog/961/Big-Beautiful-DropCaps-with-CSS-initial-letter “demosthenes.info – Big, Beautiful Dropcaps with CSS initial-letter”

Categories
Links

CSS Performance metrics from the creator of Bootstrap

[A reasonable, if unscientific, look at the performance of various common CSS methods][link], 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.

[link]: https://github.com/mdo/css-perf “mdo/css-perf”

Categories
Links

Float Labels with CSS

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

[link]: http://css-tricks.com/float-labels-css/ “Float Labels with CSS | CSS-Tricks”

Categories
Links

Structure.io homepage refresh

So, we just launched an update to the [Structure Sensor homepage][link], 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][webm]! It was easy thanks to [Miro Video Converter][miro] and [FFMPEG][ffmpeg].

[link]: http://structure.io/ “The Structure Sensor is the first 3D sensor for mobile devices”
[webm]: http://www.webmproject.org “The WebM project”
[miro]: http://www.mirovideoconverter.com “Miro Video Converter”
[ffmpeg]: http://www.ffmpeg.org “FFMPEG”

Categories
Links

Semantic UI

[Yet another HTML/CSS/JS framework][link], 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.

[link]: http://semantic-ui.com/ “Getting Started | Semantic UI”

Categories
Links

Tridiv

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

[link]: http://tridiv.com/ “Tridiv | CSS 3D Editor”

Categories
Links

csscss

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

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

[link]: http://zmoazeni.github.io/csscss/?hn=1 “csscss by zmoazeni”

Categories
Links

hint.css

[A CSS-only tooltip library, written in SASS.][link]

[link]: http://kushagragour.in/lab/hint/ “hint.css – A tooltip library in CSS”

Categories
Links

Harry Roberts on CSS selector intent

[Had me shaking my head in agreement on every single point.][link] 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.

[link]: http://csswizardry.com/2012/07/shoot-to-kill-css-selector-intent/ “Shoot to kill; CSS selector intent — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts”

Categories
Links

An Event Apart: CSS Best Practices

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

[link]: http://www.lukew.com/ff/entry.asp?1469 “LukeW | An Event Apart: CSS Best Practices”

Categories
Links

CSS Shaders

[Adobe’s John Nack:][link]

>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.

[link]: http://blogs.adobe.com/jnack/2011/10/css-shaders-hell-yeah.html “John Nack on Adobe : CSS shaders: Hell yeah.”

Categories
Links

CSS PANIC

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

[link]: http://jsdo.it/GeckoTang/4rXg “CSS PANIC – jsdo.it – Share JavaScript, HTML5 and CSS”

Categories
Links

CSS3 Isometric Text Demo

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

[link]: http://www.midwinter-dg.com/blog_demos/css-isometric-text/ “CSS3 Isometric Text Demo”

Categories
Links

Pure CSS3 box-shadow page curl effect

[Works in Safari, FF, falls back gracefully in IE.][link]

[link]: http://matthamm.com/box-shadow-curl.html “Pure CSS3 box-shadow page curl effect”