Vigo's Weekly - Issue #03
📒Articles
CSS color-scheme-dependent colors with light-dark()
In CSS you can use many colors from one of the many color spaces. For example, you can use named colors, hex colors, color functions linked to a specific color space, the more generic color()
function.
Going beyond pixels and (r)ems in CSS - Absolute length units
In some cases, you might need a precise layout that remains consistent across different devices and screen sizes. Absolute units like pixels (px
) offer this control, ensuring elements stay exactly the size you define them in pixels, regardless of the viewing device or page zoom.
Sliding 3D Image Frames In CSS
Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup and pseudo-elements in the styles to pull it off.
🧰Curated Tools
Sponsored by Handpicked Tools
CSS Scan
Curated collection of 88 free beautiful CSS buttons, ready-to-use for your next projects.
Ray
Turn your code into beautiful images. Choose from a range of syntax colors, hide or show the background, and toggle between a dark and light window.
Tauri
Build an optimized, secure, and frontend-independent application for multi-platform deployment.
🛠Code Corner
A Fancy Frame With Zig-Zag Borders
img {
--s: 16px; /* control the size of the spikes */
--w: 250px; /* preferred image width */
--c:#0B486B;
width: round(var(--w),4*var(--s));
aspect-ratio: 1;
padding: calc(2*var(--s));
--_c:#0000 calc(2*atan(2)),var(--c) 0;
background:
conic-gradient(from atan(-2) at 50% var(--s),var(--_c)),
conic-gradient(from calc(180deg - atan(2)) at 50% calc(100% - var(--s)),var(--_c)) 0 100%;
background-size: calc(4*var(--s)) 50%;
background-repeat: repeat-x;
mask:
conic-gradient(from calc(atan(-2) - 90deg) at var(--s),var(--_c)),
conic-gradient(from atan(.5) at calc(100% - var(--s)),var(--_c)) 100% 0;
mask-size: 50% calc(4*var(--s));
mask-repeat: repeat-y;
}