Posts

Showing posts with the label CSS

Color Sniffer: Making HEX and RGB Color Detection a Breeze

Image
Please enable JavaScript 👆 Click anywhere on this page before CTRL + V 🗑️ RESET HEX RGB HEX CODE RGB CODE Click anywhere on the canvas to keep the colour value here (above) ⬆️ Hover over the canvas to see the colour value. How to Use We can paste image from the clipboard to the canvas. Before pasting (CTRL + V) it, please click anywhere on this page first. We can also use an image file from local drive. To do that, we can either click Choose File button to pick an image, or simply drag and drop the image file to this page. Once the image is placed on the canvas, we can hover the mouse cursor over the image. The colour of that particular pixel will be shown while we're hovering 🤔 Once we spot the colour we're intereste...

C4OP: CSS Color Code Color Output Preview

Image
TARGET ELEMENT BG COLOR OUTPUT HEX/KEYWORD CONTROLLER CSS Color Keywords List R G B CONTROLLER R G B A CONTROLLER HSL CONTROLLER HSLA CONTROLLER ...

CSS Structurizor

Image
Please enable JavaScript Indentation STRUCTURISE CSS RESTORE CSS Structurizor is a tool to structuralise or beautify your CSS code. Indentation Specifies how many horizontal indentation spaces used for the structured nesting.

CSS Trimmer

Image
Please enable JavaScript TRIM CSS RESTORE CSS Trimmer is a tool to trim or compress your CSS code.

Image Circle Clipper CSS Editor

This tool will help you to circle-clip a div element and place an image on it as a background-image . Result CSS RESET Select Top HTML element <div class="my_object"></div> How to Use Edit the CSS , the result can be observed right away. Please do not change .my_object keyword class in the CSS . You can change it afterward on your own HTML page. We can use external URL as the background-image source. To convert small local file (under 500 KB) into base64 URI , use this base64 image converter . Then copy and paste the base64 to the background-image: url([paste here]) . But since it can be a very lengthy group of characters , it's not recommended to be used here. Please use external URL instead. Click Reset button to revert it to its original state. Click Select button or double click the textarea to select the CSS . Click Top ...

Xansfor: Character Size Transformer

Image
Xansfor is a character size transformer. Like, gradually changing the tone when you're saying some word(s). You sometimes do that, right? No? Oh, it's just me then. Xansfor is a not-that-good abbreviation of the words text and others. Xansfor will split your text and then wrap every single character with a custom inline-styled span tag. Then everything will be wrapped with a centering div element. Try it out! 🙂 I'm XANSFOR Text transform only works for letters none   UPPERCASE   lowercase One   Two   ...

List of Color Keywords for Web Styling

Image
The description is below this tool COLOR KEYWORDS ℹ️ Click the search option first. Find abnormally Search normally TOP RESET BG COLOR That is the list of keywords for defining web color. Useful for coloring any style-able HTML element with CSS . So, instead of typing rgb , or hex value, we can use these keywords below. The tool above has two options for searching the CSS color keywords. Find abnormally For example, type a , then every keyword containing the letter a will be shown. Another example, type the word green , then every color keyword that has the word fragment green in it will be returned. Search normally (from the beginning of the keyword) It's a common method in browser. It will check the character starting from the front of the keyword then return any matching keyword(s). Using t...