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>
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.
I have a button designed with Photoshop. The button has a gradient defined and I know how to generate it using Ultimate CSS Gradients Tool.
The problem is the button also has a 'Color Overlay' and I don't know how to convert it to css terms?!
UPDATE:
O.K, just to clarify, I know CSS quite well and i know how to set styles to elements.
I have this gradient:
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYjdiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg1JSIgc3RvcC1jb2xvcj0iIzZhNzI3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(179,183,189,1) 0%, rgba(106,114,125,1) 85%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,183,189,1)), color-stop(85%,rgba(106,114,125,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* IE10+ */
background: linear-gradient(to bottom, rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* W3C */
But like i mentioned, In photoshop there is also a Color Overlat defined which makes the button a bit darker, so in photoshop the button looks darker then in the browser, So my question is how do i combine the gradient and the Color Overlay in one CSS rule to make the button look exactly the same as in photoshop.
Update:
Demo
A little better button Demo
Demo with overlay
Just declare a class for button say .design
.design {
/* Gradient code goes here */
}
Now you can use this class as follows
<button class="design">Designed Button</button>
OR
<input type="button" class="design" value="Designed Button" />
For the COLOR OVERLAY, you can wrap the button inside a div with
display: inline-block and position: relative so that it will wrap
the button appropriately and use another div which is positioned
absolute inside the wrapper div with a height and width defined as
100% and assign opaque background color using rgba() and define
opacity as needed
Also if you want to be precise with your CSS declarations, you can particularly define .design class as input[type=button].design or button.design whatever you use, so that .design will not be applied to any other element
I am developing an Application with jQuery Mobile and Phonegap. I want to have a color gradient from #3c3c3c (grey) to #000000 (black) in the background but when I use this code
background: -webkit-linear-gradient(top, #3c3c3c, #000000);
you can see just a few big bars with different grey shades. So there is no linear gradient. Also you are able to see some green and some violet bars.
- Sorry as a new user I am not able to insert a Screenshot -
I also tried to instead insert a background image which shows a color gradient but this also looks as described above (we have also tried to maximize the color-depth of the picture but this also did not change the result).
Is it possible that the device is not able to display enough colors for a linear gradient?
Is there another possibility for creating a linear gradient?
Any help is greatly appreciated!
I am testing with
Galaxy Tab GT-P1000
Firmware-Version 2.2
To cover all your bases:
background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c), to( #000000)) !important; /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#3c3c3c, #000000) !important; /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#3c3c3c, #000000) !important; /* FF3.6 */
background-image: -ms-linear-gradient(#3c3c3c, #000000) !important; /* IE10 */
background-image: -o-linear-gradient(#3c3c3c, #000000) !important; /* Opera 11.10+ */
background-image: linear-gradient(#3c3c3c, #000000) !important;
Drop the !important if you don't need it, I use it to override some default jQM styles that's why and make sure you have background-clip: border-box; (which is default)
May be you have to write like this:
background: -webkit-linear-gradient(top, #3c3c3c 0%, #000000 100%);
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.