Collective #736
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_WOTW.jpg?x86293)
Inspirational Website of the Week: Postevand
A modern grid based design with great typography. Our pick this week.
Get inspired![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_divi.jpg?x86293)
Black Friday is coming early!
Save the date and win an iMac at this year's Black Friday sale! Purchase any Divi product & get our biggest discount of all time, a free prize, a pack of website templates and exclusive access to dozens of additional product deals.
Get notified![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_lucia.jpg?x86293)
Lucia
Lucia is a simple yet flexible user and session management library that provides an abstraction layer between your app and your database.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_threejstut.jpg?x86293)
Shadow Mapping In Three.js
In this article Misaki Nakano writes about how to do shadow mapping in Three.js.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_colors.jpg?x86293)
OKLCH in CSS: why we moved from RGB and HSL
Learn about the CSS Color Module 4 which adds oklch() and allows for P3 wide-gamut support.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_mediaquery.jpg?x86293)
The New CSS Media Query Range Syntax
The Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators, like , and =, that make more sense syntactically while writing less code for responsive web design.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_http.jpg?x86293)
The HTTP crash course nobody asked for
Learn all about the functioning of HTTP in this crash course.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_commit.jpg?x86293)
The Perfect Commit
Simon Willison shares his work around the Perfect Commit and what steps it invovles.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_21.jpg?x86293)
Scroll to Text Fragments
Learn about scroll to text fragments which just landed in Safari. By Jim Nielsen.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_preview.jpg?x86293)
Generative art Open Graph preview images
A how-to on generative art and browser automation by Matthew Ström.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_statecss.jpg?x86293)
State of CSS 2022
Web styling features of today and tomorrow, as seen at Google IO 2022, plus some extras.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_next.jpg?x86293)
Outstatic
An open source static site CMS for Next.js. Create your blog or website in minutes. No dabatase needed.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_11.jpg?x86293)
Designing an Accessible Future
Geri Reid's talk at this year’s WDC in Bristol on applying the principles of WCAG 3.0 to some current visions of the future.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_imageencrypt.jpg?x86293)
Image Steganography Tool
A simple C++ encryption and steganography tool that uses Password-Protected-Encryption to secure a file's contents, and then proceeds to embed it insde an image's pixel-data using Least-Significant-Bit encoding.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_hydra.jpg?x86293)
Hydra
Hydra is live code-able video synth and coding environment that runs directly in the browser. It is free and open-source and made for beginners and experts alike.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_shader.jpg?x86293)
Fragment Shader Art
Another creative coding shader exploration by Daniel Velasquez.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_outline.jpg?x86293)
Fancy Image Decorations: Outlines and Complex Animations
In this third and final piece of a series on image decorations, Temani Afif shows more techniques using the CSS outline property.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_dashedline.jpg?x86293)
Masked Gradient Dashed Lines
A very interesting technique for creating dashed lines with a gradient. By Eric Meyer.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_backanimation.jpg?x86293)
Wormhole still frames sequence CSS only w/ commands
A really cool CSS Only animation of still frames sequence made by Olivier Blanc.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_search.jpg?x86293)
Swurl
Swurl is a new search engine that allows you to search everything instantly!
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_aistyle.jpg?x86293)
Invasive Diffusion: How one unwilling illustrator found herself turned into an AI model
Andy Baio on a recent Stable Diffusion AI discussion regarding the ethics of using an artist's style.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_portfolio.jpg?x86293)
Brett Williams' Portfolio Place
The super cool "Portfolio Place" is the home of Brett Williams' web experiments.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_scroll.jpg?x86293)
Building Chrometober!
Read how the scrolling book came to life for sharing fun and frightening tips and tricks this Chrometober.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_android.jpg?x86293)
TamoTam
This project is a combination of a personal education project to learn JavaScript Mobile Development using React Native and a business idea to create a mobile app with offline-only events.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/11/C736_unreveal.jpg?x86293)
Unreveal Effects for Content Previews | Codrops
Some explorations of page transitions using covering elements and CSS clip-paths.
Check it out