A JavaScript application that allows you to change the background color with a custom widget, pick from a list of SVG mask shapes, change the shape color with a hex value, then add an image URL mask layer.
- This app is built using custom functions that listen for changes on the form drop-down and sanitized inputs.
- The functions work together to apply the correct SVG mask to the image and color of your choosing.
- You can and an image URL address (ending in .jpg or .png format) to create a mask layer on top of an image. (transparent PNG files work best)
- Use the color picker widget to instantly change the background color while generating a hex code value that can be copied to the shape color input field.
- Available shapes are: circle, square,triangle, diamond, pentagon, hexagon, octagon and star.
- 1.1 bug fixes: added conditional statement to set default slider and hex values to '00' on initialization
Try a live demo here: https://css-masks-jawaragordon.vercel.app/
- Pick a shape from the drop-down menu.
- Choose a background color by using the RGB color picker tool.
- Enter a hex color (without the #) for the shape color. Press or tap enter/return.
- The app will apply the selected mask shape and color to the background color of your choice.
- Try different combinations of shapes and colors
[Optional]
- Enter an image URL that ends with .jpg or .png file extension into the "Mask Image" input field.
git clone https://github.com/JawaraGordon/css-masks
- JavaScript
- HTML
- CSS
•Fork the repository
•Create your feature branch (git checkout -b feature/new-feature)
•Commit your changes (git commit -am 'Add new feature')
•Push to the branch (git push origin feature/new-feature)
•Create a new pull request
This project is licensed under the MIT License - see the LICENSE.md file for details