CSS Naked Day!
A tweet from Eric Meyer invited us to revive the tradition of CSS Naked Day!
css
A tweet from Eric Meyer invited us to revive the tradition of CSS Naked Day!
I recently gave a talk at our Cleveland React meetup group about different ways to style React components. I thought it'd be cool to share both the slides as well as the example code for the talk.
This is maybe the fourth or fifth incarnation of dtott.com. This time around I tried to simplify everything, do away with (mostly) useless features, and concentrate on the reading experience. Here's some notes on the site. Hope you enjoy it!
If you're tired of Flat Design and looking for something to spice it up, why not try Long Shadows? And if you're going to try Long Shadows, why not use a pure CSS solution with this Sass mixin?
A couple of weeks ago, a good friend sent me an email with a list of questions for me. He'd been out of the front-end game for a little while, and wanted to pick my brain a little bit. I thought that instead of just answering him directly, I'd share my answers with everyone.
About a year and a half ago, I had some ideas about using 3D CSS to create nonstandard 3D shapes, but never got around to writing a post about it. However, inspired by the incredibly impressive Acko.net redesign, I decided to finally clean it up and share it with you. Here it is.
By stacking and rotating elements in 3D space, you can create some new shapes out of pure CSS. It's not practical or useful in the least, but it is interesting. These examples work best in Safari, but they will mostly work in Chrome. Check it out: Pure CSS 3D Shapes (remember to click and drag to rotate. Thanks to Dirk Weber's traqball.js for that little bit of magic).
I've recently starting developing using LESS CSS (lesscss.org), and quickly decided that I would benefit from a toolkit containing mixins that I would use over and over, such as border-radius or box-shadow.
Enter LESS CSS Toolkit.
We all have various tools in our box to deal with the constant headache that is Internet Explorer. Browser hacks, conditional comments, filters, pounding our heads against the wall, etc (wait, is it possible that's where the headaches come from? I'll look into it and get back to you).
This situation gets even worse when one wants to use some of the fantastic techniques available to us in CSS3, like border radius, drop shadows, and gradients. In the past, we had to use images for all of these design elements, but now it's possible to have a fancy, shiny button that uses only a <button>
element and some css. Well, possible except in IE. Enter CSS3 PIE.
A little Friday-fun experiment I built: a word clock using CSS3 transforms and a little Javascript to run the actual clock. Useful? Maybe not. Fun? Definitely.
Yes, it's back. The annual CSS Naked Day.
Today, April 9th, is Naked Day. It's an annual event in which sites remove all of their style information, to reveal the naked page structure underneath. This is my first year participating, but I think it's a great idea.
I'm very excited to announce that CSS Off is back from a brief hiatus. Clevelander Brad Dielman has come on board to lend his expertise to the project, and Clevelander (and Brad) Brad Colbow is our guest designer. I've seen the comp already, and it's going to be a challenge.
I know, I know. What this world really needs is a new rounded corners solution. With CSS3 support right around the corner (ha, right), why bother, right? Well, this solution offers something new to the world of rounded corners. What it does is this: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work. See below:
Recently, I was writing a Javascript app that involved some animated, expanding boxes. While doing this, I realized I needed a way to dynamically convert pixels to computed ems. The function wasn't too complicated, and so I decided to make a bookmarklet out of it that did the same thing. It was kind of fun. Hopefully you'll find it useful, either in javascript, or to remove the headache when you're trying to create pixel-perfect designs using ems
Aside from browser bugs, float clearing can be one of the most frustrating aspects of CSS development. It takes a little bit of patience and thought to set up your floats and clears in a way that facilitates both your design and the flexibility required in a modern website.
Read http://dtott.com/thoughts/2009/01/06/clear-your-floats-even-easier/ for an even easier way of dealing with floating elements.
For years, I've always formatted my CSS in what I like to think of as the "traditional" manner. Each selector on one line, and each property indented one tab underneath. But when I started working with Sprokets, the other front-end developer there was using one-line css declarations. This threw me for a loop for a while, but I slowly started liking it better and better.
Congrats to Brad Dielman for pulling in the win in this month's CSS Off. Attention to detail, clean code, and a sly use of hReview helped Brad in the newest victory for Cleveland. Nice work, Brad!
So here's some good news. The guys over at CSS Off recruited five judges to help out, including yours truly.
So I've been thinking for a while about what I'd like to blog about, now that I'm at least comfortable (if not perfectly happy) with the presentation of dtott.com. What I decided on is starting an ongoing series of in-depth CSS tips. This will (obviously) be the first one.
The CSS Off guys announced today that the next contest will begin on September 15. Wooo!
Well, I made it almost a month since the last design change. However, this redesign is a little more extensive.