UX Milkshake

A delicious blend of UX design and frontend development

How to quickly create a diffused shadow effect with CSS, Sass, and Less

If you typically follow UI trends, or just have an eye for design, you’ve probably noticed that element shadows have been making a comeback recently. This time instead of those dark ugly 4-sided box shadows from the beginning of the century (yes, they still exist… yikes), we’re seeing softer diffused shadows. These diffused shadows are…

Using :nth-child to align your floating div elements

Creating a grid layout where your floating elements are getting knocked off alignment? I know, annoying, right? This can happen with images, list items, or anything that uses a column based grid layout – like Bootstrap. See below for an example: At first this can be confusing, because you expect the elements to align properly…

How to create a responsive full-height image with pure CSS

Images are a necessary part of web development, but they can sometimes be a pain in the buns to work with. Photos, GIFs, and illustrations are awesome because they can engage your users in a visually appealing way. In order to make sure they look sharp across different heights, widths, screen sizes and devices, it’s…