[WIP] A solid directive for adding colorful shadows to images.

Overview

solid-cosha

A solid directive for adding colorful shadows to images (based on cosha).

Quick start

Install it:

yarn add solid-cosha

Use it:

import { cosha } from 'solid-cosha';

const App = () => {
  return (
    <div>
      <img src="src/assets/john-cena.jpg" alt="peacemaker" use:cosha />
    </div>
  );
};

Config

Everything in the config is optional. The default values are:

const App = () => {
  return (
    <img
      src="src/assets/john-cena.jpg"
      alt="peacemaker"
      use:cosha={{
        blur: '5px',
        brightness: 1,
        saturation: 1,
        x: 0,
        y: 0,
      }}
    />
  );
};

License

MIT License © 2022 Robert Soriano

You might also like...

JQuery avatar plugin to create colorful text avatar and image avatar.

Gravatar Live Demo Pre Requirement jQuery.js initialization Its very easy to initialize the plug-in Step 1: In HTML div data-avatar="text" class="ava

Oct 28, 2022

A basic Svelte tooltip directive.

SVooltip A basic Svelte tooltip directive. Powered by Floating UI. Usage script import { tooltip } from 'svooltip'; import 'svooltip/svooltip.css'

Nov 26, 2022

Compare James Webb Space Telescope images to older images.

Compare James Webb Space Telescope images to older images.

How much more powerful is the James Webb Space Telescope when compared to Hubble? Find out! More info Want to help out? CONTRIBUTING.md Blog post with

Jan 3, 2023

Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Aug 3, 2022

Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

Dec 30, 2022

MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

May 1, 2023

🐧 [WIP] Genshin Impact Chat Bot

Genshin Bot Config $ cp config/bot.sample.ts config/bot.ts Development $ yarn $ yarn dev $ open http://localhost:7001/ Npm Scripts Use yarn lint to ch

Dec 20, 2021

[WIP] WebGL API implementation for Deno, built on GLFW using FFI.

Note I'm no longer working on this project because I have just realized macOS does not support OpenGL ES API, and adding Desktop GL backend to this mo

Jun 11, 2022
Owner
Robert Soriano
[object Object]
Robert Soriano
A SolidJS starter template with solid-labels, solid-sfc and solid-styled

solid-sfc-styled-labels-starter This is a SolidJS starter template for easily setting up solid-sfc, solid-styled and solid-labels. Development Install

Alexis H. Munsayac 9 Mar 25, 2022
Add focal point alignment of images to your Alpine 3.x components with a custom directive.

Alpine Focal Add focal point alignment of images to your Alpine 3.x components with a custom directive. This package only supports Alpine v3.x. About

Michael Lefrancois 2 Oct 12, 2021
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Solid.js library adding a services layer for global shared state.

Solid Services Services are "global" objects useful for features that require shared state or persistent connections. Example uses of services might i

Maciej Kwaśniak 55 Dec 30, 2022
Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.

smooth-shadow Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation. Demo As Tobias already p

Thomas Strobl 4 Oct 15, 2022
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat

prashanth s 1 Dec 24, 2021
🎨ansi escape code generator to help make colorful command line tools

ansicodes ?? ansi escape code generator to help make colorful command line tools i got tired of looking up ansi code tables when writing command line

Gabe Banks 53 Dec 17, 2022
Generate colorful and temporarily identifiable SVGs with unique urls.

reptiles.dev Generate colorful and temporarily identifiable SVGs with unique urls.

Tim Mikeladze 7 Dec 6, 2022