Category: CSS/SCSS

It’s intended use is to align text and elements next to each other. Like centering an icon next to a bit of text.

Christopher Aue

Link: Vertical-Align: All You Need To Know

In this article, Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. The techniques works with percentage-based width/height, min-/max- width, images, position: fixed and even variable content heights.

Link: Absolute Horizontal And Vertical Centering In CSS

Link: SAIL Divider

Cool effect with dashed shadow.

Link: CSS Dashed Shadow

One of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy.

Aigars Silkalns

Link: CSS: Elastic Videos

Creative effects for loading buttons.

Link: Progress Button Styles

During the last two months I’ve been taking a deeper look into CSS Grid. In this tutorial I want to share the key findings. To make things easier, I explained them using visual diagrams.

Link: The Ultimate Guide To CSS Grid

Learn all about the properties available in CSS Grid Layout through simple visual examples.

Link: Cheatsheet for CSS Grid Layout

CSS Grid Layout is completely changing the game for web design. Learn about CSS Grid Layout and the Firefox DevTools layout panel

Link: Grid playground

While the modern concept of a “grid layout” has been with us since the Industrial Revolution, grids have been a design tool for centuries. As such, it shouldn’t come as a shock that grid-based layouts have been a goal of CSS since the beginning.

Aaron Gustafson

Link: The Story of CSS Grid