How do I set distance between flexbox items?

CSS gap property: There is a new gap CSS property for multi-column, flexbox, and grid layouts that works in newer browsers now! (See Can I use link 1; link 2). It is shorthand for row-gap and column-gap. #box { display: flex; gap: 10px; } CSS row-gap property: The row-gap CSS property for both flexbox and … Read more

Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

I came up against this glitch too and it is definitely a glitch. The workaround is to apply the perspective transform on the child element. I updated your fiddle here: .item { backface-visibility: hidden; transform: perspective(200px) rotateX(0deg); } .container:hover .item { transform: perspective(200px) rotateX(180deg); } (See also answer at I think it is … Read more

How to display and hide a div with CSS?

To hide an element, use: display: none; visibility: hidden; To show an element, use: display: block; visibility: visible; The difference is: Visibility handles the visibility of the tag, the display handles space it occupies on the page. If you set the visibility and do not change the display, even if the tags are not seen, … Read more

Filling water animation

Here are four different versions to supplement @misterManSam’s brilliant answer. 1. With Easing Explanation If you filled up a circular bowl full of liquid, it would fill faster at the bottom and top than it would in the middle (because there is more area to cover in the wider middle section). So, with that crude … Read more

CSS gradient checkerboard pattern

Just modify the background-position like in the below snippet to get the required output. This works fine in Firefox, Chrome, Opera, IE11 and Edge. body { background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, … Read more