Tag: CSS3
CSS3 Buttons with Gradient Stroke
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 […]
Posted: April 25, 2014
Cloud.typography — Using Shades
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
Posted: November 08, 2013
virtual lane graphics for swimming with css3 – xyk
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 […]
Posted: March 05, 2013
Using CSS3 Pseudo Elements and Box Shadows Instead of Images for HiDPI Geometric Shapes
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.
Posted: January 14, 2013
All you need to know about CSS Transitions
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 […]
Posted: January 10, 2013
box-shadow vs filter: drop-shadow
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().
Posted: October 16, 2012
Sizing Boxes (Back to the Future)
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 […]
Posted: July 24, 2012
How I’m implementing Responsive Web Design
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. […]
Posted: May 24, 2012
3D CSS Book Covers
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, […]
Posted: May 23, 2012
Make a stopwatch using CSS3 without images or javascript
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 […]
Posted: May 22, 2012