January 18, 2023 in Learn
How to Create a CSS Sprite Animation With steps()
There’s a little-known timing function in CSS animations that lets us break an animation into segments––or steps––instead of running it as one continuous animation from start to finish. This function is useful for creating sprite animation because we’re able to…
February 16, 2016 in Learn
HTML and CSS: Still Relevant for Designers
If you’re a designer trying to stay current you may be feeling some pressure to learn one of the many new web programming languages that are “hot” right now (React, Angular, etc.). Not only because these languages are gaining in…
February 5, 2015 in Learn
How to Create a Sticky Navigation
Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport. There are lots of jQuery plugins we can use to…
January 21, 2015 in Learn
How to Create a Simple CSS Dropdown Menu
Many dropdown menus we see on websites use JavaScript in some way, but it’s possible to build one entirely with HTML and CSS. In this short video tutorial, we’ll take advantage of helpful CSS selectors to build a simple dropdown…
April 10, 2014 in Learn
How to Create Smoother Animations and Transitions in the Browser
In order to achieve smooth transitions and animations, a browser needs to avoid doing extra work on its main thread, the part that’s in charge of handling tasks like JavaScript, style calculations, layout, painting and compositing (more on these later)….
March 11, 2014 in Learn
How to Use the Details and Summary Elements in HTML5
A number of new interactive elements were introduced with HTML5 that provide native implementations of common UI widgets like dialogs and modals. Among these new additions are the <details> and <summary> elements. These elements allow developers to create collapsable UI…
October 24, 2013 in Learn
Thinking Ahead: Multi-Resolution Images with srcset
Developing for high-resolution displays often requires different image resources for each image. Because of this, there’s been a need for a more standard way of serving responsive content images – ones that adapt to different resolutions and viewport sizes. What…
July 18, 2013 in Learn
CSS Tip: A Better Clearfix with Sass
The CSS clearfix has been a must-have in our web design toolkit for quite some time and, until new layout features like flexbox become more stable, we’ll always need some form of clearfix in float based layouts. There are several…
July 8, 2013 in Learn
CSS Tip: Better Rounded Borders
We’ve all used border-radius in our designs to round the corners of images, divs, navs, etc. But have you ever noticed what happens when a thick border is added to an element with a border radius? As we learned in…
July 5, 2013 in Learn
Build a Gmail-Style Expanding CSS3 Navigation Menu
Users of GMail should be familiar with sliding effects of the inbox side navigation. In the most recent design you will find the GChat/Hangouts box along with other various email tags(inbox, trash, etc.). When you have a large number of…
July 3, 2013 in Learn
Triggering CSS Animations with Sibling Selectors
Combinators describe the relationship between CSS selectors, and they’re commonly used to combine two or more selectors into a more specific selector. Examples of combinators are the greater-than sign (>), plus sign (+), and tilde symbol (~). If you’ve ever worked with descendant selectors,…
April 17, 2013 in Learn
Customize an HTML5 Webpage using the Bootstrap Framework
Many web developers are familiar with Twitter Bootstrap and have seen this library on a number of projects. The Bootstrap core is fantastic when you need a CSS reset along with other common layout features. It may not be the…