Building upon @Abdelaziz Mokhnache s answer
You can also create your own simple color input using pure javascript without having to load externally, like this:
let color_picker=document.querySelector("#color_picker");
let color_wrapper=document.querySelector("#color_wrapper");
let color_picker_alpha=document.querySelector("#color_picker_alpha");
function set_color(el){
color_wrapper.style.backgroundColor=color_picker.value + (color_picker_alpha.value == 255 ? "" : parseInt(color_picker_alpha.value).toString(16).padStart(2, "0"));
}
#color_wrapper {
background-color: black;
display: inline-block;
visibility: hidden;
}
#color_wrapper::before {
content: "";
position: absolute;
border-radius: 3px;
outline: black solid 2px;
border: white solid 3px;
height: 2rem;
width: 2rem;
pointer-events: none;
background-color: inherit;
visibility: visible;
box-sizing: border-box;
}
#color_picker {
opacity: 0;
height: 2rem;
width: 2rem;
box-sizing: border-box;
pointer-events: initial;
visibility: visible;
}
#color_picker_alpha {
filter: grayscale(100%);
visibility: visible;
}
you can do it like this using jquery, you can apply a custom color with a custom transparency to an element.
$(document).ready(function() {
$("input").change(function() {
var opacity = $("input[type=range]").val();
var color = $("input[type=color]").val();
var rgbaCol = rgba( + parseInt(color.slice(-6, -4), 16) + , + parseInt(color.slice(-4, -2), 16) + , + parseInt(color.slice(-2), 16) + , + opacity + ) ;
$( div ).css( background-color , rgbaCol)
})
})
this is a div
In CSS4 there is the 8 digits RGB hexadecimal notation: #RRGGBBAA. Last two digits are the values for the alpha channel.
That makes it easy to concatenate the alpha value to the hex string.
Not sure about browser support at the moment.
If you want to use this color but only knowing the HEX type, try convert it into RGB or HSL by using color picker tool, there r many online. Then just add alpha chanel ( 0 -1) for transparency. Eg. Rgb(225,10,10, 0.7) Use this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
Use like this,
background-color : rgba(0, 255, 255, 0.8);
Refer this,
http://www.wufoo.com/html5/types/6-color.html
function rgbA(color) {
rgba=color.substring(0,7)+$( #AlphaFill )[0].value.padStart(2, 0 ).replace(100, );
return rgba;
}
insert an Input type="range". Send your 6 digit Hex to the above function. rgbA( #ff0000 )
returns 8 digit rgba in HEX: range 80 = #ff000080 or range:0 = #ff000000 or range:100 = #ff0000
The last 2 digits change the transparency
#ffffff00 => min color opacity
#ffffff83
#ffffffff => max color opacity
edit : as Lazerbeak12345 said input[type=color] alpha channel has been requested but no progress yet.
I solved it by adding e6 ,
$( #color ).change(function(e){
$( .mask ).css( background-color , e.target.value+ e6 )
console.log(e.target.value+ e6 )
})
Try using browser console and go to elements, find your target element and pick a color there, the last 2 characters in the color is the alpha... just in my experience
i suggest a other way : might be more convenient in my case i input a color and alpha and save them in a json file to call whenever the page is loaded it reads the json file for saved settings the edit form to change the settings split up the saved color+alpha using substr() then convert to dec with hexdec() before form (php) :
$value = JData[ Page];
$galHighlightColor = substr($value[ galHighlightColor ], 0, 7);
$galBorderColor = substr($value[ galBorderColor ], 0, 7);
$Ha = hexdec(substr($value[ galHighlightColor ], 7, 2));
$Ba = hexdec(substr($value[ galBorderColor ], 7,2));
then in the form use range or number (just do for each)(php):
echo "
Alpha
Apha 0-255 for this color
";
handle the form save the complete 8 digit color code do for each get the color and convert the dec to hex again but using dechex() now you got a color +alpha you can use in my example i save it in a json file (php):
Json file entry: "galHighlightColor":"#e63333c0","galBorderColor":"#d6a8a8ff"
use into html (php):
I am trying to create a search text-field like on the Apple website.
The HTML looks like this:
<div class="frm-search">
<div>
<input class="btn" type="image" src="http://www....
I have a div <div id="masterdiv"> which has several child <div>s.
Example:
<div id="masterdiv">
<div id="childdiv1" />
<div id="childdiv2" />
<div id="...
I m writing a php script to crop an image.
The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one.
...
<form><input type="file" name="first" onchange="jsFunction(2);">
<input type="file" name="second" onchange="jsFunction(3);"</form>
Possible to pass just numbers to the js ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS.
One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
Is it possible to reload a form after file-input change?
I have a form where the user can chose an image for upload. I also have a php script which displays that image resized.
I only wonder if it ...
I d like to add a simple separator line in an aspx web form.
Does anyone know how? It sounds easy enough, but still I can t manage to find
how to do it..
10x!
