Category Archives: CSS

  • Polylion

    Sometimes the things you least expect, gain the most attention as the case was with the Polylion I posted on CodePen. I figured the simplicity of the animation effect was easy enough to grok since I wasn’t doing anything super crazy code wise, but I guess the end result was that cool. I’d like to share with all of you how and why this animation went down. Read More →

  • GSS: Layout Reimagined

    Layout on the web is certainly an extremely time consuming process and the most outdated. Floats and such still don’t cut it. At it’s core, Grid Style Sheets (GSS) reimagines CSS layout and harnesses the Cassowary Constraint Solver – the same algorithm Apple uses to compute native layout. OK sounds good, but is it a pre-processor? Well… no not exactly. Read More →

  • Fixed Curtains Pattern

    Layout patterns are great for initiating projects quickly, but the ones that provide a plethora of opinionated styles can become frustrating and overwhelming to remove when desired. I’d like to share a few examples and end with a free HTML layout pattern for you to help alleviate unwanted styling and get started on a template pattern quicker that I call “Fixed Curtains.” Read More →

  • SVG & CSS Grayscale Filter: Retina Bug

    Way back in the time machine of dreams I was reworking my blog in CodePen, until I ported my work to a local machine. During that time on CodePen I was playing with CSS Filters as I was writing about them for the CSS-Tricks Almanac. Of course like the good little developer I am I decided to try a grayscale filter on my SVG logo and the following are the results as I began my cross-device testing. Read More →

  • Orbit Button Glow

    Maybe you’ve seen this type of interaction already if you’ve taken a glance at Polymer’s paper components. The idea is that when a click event is triggered an orb like glow appears and then vanishes at the end of the event. It’s a nice and subtle way to provide user feedback when they interact with an element on your page, but also doesn’t break layout if it sits next to other items. We achieve the effect through the use of keyframe animations, class toggling with JavaScript and using the animationend listener made available via JavaScript. Read More →

  • Customizing Select Menus

    Web forms are bottom-line the bread and butter of the Web. They allow us to send and input information pertaining to a number of factors revolving around our interests/needs/wants. When it comes to styling inputs (and in particular styling custom select menus) some have argued that styling custom select menus are obnoxious and distract a user from what they’re normally accustomed to. I would disagree with that last statement and think it really involves customizing a select menu in a way that can be distinguished and understood logically. Lets take a look at customizing a select menu and then examine a possibility I’d like to see readily available to authors. Read More →