Web Tools #568 - CSS Tools, SVG, Media, Uncats

Advertisement

CSS and HTML Tools

AI CSS Animations — A neat little AI-based tool that allows you to generate complex CSS animations using a prompt. Just describe the animation to apply to an element and this will generate the keyframes code (limited free features).

matcha.css — A stylesheet to apply sensible defaults to most HTML elements, for simple sites and quick prototypes, with the option to create a custom stylesheet where you only include the styles you want.

Restyle — A zero-config CSS-in-JS solution for React, with features like no runtime, isomorphic styling, and on-demand style loading. Note that it currently requires a Canary release of React which uses style hoisting.

Get Training at the .NET Epicenter: Microsoft HQ! — Exclusive offer: save $900 off standard pricing with code WEBTOOLS. Join us for VSLive! Developer Conference August 5-9 @ Microsoft HQ in Redmond, WA.    SPONSORED 

Screen Ruler — A Chrome extension to quickly and easily measure sizes, distances, margins, and padding of any element on any web page.

Type Fluidity — An online tool to calculate fluid typography sizes using the CSS clamp() feature, with options to customize min/max font-size, viewport, and preview with your choice of Google font.

fullwindcss — A extension for Tailwind CSS that allows you to add 1001 color shades per color, instead of the limited 11 shades that Tailwind offers by default.

selectlist-polyfill — A polyfill for the selectlist element proposed by Open UI, to extend the customization of the HTML select element, which historically has had limited styling and features.

Deblank Colors — Instantly generate personalized color palettes, simply enter your prompt and see your color palette come to life on useful mockups. Requires sign-in for more than three palettes.

JHson.js — A zero-dependency JavaScript library for converting between HTML and JSON, with binding, templating, attributes, and CSS support.
 

Media Tools (Images, Video, etc.)

og-img — A framework agnostic package, built using web APIs, for generating Open Graph images using Satori and resvg.

Omniclip — An open-source video editing application that works in the browser and no data is saved to a server. Supports rendering up to 4k resolution.

SVG Viewer — An online SVG editor and converter that lets you optimize, prettify, flip, rotate, scale, change dimensions, and convert to React, React Native, PNG, and Data URIs.

🎹 STRICH – Barcode Scanning for Web Apps — STRICH brings fast & reliable 1D/2D barcode scanning to the web. You don't need a native app to scan barcodes! Free demo, 30-day trial.   SPONSORED 

Chromicons — A set of 400+ SVG line icons, searchable and categorized under app/ui, science, and health, and you can download the whole lot with a click.

Dupe — A gallery of royalty-free social-first imagery featuring high-quality, high-resolution images that you can filter by aesthetic or subject.

Emoji Kitchen — Create a custom emoji that combines two selected emojis (chosen from thousands of existing ones) which you can then download as an image. You can also generate a random combo emoji.

JPEG Compressor — A free online image optimization tool that can compress different image formats including JPEG, PNG, SVG, and WEBP.

Figicon — A free set of 400+ SVG icons that you can copy as SVG code or download directly, under more than 30 categories, with a Pro option available for more.

UI Faces — A growing library of free, AI-generated, high-resolution avatars for design mockups, available under categories of human, alien, cartoon, abstract, and robot.

Advertisement

The Uncateg­orizables

Openpanel — An open-source alternative to Mixpanel (the product analytics platform) that's privacy-friendly, cloud hosted, has real-time analytics, and more.

Hi.Events — An open-source, event management and ticket selling platform, with optional cloud hosting, to help you create, manage, and sell tickets for events of all sizes.

Sink — A simple, speedy, and secure link shortening service with analytics that's 100% run on Cloudflare, and has the option to add an expiry date.

🎹 STRICH – Barcode Scanning for Web Apps — STRICH brings fast & reliable 1D/2D barcode scanning to the web. You don't need a native app to scan barcodes! Free demo, 30-day trial.   SPONSORED 

pico — A set of open and managed web services leveraging SSH that includes static site hosting, localhost tunnel, a blog platform, code snippets, and more.

Bouncy Ball — A single resource to compare web animation techniques with code and demos for all the different ways you can do a bouncy ball effect (JavaScript, React, CSS, WebGPU, Lottie, and lots more).

Lowcoder — An open-source, low-code, internal tools and app building platform to create software for your team and customers quickly and easily.

tl-rtc-file — A WebRTC P2P online web media streaming tool (for files, video, screen, live streaming, text) with management and statistical monitoring capabilities.

ArchiveWeb.page — A JavaScript-based system for high-fidelity web archiving directly in the browser that can be used as a Chrome extension or as an Electron app.

Arc — A new browser for Windows and Mac with a clean UI, organizational features for work/study, split view, themes, and more.

Commercial Apps & Classifieds