Scrolling Gradient
If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that…. Source: https://css-tricks.com/scrolling-gradient/
Tag: CSS
CSS Grid Level 2: Here Comes Subgrid
Upgrade your inbox and get our editors’ picks twice a month. CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, Rachel Andrew explains the new features…. Source: https://www.smashingmagazine.com/2018/07/css-grid-2/
How to quickly prototype apps with CSS Grid and CSS Variables
CSS Grid and CSS Variables are both huge wins for front-end developers. The former makes it dead simple to create website layouts, while the latter brings the power of variables to your stylesheets…. Source: https://medium.freecodecamp.org/how-to-quickly-prototype-apps-with-css-grid-and-css-variables-8d3d96d68eaa
Pretty Components: Prop-based Styled Components
One of the biggest struggle I go through when working with React is styling. Trends have changed, over and over, but I never had the feeling that libraries out there were really solving the styling problem. Let’s give a look at the very popular css-in-js library, styled-components…. Source: https://medium.com/@eveningkid/pretty-components-prop-based-styled-components-860e882ab257
Inspecting Animations in DevTools
I stumbled upon the Animation panel in Chrome’s DevTools the other day and almost jumped out of my seat with pure joy…. Source: https://css-tricks.com/inspecting-animations-in-devtools/
Radial Gradient Recipes
Radial gradients are pretty dang cool. It’s amazing we can paint the background of an element with them so easily. Easily is a relative term though. It’s certainly easier than needing to create a graphic in third-party software to use as the background, and the syntax is highly learnable…. Source: https://css-tricks.com/radial-gradient-recipes/
Scroll to the Future
This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like Element.scrollIntoView() and the scroll-behavior CSS property…. Source: https://css-tricks.com/scroll-to-the-future/
A Quick Way to Remember the Difference Between `justify-content` and `align-items`
“How do I center an element horizontally with flex again?” I wondered. Well, that was when she gave me what I think is the best shorthand way of remembering how the two work together…. Source: https://css-tricks.com/a-quick-way-to-remember-difference-between-justify-content-align-items/
Solved With CSS! Colorizing SVG Backgrounds
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. The possibilities are still being explored on what CSS can do to make writing UI’s simpler, and that’s exciting!… Source: https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/
Using Media Queries For Responsive Design In 2018
If you’ve ever made a layout with CSS, you probably know what BFC is. Understanding why it works and how to create one is useful and can help you to understand how layout works in CSS. Read a related article →… Source: https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/