I am using CSS background gradients to create a transparent radial gradient effect. If you look here in Chrome: http://dev.aaronpitts.ch/unitymedia/index.html you will see it working how I want (the Social Media, SEM, Web Design and Begin your journey backgrounds). The problem is the other browsers don't keep it smooth and cut off the edges. Any ideas?
This is the code I'm using:
#home-services article {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4YjhiOGIiIHN0b3Atb3BhY2l0eT0iMC4zNyIvPgogICAgPHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC44NCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(139,139,139,0.37) 0%, rgba(255,255,255,0.84) 75%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(139,139,139,0.37)), color-stop(75%,rgba(255,255,255,0.84)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
background: radial-gradient(ellipse at center, rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e8b8b8b', endColorstr='#ffffff',GradientType=1 );
text-shadow: 2px 2px 0px #FFF;
}
To avoid having the gradient cut off you need to stop it before it reaches the closest side of the container.
Fortunately, there is a keyword property in the gradient syntax closest-side.
JSfiddle Demos (of various options)
CSS for closest-side using obvious gradient
.closest-side {
background: radial-gradient(
ellipse closest-side,
rgba(0,0,0,1) 0%,
rgba(255,255,255,1)75%,
rgba(0,0,0,1) 100%);
}
Related
I want to style background of one element in CSS, something like this:
color gradient from top to bottom with no any transparency,
transparency gradient with single color from left to right: left and right with no transparency, and middle with 100% transparency
Second gradient should be on higher layer than first. Both placed on 100% of element's area
Code:
div.panel div.panel-heading
{
background: linear-gradient(to bottom, #e8e8e8 0%,#dbdbdb 50%,#cdcdcd 51%,#e0e0e0 100%),
/* Here I want have got second gradient, with transparency, on higher layer */;
}
Is this possible to do?
It is possible with :after and :before :
.gradient{
height:400px;
background: #61fc32;
background: -moz-linear-gradient(left, #61fc32 0%, #f43034 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#61fc32), color-stop(100%,#f43034));
background: -webkit-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: -o-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: -ms-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: linear-gradient(to right, #61fc32 0%,#f43034 100%);
position:relative;
}
.gradient:after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: -moz-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%, rgba(40,51,201,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(40,51,201,0)), color-stop(100%,rgba(40,51,201,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: radial-gradient(ellipse at center, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
}
DEMO
I have created a simple css bar with colour stops using the following:
#testing{
width:100%;
height:40px;
background-image: -webkit-linear-gradient(left, #034a96 80%, #eab92d 50%);
background-image: -moz-linear-gradient(top, #034a96 50%, #eab92d 51%);
background-image: -ms-linear-gradient(top, #034a96 50%, #eab92d 51%);
background-image: -o-linear-gradient(top, #034a96 50%, #eab92d 51%);
background-image: linear-gradient(top, #034a96 50%, #eab92d 51%);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
What I would like to do is have the first 80% of the bar is have a gradient that goes from the top with colour #034a96 to #0663c7 and then just that gradient colouring 50% of the bar. Then with the other 51% I have another gradient from the top with #eab92d to #c79810. What I'm asking is if it is possible to have multiple gradients with in each other eg:
background-image: -webkit-linear-gradient(left, top #034a96 to #0663c7 50%, top #eab92d to #c79810 51%);
Or something along those lines. I hope I'm being clear with everything. Thanks in advance
Yes, you can.
One simple example (not exactly your colourset, but it shows the plan):
background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
This code doesn't create multi-step gradients in IE.
Up to IE9, these aren't possible at all (only simple gradients), but IE9 supports SVG data. It's a bit complicated to write, but you should have a look at http://www.colorzilla.com/gradient-editor. It's an online-tool for creating CSS code for gradients. It also supports SVG gradients for IE9.
Question, if I wanted to create gradient lines that fade out on the top and bottom, similar to the lines seen on AT&T's drop down menu that separate the menu items, how would I go about that? I want to create a similar effect on a menu that I am coding, and I would prefer not to use images. Is there a way to achieve this in CSS? Help much appreciated! Thanks.
Microsoft CSS Gradient is a GUI you can use. just copy the CSS into your code:
Example:
#div {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);
}
You can create a div with 1px width then assign a gradient on it. Like that :
.line{
width:1px;
height : 25px;
margin : 0 5px;
background: rgb(125,185,232);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(125,185,232,1) 0%, rgba(30,87,153,1) 50%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(50%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -ms-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 );
}
Fiddle : http://jsfiddle.net/jPnXz/
Here a CSS gradient generator (i used it for the CSS) : http://www.colorzilla.com/gradient-editor/
Great documentation on CSS3 Gradients
http://www.css3files.com/gradient/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients
Gradient Generators
http://www.colorzilla.com/gradient-editor/
http://gradients.glrzad.com
http://www.cssmatic.com/gradient-generator
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/
You have repeating-gradient as well for this :
http://codepen.io/anon/pen/zbLkl
background:repeating-linear-gradient(
top ,
white 0,
white 1em,
turquoise 1em,
turquoise 1.2em) 0 2.4em;
line-height:1.2em;
Set equal line-height to gradient , so gradient will follow font-size.
the time to dig it, an old example with squares. and background-size.http://dabblet.com/gist/4750827
background:
linear-gradient(0deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent),
linear-gradient(90deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent);
background-size:1.4em 1.4em,1.4em 1.4em;
line-height:1.4em;
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(to top left ,#FFA500, #DDA0DD,#FFFAF0,#bfff00,#00ffff,#A9A9A9);
}
</style>
</head>
<body>
<h1>Linear Gradient</h1>
<div id="grad1"></div>
<br/>
<div>Internet Explorer 9 and earlier versions do not support gradients</div>
</body>
</html>
What would this gradient be in standard syntax?
-webkit-gradient(radial, center top, 0, center top, 1000, from(black), to(white))
If you are looking for cross browser CSS3 Radial Gradient:
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #4096ee 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#4096ee));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#4096ee 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#4096ee 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#4096ee 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#4096ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#4096ee',GradientType=1 );
From my point of view, the best tool on CSS gradient is Ultimate CSS Gradient Generator.
Try this.
background: -webkit-radial-gradient(center top,ellipse,#color1,#color2);
note:it can be ellipse or circle etc..
also add -moz, -ms, -o etc for different browsers.
Here's what I'm trying to do: A solid grey background with a semi-eclipse (i.e. half an eclipse) of light starting from the centre of the page and ending at the top, so it looks as if there is a torch shining upwards from the centre of the page.
I've tried using SVG instead of css as I thought it might be easier, but I've ran into a few problems. Can anyone point me in the right direction?
Edit: Here's an image of what I'm trying to achieve:
You can use a radial-gradient as the background image like this:
html {
background: #ccc;
background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
min-height: 100%;
}
This works by placing the center of the gradient 50% above the page (note the -50% second parameter.) combined with the cover size attribute.
You can read more about the CSS radial-gradient property at MDN.
Here is an example: http://jsfiddle.net/kUFNV/4/
Why not use a CSS gradient? Here:
background: #f9f9f9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2RjZGNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #cdcdcd 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f9f9f9), color-stop(100%,#cdcdcd));
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -o-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -ms-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#cdcdcd',GradientType=1 );
Then add a margin-top: -50%; CSS to the element with the background. I don't suggest this is the body element as it'll get a bit messy, but create a new element with absolute positioning, give it the gradient code and the -50% margin and z-index: -1; so it'll be under all the rest of the page.
Good luck!
I'd recommend playing around with one of the CSS3 gradient generators like this one. With a few different color stops on a radial gradient, you should be able to accomplish something pretty close.
Here's one I put together quickly: http://jsfiddle.net/43k6F/