Experimenting with Random() in CSS
4 days ago
- #creative design
- #random() function
- #CSS
- CSS introduces a random() function for creating random values in properties, enabling creative designs.
- Browser support includes Polypane 29+, Chromium 148+ (with experimental features), and Safari 26.2+ (partial support).
- The bokeh effect demo uses random() for position, size, color, opacity, blur, and animation to simulate out-of-focus light spots.
- Falling flower petals demo applies random() to position, size, animation timing, and 3D rotation for a natural falling effect.
- Interactive Polaroid stack demo uses random() for rotation and translation, with click-to-fling interactivity via checkboxes.
- random() can be combined with if() and style queries to simulate random-item() functionality for discrete selections.
- Weighted random values allow control over odds, like setting 70% inline-block vs. 30% block display for a poem layout.
- Additional demos include shaky grid, rotating rectangles, and aurora effects, showcasing diverse creative applications.
- random() is a work-in-progress with evolving specs, bugs, and potential for advanced features like custom identifiers and scopes.