I found this lying around:
background-image: -moz-linear-gradient(center top, #B6D3F4, #5483B8);
I assume the 2nd and 3rd params are the start and end color of the gradient, but what exactly does the first param "center top" mean?
Given that -moz-linear-gradient is obviously specific to Mozilla, what's the equivalent CSS3 standard version of this rule?
Please have a look to the MDN. If I read right you can obmit the prefix.
<side-or-corner>
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
For all browsers:
background: #b6d3f4; /* Old browsers */
background: -moz-linear-gradient(top, #b6d3f4 0%, #5483b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6d3f4), color-stop(100%,#5483b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* IE10+ */
background: linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6d3f4', endColorstr='#5483b8',GradientType=0 ); /* IE6-9 */
Related
While using a CSS black to transparent linear-gradient I noticed that it doesn't gradually fade to transparent, instead it makes the grey area linger longer and only near the end it becomes transparent with a noticeable limit.
After noticing this I decided to use a photoshop gradient with the exact properties and it looked better, the gradient was changing from black to transparent smoothly and linearly.
The following contains an example showing a CSS linear-gradient on the left and Photoshop generated gradient on the right - Both were created with the exact same properties:
#css, #ps{
height:100px;
width:50%;
}
#css{
float:left;
background:linear-gradient(black, transparent);
}
#ps{
float:right;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEUCAgIDAwMEBQUGBgYICAgJCQkLCwsNDQ0PDw8RERETExMVFRUXFxcZGRkbGxsdHh4gICAiIiIkJSUnJycpKiosLCwvLy8xMjI0NDQ3Nzc5Ojo8PDw/Pz9CQkJFRUVISEhLS0tOTk5RUVFUVFRXV1daWlpdXV1gYGBjY2NmZmZpamptbW1wcHBzc3N2dnZ5eXl8fX2AgICDg4OGhoaJiYmMjIyQkJCTk5OWlpaZmZmcnJyfn5+ioqKlpqaoqamrrKyvr6+ysrK0tbW3uLi6urq9vb3AwMDDw8PGxsbJycnLy8vOzs7R0dHT09PW1tbY2Njb29vd3d3g4ODi4uLk5OTm5ubp6enr6+vt7e3v7+/x8fHy8vL09PT29vb4+Pj5+fn7+/v8/Pz+/v4AAAE6GCMnAAAAY3RSTlP+/Pv5+Pb08vHv7evp5uTi4N3b2NbT0c7LyMbDwL26t7SxrquopaKfnJmWk4+MiYaDgHx5dnNwbGlmY2BdWldUUU5LSEVCPzw5NzQxLiwpJyQiHx0bGRYUEhAODQsJBwYEAwEIFXNRAAAAEElEQVQIHWNJZpnLwjj0IQCJ8QLzQI0QnQAAAABJRU5ErkJggg==");
}
<div id="css"></div>
<div id="ps"></div>
As you can see the difference is clearly visible. Is it possible to replicate Photoshop's real linear-gradient into CSS's or my only option is to use base64/png tricks to achieve an actual linear gradient?
Because currently css's linear-gradient is everything but linear, in fact from what I can see it creates an easeInOut-gradient instead of linear.
As GRC says, you can set multiple midpoints values to adapt the gradient to your exact needs
A good starting point is colorzilla, where you can import an image file and get an automated result.
For your image, the result is:
.test {
height: 100px;
background: #020202; /* Old browsers */
background: -moz-linear-gradient(top, #020202 0%, #1f1f1f 9%, #434343 18%, #989898 38%, #b2b2b2 45%, #d1d1d1 56%, #e9e9e9 67%, #f2f2f2 73%, #f9f9f9 80%, #fdfdfd 87%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#020202), color-stop(9%,#1f1f1f), color-stop(18%,#434343), color-stop(38%,#989898), color-stop(45%,#b2b2b2), color-stop(56%,#d1d1d1), color-stop(67%,#e9e9e9), color-stop(73%,#f2f2f2), color-stop(80%,#f9f9f9), color-stop(87%,#fdfdfd), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020202', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
<div class="test"></div>
The problem is that this tool gives only rgb values, you will need to manually convert those to rgba, and play with the alpha values.
You can do following:
background:linear-gradient(black, transparent, transparent);
or
background:linear-gradient(black 10%, transparent);
10% of space is taken by black.
Hope this helps.
Im trying to do a gradiente with css but Im not having sucess.
I have a purple logo at center of my header, and I like to see purple with white, but I dont want my whole header white.
So Im trying to have my header blue, and at center where I have my logo I want a gradient that allows me to have whiter center so I can put my logo there.
I want something like this:
Blue and at center where I want to put my logo I want to have something like white background.
Im trying to do this effect but Im not having the result that Im looking for.
You can see here what Im getting: http://jsfiddle.net/BA9Ry/2/
My html:
<header id="top">
<span id="logo">
<img src="http://i62.tinypic.com/11ls8li.png" />
</span>
</header>
css:
*
{
margin:0;
padding:0;
border:0;
outline:none;
}
#top
{
width:800;
height:auto;
margin:0 auto 0 auto;
background:#7088A8;
background: -webkit-gradient(linear, left center, right center, from(#7088A8), to(#fff));
}
#logo img {
width:200px;
height:100px;
display:block;
margin:0 auto;
}
Use this syntax:
background: -webkit-radial-gradient(#FFF, #7088A8);
this is the line you need
background: -webkit-radial-gradient(#ff, #7088a8);
Expanding on Miljan Puzović's comment answer, you'll need to use radial-gradient instead of gradient(linear, ...).
As you can see from the JSFiddle he provided, there are several different prefixes given to each radial-gradient. If for whatever reason you don't need to support older browsers, you can drop all of them except for -webkit-radial-gradient() and radial-gradient(). For IE 9 and below support, you'll need to user Microsoft's proprietary filter: progid:DXImageTransform.Microsoft.gradient().
Calling background: before all the radial-gradients will give old browsers a single colour background to use if they don't support radial backgrounds.
CSS from the JSFiddle:
#top {
background: #c5e0f4; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #c5e0f4 0%, #60abf8 78%, #6b98c4 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c5e0f4), color-stop(78%,#60abf8), color-stop(100%,#6b98c4)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #c5e0f4 0%,#60abf8 78%,#6b98c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #c5e0f4 0%,#60abf8 78%,#6b98c4 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #c5e0f4 0%,#60abf8 78%,#6b98c4 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #c5e0f4 0%,#60abf8 78%,#6b98c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e0f4', endColorstr='#6b98c4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Browser Support:
You can read more on the support of browsers here. As you can see -webkit-radial-gradient is still required for most iOS/Android browsers.
Full Syntax:
You can see more about the full syntax of radial-background on Mozilla's Developer Network Website.
Question: Can I add a softer CSS style to a cell back colour?
Issue: Gridview highlights in Red/Yellow/Green if something needs doing. As you can imagine this looks a bit garish at the moment.
What I want to do is add a soft edge around each cell. So I have two schools of thought but don't know enough about CSS to find the answer (I could be searching for the wrong keyword)
1) Add a soft edge around the cell colour
2) Create a 'soft padding' for each gridline that takes the edge of the colours like a mask.
The code!
CSS code I use at the moment to change the cell colour:
e.Row.Cells(iLoopColumn).BackColor = Color.Green
I have found colour gradient at www.colorzilla.com/gradient-editor but how do I merge the two, if that is the right route.
background: #f0b7a1; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZjZlNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(50%,#8c3310), color-stop(51%,#752201), color-stop(100%,#bf6e4e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* IE10+ */
background: linear-gradient(to bottom, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-8 */
Here's a solution that gives entire rows in a table a soft-edge effect. The key points are
Give the targeted rows a class so you can target them with the css
Apply the disply: block style to force colouring the row (it also
removes default padding between cells)
Use 2 different classes - one to apply the soft-edge effect, the
other to set the colour of the row.
Note: only tested with Google Chrome Version 32.0.1700.76 m
<!DOCTYPE html>
<html>
<head>
<style>
.softEdge
{
display: block;
box-shadow: inset 0 0 20px rgba(255,255,255,1.0);
}
.red{ background-color: #F00;}
.green{ background-color: #0F0;}
.blue{ background-color: #00F;}
</style>
</head>
<body>
<table>
<tr class='softEdge red'><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr class='softEdge green'><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
<tr class='softEdge blue'><td>cell 7</td><td>cell 8</td><td>cell 9</td></tr>
</table>
</body>
</html>
I am Combining CSS3 gradient and background image. It is working fine in Chrome and FF and also Background image is getting repeated. in ie9 and Below i am not able to see the Background image. Any one please help me
body{background: #d5cea6; /* Old browsers */
background-image:url("cc.png"), -moz-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%); /* FF3.6+ */
background-image: url("cc.png"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(40%,#c9c190), color-stop(100%,#b7ad70)); /* Chrome,Safari4+ */
background-image: url("cc.png"),-webkit-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* Chrome10+,Safari5.1+ */
background-image:url("cc.png"), -o-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* Opera 11.10+ */
background-image: url("cc.png"),-ms-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* IE10+ */
background-image:url("cc.png"), linear-gradient(to bottom, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); /* IE6-9 */
}
This is the code i used
In short, no it won't work. You will not be able to do this with IE's old filter style if you're trying to combine a background image and a gradient into the same background.
The only way I know of to make this work reliably in old IE versions is to use the CSS3Pie library.
Using this library, it is possible to specify standard CSS code in old IE versiosn for various modern features, including gradients.
Download the PIE.htc script, add it into your site, then add the following lines to your CSS (and remove the filter line):
-pie-background: url("cc.png"), linear-gradient(to bottom, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* PIE */
behavior: url(PIE.htc); /* change the URL as appropriate for your site */
Now your background should behave the same even in really old IE versions as it does in modern browsers.
Hope that helps.
See also the CSS3Pie documentation.
I have some link buttons that I'm using CSS3 gradient code that I generated from Ultimate CSS Gradient Generator. It is working great except for IE7-9 (not worrying about IE6). Instead of the nice mid-gray to dark gray it is showing a blue to black gradient. The code being used is:
background: #666666; /* Old browsers */
background: -moz-linear-gradient(top, #666666 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#141414 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#141414 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #666666 0%,#141414 100%); /* W3C */
To see what it is rendering like: http://bradmccullough.com.w.jaijaz.co.nz/
I have noticed that altering the display css element changes it but can't put my finger on what exactly is going on.
Thanks.
It is because you are using the shorthand color for gray in your CSS. Make sure you use #666666. Looking at the source of the stylesheet, for the IE filter, you're using #666 (although in your post above you have it right).
We had a similar problem recently. We identified that running CSS minify on the CSS files would shorten '#666666' to '#666', resulting in IE8 not being able to render the correct colour value within the 'filter' property. The only alternative was to define the colour as 'white' (our problem was with '#ffffff') or tweaking the colour slightly, i.e. '#fffffe' to prevent it from being written in shorthand.