Tagged in: Css

Animated card tiles

In this tutorial we explain step-by-step how to build out tiled cards that animate with user interaction using pure CSS.

Tagged html css design

Super Mario blocks in CSS

Ever wanted to recreate the Super Mario blocks in CSS? Of course you have! In this tutorial we will breakdown how to do just that, step-by-step.

Tagged html css design

Proper UI hierarchy

Current industry trends such as flat or material design have placed accessibility and visual hierarchy as secondary requirements. Hopefully we can start to fix that.

Tagged css interface design

Easy custom radio inputs

Let's face it - the default browser styling for radio inputs is terrible. In this article we breakdown how to create beautiful radio options with just CSS.

Tagged html css design

Better box-shadows

Further improving on the default browser box-shadow styling with a little help from well-placed pseudo elements.

Tagged css design

Over-nesting

Preprocessors like Sass and Less have made development much easier, but you should always be careful not to go overboard with CSS nesting.

Tagged css development

Width or flex-basis?

Is it better to use width or flex-basis for layouts in CSS? Let's breakdown the most common use cases for each and how to implement them.

Tagged css design

Adaptable flexbox grid

The days of overly complex grid systems are gone. Learn how to create adaptable grid systems with flexbox using barely any CSS.

Tagged css design

CSS video backgrounds

Safari is actually ahead of the game for once, allowing developers to set video files as background property attributes in CSS.

Tagged css html

CSS variables

CSS preprocessors have allowed developers to use variables for quite some time, but we now have the ability to use these properties in plain vanilla CSS.

Tagged css development

ET-Jekyll theme

Inspired by the book and handout designs of Edward Tufte, I created an open source Jekyll theme to based off of Dave Liepmann's Tufte CSS.

Tagged html css design

Goodbye CSS preprocessors

Moving away from being so dependent on CSS preprocessors might just help you improve your skillset as a developer. Working with vanilla CSS can be great.

Tagged css development

The wonders of text ellipsis

The text ellipsis CSS property can be extremely useful for keeping your content contained without the use of ugly fixed widths or heights.

Tagged css design