{ CSS snippets }

Maxime Dupré 🥹🚀

Maxime Dupré 🥹🚀 @maximehugodupre

I just discovered that you could add opacity to HEX colours (as opposed to RGBA) 🤯🤯 You have your initial colour, e.g. #FFAABB You want to add opacity? Add two more hex chars. e.g. #FFAABB99 The last two chars will control opacity from 00 (0) to FF (1). 🤯🤯🤯

CSS
Jack McDade✨📺✨

Jack McDade✨📺✨ @jackmcdade

🔥 When working with position:absolute and want to move an element around in relation to the natural content flow… Use margin instead of `top/left/right/bottom`.

CSS
Annie 🦄⚡

Annie 🦄⚡ @anniebombanie_

🚀#CSS Tip Pseudo-elements can trip you up sometimes. Here's a lil something explaining their stack order. To change their natural order, assign these two properties: 1️⃣ z-index: __; 2️⃣ position: absolute; ⚠️ You MUST use a negative number to position it *under* its parent. https://t.co/YirNdyt8aZ

CSS
Simone - Hacker Typer 🇪🇺

Simone - Hacker Typer 🇪🇺 @Duiker101

You can test if a browser supports a CSS property by using CSS.supports. Pretty useful if you want to make some super fancy stuff in your website and you want to gracefully fallback if it's not available, rather than breaking the experience. #100DaysOfCode #javascript #css https://t.co/l1w9BhhOdn

CSS
Wes Bos

Wes Bos @wesbos

🔥 background-position can take four values which allows you to anchor from a specific corner and then skirt it around from there. https://t.co/fxJyj91Y2n

CSS
Wes Bos

Wes Bos @wesbos

🔥 You can use new CSS logical properties instead of top/bottom/left/right. Makes designing multi-language websites much easier when the flow direction changes. CSS Grid and Flexbox already setup for this with start/end values. https://t.co/gielwhWQBI

CSS
Wes Bos

Wes Bos @wesbos

🔥 Need elements to overlap? Assigning multiple elements the same CSS Grid row and column is a good alternative to absolute positioning. https://t.co/XbtqHwzcTe

CSS
Zak Nesler

Zak Nesler @zaknesler

Fellow #MacOS devs, try to avoid using "overflow: scroll" in containers that might overflow. It always forces a scrollbar on Windows, even if one is not necessary. Use "overflow: auto" instead. 😉 https://t.co/gLzCvq2IOZ

CSS
Swizec Teller

Swizec Teller @Swizec

Oh you haven't heard of "presentational" attributes? It means they listen to CSS. If you ain't keen on adding a bunch of attributes, you can use CSS. Even styled-components. https://t.co/jFllGjJYlR