CSS3 radial background, is there a cheat for it? - css

background: #008080; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #008080 0%, #0896a5 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#008080), color-stop(100%,#0896a5)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #008080 0%,#0896a5 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #008080 0%,#0896a5 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #008080 0%,#0896a5 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover, #008080 0%,#0896a5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#0896a5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
I want this as background for my webpage but that doesn't seem to work untill i add 100% width and height to * like so: * { width: 100%; height: 100%; } but that will mess up the rest of my page. So is there a cheat for it to still obtain this effect?


Set background-attachment to fixed:
background: radial-gradient(cover, #008080 0%, #0896a5 100%) fixed;

Related

Weird horizontal line with gradient in retina Safari

I have this strange horizontal line across the my gradient div. It is only showing in Safari and only on retina displays and I can't figure out why. Has anyone else had this problem?
HTML:
<div class="img-gradient2"></div>
CSS:
.img-gradient2 {
position: absolute;
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 26%, rgba(0,0,0,0.01) 27%, rgba(0,0,0,0.5) 68%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Chrome,Safari4+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}

I've run into the same bug. It appears to be triggered by a gradient background in Webkit on a retina display. I've reproduced it on a MBP and an iPad.
After a little testing, I've figured out a work around. Since the Webkit rendering engine appears to be painting a one pixel line of non-transparent background along the edge of the gradient, you can simply tell it to position the background one pixel up by tweaking the background-position-y. (For other folks reading this, if you are doing a side-to-side gradient rather than top-to-bottom, then change that to background-position-x.)
However, this will expose the underlying content by one pixel on the opposite side from the gradient, so you can change the absolute position of the gradient overlay by one.
background-position-y: -1px;
bottom: -1px;
Depending on your setup, changing the bottom (or top) might not produce the desired result depending on how the gradient interacts with the underlying content. Still, the background-position-y trick will remove the black line which might be better.
Full Code
.img-gradient2 {
position: absolute;
width: 100%;
height: 100%;
/** Workaround fix for Webkit black-line on retina displays **/
background-position-y: -1px;
bottom: -1px;
/**/
background: -moz-linear-gradient(top, rgba(0,0,0,0) 26%, rgba(0,0,0,0.01) 27%, rgba(0,0,0,0.5) 68%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Chrome,Safari4+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}

How to apply CSS to half of a point feature?

Due to I can not use server-side StyledLayerDescriptor (SLD) coding, neither I want to load external graphics I would like to use CSS to style my OpenLayers' point features.
In detail I would like to fill half (or 1/3) of a point feature with different colors.
A CSS code might be
#OpenLayers\.Geometry\.Point_111{
fill: red !important;
background: -moz-linear-gradient(-45deg, #ce275f 50%, #1e5799 50%, #207cca 50%, #7db9e8 100%) !important; /* FF3.6+ */
}
The feature is not assigned to a class.
Is that possible? Are there any other possibilities?

I immediately thought of this:
.circle {
height: 100px;
width: 100px;
border-radius: 50%;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(left, #000000 1%, #000000 50%, #ff00ff 50%, #ff00ff 100%, #ff00ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#000000), color-stop(50%,#000000), color-stop(50%,#ff00ff), color-stop(100%,#ff00ff), color-stop(100%,#ff00ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 1%,#000000 50%,#ff00ff 50%,#ff00ff 100%,#ff00ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 1%,#000000 50%,#ff00ff 50%,#ff00ff 100%,#ff00ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 1%,#000000 50%,#ff00ff 50%,#ff00ff 100%,#ff00ff 100%); /* IE10+ */
background: linear-gradient(to right, #000000 1%,#000000 50%,#ff00ff 50%,#ff00ff 100%,#ff00ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ff00ff',GradientType=1 ); /* IE6-9 */
}
JSfiddle
Gradient generated with Ultimate CSS Gradient Generator

Circular Gradients in CSS3

I'm looking to recreate a background like the one linked here using only css, I'm sure it's possible but I'm terrible at making CSS3 work for me.
If possible it should work in all modern browsers, not overly fussed about < IE8 support.
Any help is appreciated.

This is the CSS to create a Circular Gradient.
Creating gradient using CSS3 is very easy now. As there are many tools available.
Here are some online tools generate the gradiend code:
Colorzilla Gradients
Gradientoo
div{
width:250px;
height: 250px;
background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
background-image: -o-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffeda3', endColorstr='#ffc800',GradientType=1 );
}
Here is the Demo. http://jsbin.com/wedubinu/1/

background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
Generated by http://www.colorzilla.com/gradient-editor/

Diagonal gradient in css

Most of the gradients I've seen are either vertical or horizontal. Is it possible to have a diagonal gradient using css? I would like to have a gradient that starts out dark in one corner and becomes lighter in the opposite corner.

background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
http://jsfiddle.net/jrc72/show

Yes. http://www.colorzilla.com/gradient-editor/ has option to pick diagonal, see orientation.

See this demo http://jsfiddle.net/FQSdb/
and also check out http://www.colorzilla.com/gradient-editor/ for various orientation options

How to display a background image as hover effect in a CSS Button?

I have a CSS3 Gradient button and I'm trying to display a background image (small radial glow to be exact) inside of my button as a hover state. Since my button normal state is already taking up the 'background' tag, when I linked the background image in the hover, the CSS3 gradient effect disappeared when I hovered over it. I tried using background-image tag for the hover, but it didn't work.
Is there a method where I can display the hover background image on top of the normal state when it's hovered?
CSS:
.submit {
background: rgb(254,219,130); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,219,130,1) 0%, rgba(255,183,50,1) 24%, rgba(255,164,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,219,130,1)), color-stop(24%,rgba(255,183,50,1)), color-stop(100%,rgba(255,164,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fedb82', endColorstr='#ffa40a',GradientType=0 ); /* IE6-9 */
}
.submit:hover {
background-image: url(images/glow.png) center no-repeat;
}
HTML:
<button class="submit">Button</button>

Unlike aninput element, the button element can contain other elements, so the easiest way is to simply nest a span within the button and apply the 'glow' to that element:
<button class="submit"><span>Button</span></button>​
.submit:hover span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}​
JS Fiddle demo.
I didn't have access to your own image, so I used a a CSS gradient image generator as a substitute. Obviously substitute your own relevant image back in.
Using a second background-image:
With the introduction of CSS3, an element can have multiple backgrounds using a comma-separated list (as with, for example, the font-face declaration), which allows for the following:
.submit:hover {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), -moz-linear-gradient(top, rgba(254,219,130,1) 0%, rgba(255,183,50,1) 24%, rgba(255,164,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,219,130,1)), color-stop(24%,rgba(255,183,50,1)), color-stop(100%,rgba(255,164,10,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -webkit-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -o-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -ms-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), linear-gradient(to bottom, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}​
JS Fiddle demo.
I've not defined a second background under the filter property, because I honestly don't know if Microsoft's older browsers would understand the second value, or simply discard the entire rule.

Resources