On fixed elements and backgrounds
3.6.2020
After just playing with apsect-ratio and being pleasantly surprised at how intuitive it is, here’s an example of CSS acting unintuitively:
If you have a fixed element on your page, which means it doesn’t move when you scroll, you might realise that it no longer acts fixed if you apply a...
Behind the Source: Cassie Evans
3.6.2020
I feel like the tech industry takes itself far too seriously sometimes. I get frustrated by all the posturing and gatekeeping – “You’re not a real developer unless you use x framework”, “CSS isn’t a real programming language”.
I think this kind of rhetoric often puts new developers off,...
Chrome 83 Form Element Styles
3.6.2020
There have been some aesthetic changes to what form elements look like as of Chrome 83. Anything with gradient colorization is gone (notably the extra-shiny <meter stuff). The consistency across the board is nice, particularly between inputs and textareas. Not a big fan of the new <select...
A New Way to Delay Keyframes Animations
2.6.2020
If you’ve ever wanted to add a pause between each iteration of your CSS @keyframes animation, you’ve probably been frustrated to find there’s no built-in way to do it in CSS. Sure, we can delay the start of a set of @keyframes with animation-delay, but there’s no way to add time between...
Jetpack Scan
2.6.2020
Fresh from the Jetpack team at Automattic, today, comes Jetpack Scan. Jetpack Scan scans all the files on your site looking for anything suspicious or malicious and lets you know, or literally fixes it for you with your one-click approval.
This kind of security scanning is very important to...
Kinetic Typography with Three.js
2.6.2020
Discover how to use Three.js to render kinetic 3D typography.
The post Kinetic Typography with Three.js appeared first on Codrops
Rotated Table Column Headers… Now With Fewer Magic Numbers!
1.6.2020
Rotated <table> column headers is something that’s been covered before right here on CSS-Tricks, so shout-out to that for getting me started and helping me achieve this effect. As the article points out, if you aren’t using trigonometry to calculate your table styles, you’ll have to rely...
Overlapping Header with CSS Grid
1.6.2020
Snook shows off a classic design with an oversized header up top, and a content area that is “pulled up” into that header area. My mind goes to the same place:
Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom...
UI Interactions & Animations Roundup #7
1.6.2020
Some modern UI animation shots to keep you up-to-date with the freshest trends.
The post UI Interactions & Animations Roundup #7 appeared first on Codrops
Custom Illustrations – A Quirky and Human Design Trend
31.5.2020
The use of custom illustrations has been a big trend recently that is not likely going anywhere soon. The deal is that artistic approaches, like old habits, always die...
The post Custom Illustrations – A Quirky and Human Design Trend appeared first on Onextrapixel
Increment Issue 13: Frontend
30.5.2020
Increment is a beautiful quarterly magazine (print and web) published by Stripe “about how teams build and operate software systems at scale”. While there is always stuff about making websites in general, this issue is the first focused on front-end¹ development.
I’ve got...
Global CSS options with custom properties
30.5.2020
With a preprocessor, like Sass, building a logical “do this or don’t” setting is fairly straightforward:
$option: false;
@mixin doThing {
@if $option {
do-thing: yep;
}
}
.el {
@include doThing;
}
Can we do that in native CSS with custom properties? Mark Otto shows...