Tag: CSS3

CSS3 Buttons with Gradient Stroke

Published 4 years 2 months ago on April 25, 2014

I style a lot of buttons, but a classic treatment I find myself needing to implement is one with a gradient background and subtle gradient stroke along the edges. Over time my solutions began with multiple elements and specific CSS for each. It got the job done but it was clearly bloated. CSS3 changes so […]

Cloud.typography — Using Shades

Published 4 years 7 months ago on November 8, 2013

For just about ever I’ve always been unnerved using attr when writing CSS. I don’t know where the icky feeling came from but it’s completely unfounded as you can see by this killer usage illustration by Brandon Durham How cool is that?! /via @trentwalton

virtual lane graphics for swimming with css3 – xyk

Published 5 years 4 months ago on March 5, 2013

This is super creative and just as impressive. We’re all familiar with the graphics included in the broadcast of many sporting events, and many of us know just how awesome CSS3 can be. What would happen if you merge the two for a school swim meet? This: ~Using CSS to overlay a swim meet This […]

Using CSS3 Pseudo Elements and Box Shadows Instead of Images for HiDPI Geometric Shapes

Published 5 years 5 months ago on January 14, 2013

HiDPI in Web design is kind of a double-edged sword for a front end developer. We now have two nearly separate environments (in some cases) that need attention. That sometimes results in double the style rules, double the image assets, and feature detection. Addition of anything is often the opposite of what we try to do, so it’s important to be as smart as possible when approaching management of HiDPI assets and styles in our projects.

All you need to know about CSS Transitions

Published 5 years 5 months ago on January 10, 2013

CSS3 is, quite frankly, a Really Big Deal. It hit me like a ton of bricks a couple projects ago just how much faster I'm able to develop on the front end thanks to CSS advancements alone. Depending on whether or not you bundle font-face within that we're pretty much made in the shade at […]

box-shadow vs filter: drop-shadow

Published 5 years 8 months ago on October 16, 2012

Bricss – box-shadow vs filter: drop-shadow.   I can’t tell you the wacky solutions I’ve played around with in trying to mimic something like filter:drop-shadow().

Sizing Boxes (Back to the Future)

Published 5 years 11 months ago on July 24, 2012

Sizing Boxes (Back to the Future) – destroy/dstorey. I’ve been using box-sizing:border-box; more and more lately as it seems. Especially with the Bootstrap-inspired style guides I’ve been working on for client projects. There are a few times where it just makes sense, and I think once I’m beyond my habitual omission of the property, I’ll […]

How I’m implementing Responsive Web Design

Published 6 years 1 month ago on May 24, 2012

How I'm implementing Responsive Web Design – JeffCroft.com. I echo many of Jeff’s sentiments when it comes to responsive design. First and foremost: responsive design is hard. While it’s all the rage to talk about, actually implementing it is no small task. It takes more planning, more development, more testing, and more trial and error. […]

3D CSS Book Covers

Published 6 years 1 month ago on May 23, 2012

3D CSS Book Covers — Scott Robbin. If there’s anything we’ve consistently seen implemented poorly it’s book images (or software box art). It’s really difficult to get the perspective to look just right. Scott Robbin took the time to recreate the results from an application that turned book cover images into 3D books in CSS3, […]

Make a stopwatch using CSS3 without images or javascript

Published 6 years 1 month ago on May 22, 2012

Make a stopwatch using CSS3 without images or javascript. There’s a lot of awesome going on here. Not only is the end product really neat, but you should truly click Play Walkthrough and check that out as well. What a genius idea for a code sample! Spying on the workflow of others is such a […]

Copyright © 2006—2018 Jonathan Christopher