CSS Posts

Accessibility

How can I speed up browser (and mobile) testing when working with large batches of files?

Mitch Peterson • August 6, 2018

Recently I was on a few projects that consisted of multiple batches of banner ads. Think upwards of 150 ads… as much as I like working on these, something I’ve struggled with (and wasted time on)…

Read More

CSS

Why is my font-weight displaying wrong?

Pat Kavanagh • August 1, 2018

Have you ever run into a certain piece of text on your site that isn’t following the font-weight that you declared? Even worse, the correct CSS rule for font-weight is applied and your text still isn’t…

Read More

CSS

How do I make translation transforms feel more natural?

Mike Wang • July 6, 2018

An object undergoes a translation transformation when it moves from one point to another (it could rotate or grow or shrink in the process, but we’re going to concentrate here on the moving, or the translation)….

Read More

Animation

Simple Optimized Parallax

Mitch Peterson • May 29, 2018

Parallax – you love it or you hate it, but web designers will incorporate it into new designs regardless. This web design trend has been all the rage over the past few years, with countless javascript…

Read More

CSS

Can SVG animations use less CPU?

Mike Wang • April 30, 2018

Animated SVGs have become very popular in web design, and for good reason: they make art easier to translate from designer to developer, they’re light-weight in terms of filesize, and they’re just plain pretty to look…

Read More

CSS

How Can I Target only an iPad Pro?

Brent Reno • April 17, 2018

Recently I was working with some third-party animations, and they were not rendering properly on an iPad pro. I needed to fall back to the backup image we had in place, but  I didn’t want it to also…

Read More

CSS

Best Practices for Responsive HTML Emails, a Guide

Caleb Szydlo • September 18, 2017

So you’re thinking of coding a responsive email? Good for you, fortune favors the bold! Before you start though, let’s take a moment to investigate the do’s and don’t’s of responsive email. Take a look below to see…

Read More

CSS

Can type scale fluidly with screen size?

Mike Wang • August 8, 2017

What is fluid type? Type design on the web can be separated into two categories: static and responsive.  Static type ignores the dimensions of its screen; its characteristics are independent of it.  Responsive type responds to…

Read More

CSS

How to Fake a Half-Width Responsive Background Image

Laurel Johnson • August 1, 2017

I recently ran into a design that had needed background images on half-width columns but that also needed to cover the margins going all that way to the edge of the screen (i.e. outside of the…

Read More

CSS

Different CSS Animations on Hover In and Out

Caleb Szydlo • July 7, 2017

Recently a client requested a hover effect on a site’s buttons that slide in from the left and out to the right. I know that jQuery has a hover function that can apply different functions on…

Read More

CSS

Making Ems for Font Size Human Friendly

Caleb Szydlo • May 19, 2017

Ems are great for todays web due to the necessity of responsive designs. Instead of changing each elements pixel font size with media queries to accommodate the differences between mobile and desktop, Ems or Rems allow you…

Read More

CSS

Can I add custom styles to my embedded Twitter timeline?

Biz Cook • April 10, 2017

Want to customize your twitter timeline to the branding of your website? Need to delete the media from showing in the embedded feed? With this simple function, you can customize all kinds of styles to have…

Read More

CSS

Is it possible to add a background color to every other row in a table after filtering?

Biz Cook • February 10, 2017

Table row styles are usually straight forward, and generally you’d use CSS. Something similar to this: tr:nth-child(even) { background-color: red; } But what happens when a user filters the table rows? Once you ‘display:none’ the table…

Read More

CSS

Fixing Blurry Logos and Background Images

Caleb Szydlo • January 26, 2017

As retina screens and HD monitors are becoming more common developers must account for higher resolution images and icons. Given the wide range of support for newer formats it can be difficult to load the latest…

Read More

CSS

How can I wrap div elements that are different heights?

Caleb Szydlo • October 28, 2016

Wrapping divs and other block level elements is pretty easy if they’re all a consistent height, we can just set a width and a float and we’re done. However when we have elements whose heights are…

Read More