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 Tip!
Extend the background of an element outside of its container to cover the full screen width
✅ No extra element
✅ No pseudo-element
✅ No overflow issue
✅ Only 2 CSS declarations
Demo: https://t.co/EBLNWaSlVn via @CodePen
How Spotify makes text on images more readable: a CSS linear-gradient overlay. More common these days, but still an effective technique for better color contrast. https://t.co/tZDlwLRx3G
CSS tip for Windows High Contrast Mode:
Use `currentColor` for properties used for visual semantics, and then swap to `CanvasText` within the `-ms-high-contrast` media query.
@CodePen with extended example including a gradient:
🔥 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`.
🔥 `box-shadow` doesn't work well with transparent images. `filter: drop-shadow` does what you'd expect, adding a shadow to the image's contents.
filter: drop-shadow(1px 2px 3px black);
CSS filters are so rad 🥰
Pen: https://t.co/rVKgSlijt1 https://t.co/6rwc7gG1Ro
TIL you can center things in CSS grid with a single property now
Ever notice how anchor links butt right up against an element? Or worse, end up behind a sticky header?
The scroll-margin CSS property lets you customize this by setting your own scroll "snap area". 🪄
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
Your periodic reminder that using "display:none" in your CSS does not also mean "download:none" https://t.co/eZZNnrQ3OS
Oh this is cool! CSS now has `lh` units. `1 lh` is equivalent to the total computed line height. So you can size something according to the text it sits next to, for example.
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.
🔥 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
🔥 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
Use CSS variables in your transforms so you don't need to rewrite the whole transform rule in order to transition a single property. Thanks @syntaxfm @wesbos @stolinski #webdevelopment #code https://t.co/hOyqnG5oH0
🔥 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
Quick CSS trick: - disable parent scrolling when child container (like sidebar) reaches scroll end.
Support https://t.co/lEnfJx5qq7 https://t.co/UxIME6vkqE
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
? TIP When using PurgeCSS with classes that get dynamically created via e.g. a JS-library, you can whitelist them right in your CSS file #laravel https://t.co/tU3ngY71X0
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