HTML KickStart now uses Font Awesome version 4.2.0! A lot of people have been asking for this upgrade. I was a little hessitant to upgrade because of the new CSS naming convention in Font Awesome (FA). The older version of FA used a nice verbose “icon-name” CSS class, I like that better. The new class is “fa fa-name” and I don’t find this very human readable. However, the benifits of over 200 more new icons and keeping FA up-to-date far outweights the downside. You may have also noticed that I…
Category: css
Simple CSS-Only Row and Column Highlighting
Highlighting rows of a table is pretty darn easy in CSS.tr:hover { background: yellow; } does well there. But highlighting columns has always been a little trickier, because there is no single HTML element that is parent to table cells in a column. A dash of JavaScript can handle it easily, but Andrew Howe recently emailed me to share a little trick he found on StackOverflow, posted by Matt Walton. It was a few years old, so I thought I’d just clean it up and post it here. The trick is using huge pseudo elements…
The Two Flavors of a ‘One Web’ Approach: Responsive vs. Adaptive
You’ve probably heard people say we’re living in a “post-PC world.” What does that mean for web developers? It means that 30% to 50% of your website’s traffic now comes from mobile devices. It means that soon, desktop and laptop users will be in a minority on the web. How do we deal with this tectonic shift in user behavior? We’ve moved beyond the era of m-dot or t-dot hacks, into one where responsive and adaptive design techniques rule the day — what the W3C calls aOne Web approach. The…
8 simplest CSS hover effects
CSS3 Hover Effects for Engaging Buttons With growing support for CSS3 across modern browsers and the decline of CSS2-only browsers, developers now have a wide range of options for creating engaging hover effects and transitions. These effects are commonly used in calls to action (CTAs) to draw attention and enhance user interaction. This guide explores eight simple CSS3 hover effects, building on a previous article featuring 8 simple transitions. Getting Started We’ll use a simple HTML button as the base for our effects: <button>Hover Me</button> Below is the core CSS…