Weekly Web Design & Development News: Collective #536
A collection of the latest and hottest design and development resources (Javascript libraries, CSS snippets, Free Graphic Design Resources, etc.) on the web from the last week (Week 3, 2024).
Web Design & Development News: Collective #536
React Marquee
A beautiful marquee component for React.
ThumbmarkJS
A simple JavaScript library that creates a fingerprint hash of the browser. It is easy to use and easily extendable.
Color Contrast Checker
A color contrast checker using React and TypeScript. The purpose of it was to understand how contrast ratios are calculated and to learn more about color luminance, which measures color brightness.
JSON to CSS var
A small JSON to CSS converter that allows you to define design tokens like colors, fonts, and spacing in JSON and convert them into CSS for use in your stylesheets.
Stylance
Stylance is a library and cli tool for working with scoped CSS in rust.
Features:
- Import hashed class names from css files into your rust code as string constants. Trying to use a class name that doesn't exist in the css file becomes an error in rust.
- Bundle your css module files into a single output css file with all the class names transformed to include a hash (by using stylance cli).
- Class name hashes are deterministic and based on the relative path between the css file and your crate's manifest dir (where the Cargo.toml resides)
- CSS Bundle generation is independent of the rust build process, allowing for blazingly fast iteration when modifying the contents of a css style rule.
[Download]
Medium-Style Image Zoom Animation ZoomableImage
The ZoomableImage is designed to revolutionize image interaction on your website. Inspired by the elegant zoom functionality of Medium.com, this JavaScript library lets visitors explore visuals without compromising the reading experience.
Nice Buttons
Create and Share Nice Buttons with Tailwind CSS.
Expand and Collapse Images With A CSS Accordion Slider
This is a pure HTML/CSS accordion slider designed to showcase your images in a fancy way.
hjsx
JSX is great for templating, but pulling in React can be overkill, and even when just using the types it can be confusing. hjsx (Hypertext + JavaScript Extensible Markup Language) aims to provide a simple way to use JSX on the server by rendering it to HTML.
[Download]
toast-cg
The toast-cg JavaScript Library provides a Toast class to display temporary, non-intrusive toast notifications on a web page.
Responsive Music Website Design
Use modern HTML and CSS to create a completely responsive Music App Design with awesome color theme.
[Download]
Tab Controls with CSS :has()
See the Pen Tab Controls with CSS :has() by Jhey (@jh3y) on CodePen.
Gooey Toggle Switch
See the Pen Gooey Toggle Switch by Jon Kantner (@jkantner) on CodePen.
CSS/JS Twinkle Stars
See the Pen CSS/JS Twinkle Stars by Tommy Ho (@tommyho) on CodePen.
Glowy Text Button from Departures
See the Pen Glowy Text Button from Departures by Jhey (@jh3y) on CodePen.
Radios With Sliding Focus
See the Pen Radios With Sliding Focus by Jon Kantner (@jkantner) on CodePen.
Get An AI Roast to Optimize Your Landing Page for Conversions – Roasted With AI
Submit your site to get a FREE personalized AI roast with tips to increase conversions!
Generate SEO-optimized Articles From Youtube Videos – YouTube Summarizer
Turn any YouTube video into an SEO-optimized article for your blog with the free YouTube Summarizer tool.
Transform Your Ideas Into Visual Diagrams With AI – FlowCraft
An AI-powered tool that transforms your ideas into visual diagrams effortlessly.
AI Assistant Essential Icon Set
[Download]
Button Component Foundation
[Download]
Valestine Romantic Handwritten
[Download]
