Magic Flip Cards: Solving A Common Sizing Problem — Smashing Magazine
In this article, Dan Halliday reviews the standard approach to creating animated flip cards, and introduces an improved method which solves its sizing problem.
Proposing new CSS primitives to enable great web experiences on foldable & dual-screen devices · Issue #4736 · w3c/csswg-drafts
My colleague @dlibby- and I have published an explainer on MicrosoftEdge's Explainers repo where we have proposed a new JavaScript API and a CSS media query with a set of pre-defined env() vari...
CSS gradients are represented by the gradient data type, a special type of image made of a progressive transition between two or more colors. You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with radial-gradient()), and conic (created with the conic-gradient() function). You can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff an
There are some new features in CSS that can assist us with building layouts for different directions and languages with ease. This article is about CSS
Since CSS Grid became supported in the major browsers back in March 2017 (Almost three years ago), I started using it in my personal and client projects, of ...
Oftentimes, we want to limit the width of an element relative to its parent, and at the same time, to make it dynamic. So having a base width or height with ...
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid.
New Year, New Job? Let's Make a Grid-Powered Resume! | CSS-Tricks
Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout
CSS has a whole lot of power. There are properties and values for any number of amazing designs. With all that power comes a lot to remember. If you don't know about all the tools in your toolbox, how will you find the right one for the job? In this post, we'll take a look at three lesser-used, but super useful tools for various jobs in CSS.
Helping Browsers Optimize With The CSS Contain Property — Smashing Magazine
The CSS contain property gives you a way to explain your layout to the browser, so performance optimizations can be made. However, it does come with some side effects in terms of your layout.
How to create better themes with CSS variables - LogRocket Blog
CSS variables let you define values for reuse throughout a CSS file , opening the door to more efficient theming capabilities — no preprocessors necessary.
Rachel Andrew guides us through a tour of the last fifteen years in CSS layout, as manifested in articles here on 24 ways. From the days when Internet Explorer 6 was de rigueur, right up to the modern age of evergreen browsers, the only thing you can be sure of is that the web never stands still for long.
— Web design North Wales UK, website design and consultancy based in North Wales, offering design and art direction for businesses in North Wales, the UK, and worldwide.
Andy Clarke digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief.