The Shapes of CSS | CSS-Tricks
Source: https://css-tricks.com/the-shapes-of-css/
Tag: CSS
An Introduction and Guide to the CSS Object Model (CSSOM)
If you’ve been writing JavaScript for some time now, it’s almost certain you’ve written some scripts dealing with the Document Object Model (DOM)…. Source: https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/
16 DevTools tips and tricks every CSS developer need to know
When it comes to debugging the front-end, if you’re like many developers, you basically live in your browser’s developer tools. But even after having worked in Chrome’s developer tools for quite a few years, I still come across tips, tricks, and features that I haven’t seen before…. Source: https://www.heartinternet.uk/blog/16-devtools-tips-and-tricks-every-css-developer-need-to-know/
Dark modes with CSS
With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme which lets us detect whether the user has dark mode enabled with a media query. That’s right…. Source: https://css-tricks.com/dark-modes-with-css/
Houdini’s Animation Worklet
TL;DR: Animation Worklet allows you to write imperative animations that run at the device’s native frame rate for that extra buttery jank-free smoothness™, make your animations more resilient against main thread jank and are linkable to scroll instead of time…. Source: https://developers.google.com/web/updates/2018/10/animation-worklet
Negative Grid Lines
Did you know you can use negative line numbers to position grid items with CSS Grid? I didn’t until recently – or rather, I hadn’t given it any thought, as I never felt like I needed to before…. Source: https://css-irl.info/negative-grid-lines/
Pure CSS Toggle Buttons | ON-OFF Switches
Collection of toggle buttons / on-off switches, designed using CSS without any JavaScript…. Source: https://codepen.io/himalayasingh/details/EdVzNL
Introduction to Bulma with React
I’ll come out and say it, I’m still a fan of Bootstrap. With that, I’m not oblivious to the many alternatives that are floating around out there. One of the more inspired CSS frameworks I have come across recently is Bulma…. Source: https://alligator.io/react/intro-react-bulma-components/
How to create pure CSS illustrations and animate them – Part 1
I’ve always had a great interest in design, illustrations and colour palettes, but having spent the last few years focusing on becoming a better front-end developer, I’ve been left with little time to practice my creative skills…. Source: https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them—part-1-1j1k
Solved With CSS! Colorizing SVG Backgrounds
This post is the first in a series about the power of CSS. CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging…. Source: https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/