I need to create a colour picker for a site which wouldn't be a problem, but I want to essentially have a slider that picks colours from this range:
How would I go about this?
I can imagine something similar to this. It could probably use some (a lot) of tweaking, but that's the gist of it:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#color_picker {
background: #e8f230; /* Old browsers */
background: -moz-linear-gradient(left, hsla(63,88%,57%,1) 0%, hsla(0,0%,0%,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(63,88%,57%,1)), color-stop(100%,hsla(0,0%,0%,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* IE10+ */
background: linear-gradient(to right, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8f230', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
height: 30px;
}
</style>
</head>
<body>
<div id="color_picker"></div>
<div id="target">Test</div>
<script>
var picker = color_picker;
var result = target;
picker.onclick = function(e) {
console.log(e);
result.style.backgroundColor = "hsl(63, 88%, " + (50 - ((e.offsetX/picker.clientWidth) * 50)) + "%)";
}
</script>
</body>
</html>
If you can transfer this image into CANVAS, you can pick the color from here.
See:
Looking for a jQuery plugin to pick a color from an image?
If you want straight HTML, you could use the MAP tag and pass the relevant value using HTML-GET... Otherwise, a bit of JavaScript perhaps?
Have you actually looked around for existing code?
Here's something: http://www.w3schools.com/tags/ref_colorpicker.asp
From comments:
w3schools is a wrong and misleading site. You shouldn't use it as
reference for any sort of language. For PHP, there's the PHP Manual,
for JavaScript, there's Mozilla Developer Network (or MDN). See
w3fools.com to further understand why you should never use w3schools.
Fair enough. It was simply an example. It's faster to find source code on google than to press the "Ask Question" button on stackoverflow. Here's another: http://jscolor.com/ with directly linked LGPL source code. Modify to suit your purposes.
Related
I want to add such intro (that I have found on Codepen) to my website, i.e. to the top full-width widget on the home page, but its' styles contradict with theme's CSS.
How can I make this work on my home page? Is there any plugin needed for embedding HTML code into the WordPress Text widget, or what? Thank for the answer.
* {
margin: 0;
padding: 0;
}
body {
background: rgb(23,41,58); /* Old browsers */
background: -moz-linear-gradient(top, rgba(23,41,58,1) 0%, rgba(52,73,94,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,41,58,1)), color-stop(100%,rgba(52,73,94,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17293a', endColorstr='#34495e',GradientType=0 ); /* IE6-9 */
}
canvas {
display: block;
width: 100%;
}
You can put your carvas tags inside a new tags and edit that CSS class:
<div id="new-id"><carvas></carvas></div>
What I suggest you is download a plugin called "simple css" and change the classes and the Id inside the "simple css" interface, and edit your "new-id" CSS.
new-id {
background: rgb(23,41,58); /* Old browsers */
background: -moz-linear-gradient(top, rgba(23,41,58,1) 0%, rgba(52,73,94,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,41,58,1)), color-stop(100%,rgba(52,73,94,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17293a', endColorstr='#34495e',GradientType=0 ); /* IE6-9 */
}
also you can add a new widget type Text in your sidebar and edit the widget as you want using new CSS classes or ID.
before copy / pasting code I thin you need to look a bit to CSS SELECTOR for understand what the code you copy do in most part.
The codepen you link is composed mostly by JS and a bit of CSS.
Your CSS code focus the all the element (*) and all the content of the page (body), before implementing you need to isolate theses CSS selectors to one div who will load the canvas.
You didn't even talk about the javascript part who his very important in this codepen.
Maybe Try to upgrade a bit you skill code by looking HTML, CSS tutorials for understanding the basics of what you want.
I've come across a possible css/browser bug that I can't quite figure out. Simply put, I have the following scenario set up:
.my-class {
background: #66c28f; /* Old browsers */
background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1 ); /* IE6-9 */
}
<body class="my-class">
</body>
As you can see, there are multiple background properties added for backwards compatibility purposes. The problem is, when I have more than one background defined, sometimes nothing shows up at all. I'd say 1 out of every 3 times I load my page, the background doesn't show. It seems to be all or nothing. However, the second I resize the page, or select the body and toggle the background color on and off in developer tools, the colors show immediately (and yes, the styles show as working properly in developer tools- see screenshot below). I am using the most recent stable version of Chrome in my tests.
I am fairly certain it's not an issue with the body not having 100% height or anything like that. The stylesheet is also the last stylesheet in the head section. When I remove all but one background property, it works 100% of the time.
Any ideas why this would happen in a modern browser? Am I not allowed to provide fallback background styles?
The screenshot below shows the developer tools results when the background is not being displayed (but seems to be working properly in dev tools).
Note: This seems to be a similar issue as this 2009 post, but no explanation was given: background color doesn't always show up
Once i had a problem with this, but try to give height:100% to your <body> and <html> or sometimes try min-height:100% to your <body>.
In this case try again with the following css code:
html, .my-class {
height: 100%;
background: #66c28f; /* Old browsers */
background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1 ); /* IE6-9 */
}
Check this question to know more about this problem.
I'm new to WordPress. We have bought one of the themes and I have being trying to add a gradient to our footer. The theme provides a custom CSS option, but when I add this code to custom CSS and save it I don't see any changes.
This is the code I added to my footer:
.footer {
background: #87e0fd;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ZTBmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iIzNmOTNiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTJlM2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #87e0fd 0%, #3f93b5 38%, #012e3a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(38%,#3f93b5), color-stop(100%,#012e3a));
background: -webkit-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: -o-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: -ms-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: linear-gradient(to bottom, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#012e3a',GradientType=0 );
}
It's a little hard to give you an accurate answer based on such limited information, but I will try nonetheless.
Your CSS is valid. I've thrown together a quick test, and it seems to be working in both Firefox as well as Chrome. So you're good there.
The most common problems and their solutions:
Mixing up ID's and Classes: You are using the class 'footer', indicated in CSS by the dot at the beginning. Chances are the footer is using an ID, which is written with a hash. You can change the selector to #footer.
The footer is empty: If an element in HTML is empty, it causes the element to be zero pixels in height, which effectively makes it invisible. Add and adapt the following to the second line of your CSS: height: 256px;
In my current project, I've used CSS3 gradient in my CSS file. To support IE browser, I've used filter property as well. Following is my code:
.card.active .content.back {
background: #333; /* Old browsers */
background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
}
But when I use the filter property in the above code, the border-radius property is not working. If anyone know a fix for this, please share it with me.
Thanks
You can use PIE.htc for your desired results.
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
In addition, PIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.
http://css3pie.com/
or see the demo:- http://jsfiddle.net/ZxzSs/1/
for support PIE.htc you have to keep the PIE.htc file on your root folder than will work for your website....
You should be able to apply the gradient to a child of the element with the rounded corners. I don't have access to IE9 on my home machine but this should work:
.element {
background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
border-radius: 10px;
}
.element .ie-helper {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}
HTML:
<div class="element">
<!--[if lt IE 9]><div class="ie-helper"><![endif]-->
<p>Your content with gradient and rounded corners...</p>
<!--[if lt IE 9]></div><![endif]-->
</div>
If the page is viewed in IE10+ or other browsers, both the gradient and rounded corners will apply to same element (assuming you bring back the vendor-specific prefixes from your code sample). The inner div.ie-helper will only render on IE9 and below because of the conditional comments used.
This isn't ideal but would get the job done, but since you're after such a wide range of browsers to be fully supported this is a reasonable workaround
I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?
The code I use for all browser gradients:
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.
Update:
Here is a LESS Mixin (CSS) version for all you LESS users out there:
.gradient(#start, #end) {
background: mix(#start, #end, 50%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#start~", EndColorStr="#end~")";
background: -webkit-gradient(linear, left top, left bottom, from(#start), to(#end));
background: -webkit-linear-gradient(#start, #end);
background: -moz-linear-gradient(top, #start, #end);
background: -ms-linear-gradient(#start, #end);
background: -o-linear-gradient(#start, #end);
background: linear-gradient(#start, #end);
zoom: 1;
}
Look at the custom CSS filters IE can handle
http://msdn.microsoft.com/en-us/library/ms532847.aspx
The filter style should work for IE8 and IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
A significant gotcha when it comes to gradients in IE is that although you can use Microsoft's filters...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
...they kill clear type on any text covered by the gradient. Given that the purpose of gradients is normally to make the UI look better, that's a show stopper for me.
So for IE I use a repeating background image instead. If the background image css is combined with the gradient CSS for other browsers (as per Blowsie's answer), other browsers will ignore the background image in favour of the gradient css, so it will only end up applying to IE.
background-image: url('/Content/Images/button-gradient.png');
There are plenty of sites you can use to quickly generate a gradient background; I use this.
Great tool from Microsoft, allows you to examine colors real-time and generates CSS for all browsers:
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
/* IE10 */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
Just thought I'd add this useful link: http://css3please.com/
Shows how to get gradients working in all browsers.
Note that IE10 will support gradients as follows:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Right from ScriptFX.com article:
<body bgcolor="#000000" topmargin="0" leftmargin="0">
<div style="width:100%;height:100%; filter: progid:
DXImageTransform.Microsoft.Gradient (GradientType=1,
StartColorStr='#FF006600', EndColorStr='#ff456789')">
Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below
</div>
</body>
Try this:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
Two things I discovered while struggling with IE 9 gradient.
The -ms-filter did not work for me. I had to use simply filter.
I had to add height: 100% to my class for IE to use the gradient.
In my case I inserted it on header section
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
then in style section insert it
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;