Category Archives: CSS

  • Fixed Curtains Pattern

    Posted : | Filed Under : CSS

    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

    Posted : | Filed Under : CSS

    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

    Posted : | Filed Under : CSS

    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

    Posted : | Filed Under : CSS

    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 →

  • The point is there is no point in #RWD

    Posted : | Filed Under : CSS

    Lately I’ve been curious about units used in #RWD –mostly rems I have to admit. Yes, discussing the correct or preferred values to use in #RWD is a topic that definitely makes me fall asleep, but instead of writing the same post about why ems are good for sizing in #RWD, I thought I would look at why pt isn’t beneficial when used in a #RWD setting – also due to a recent conversation on Twitter about the lonely pt. This surely goes for you nasty pixels too, but I’ll keep it to the pt for today –no pun intended. Read More →