How do I get A similar style to the below active div? It seems that the color is kind of fading.
You can use linear-gradient for that, as it is described here. You can do the following:
.hoverable:hover {
background: -webkit-linear-gradient(white, lightgray);
background: -moz-linear-gradient(white, lightgray);
background: -o-linear-gradient(white, lightgray);
background: linear-gradient(white, lightgray);
}
You can check a demo on this Fiddle
Try this
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(255,0,0,0), rgba(245,245,245,1)); /* Standard syntax (must be last) */
}
<!DOCTYPE html>
<html>
<body>
<h3>Linear Gradient - Transparency</h3>
<div id="grad1"></div>
</body>
</html>
Related
I made a quick jsfiddle to illustrate what I mean.
As you can see the one with the default bg color button face looks 3D, is there a way to replicate this with CSS as other colors than the greyish one buttonface is?
<body>
<button>I have buttonface</button>
<button style="background-color:purple;">I don't have buttonface</button>
</body>
sure you can
HTML
<button class="styled">I don't have buttonface</button>
CSS
.styled {
background: #00d9f6;
/* Old browsers */
background: -moz-linear-gradient(top, #00d9f6 0%, #00a4df 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00d9f6), color-stop(100%, #00a4df));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00d9f6 0%, #00a4df 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00d9f6 0%, #00a4df 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #00d9f6 0%, #00a4df 100%);
/* IE10+ */
background: linear-gradient(to bottom, #00d9f6 0%, #00a4df 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d9f6', endColorstr='#00a4df', GradientType=0);
/* IE6-9 */
border:1px solid #06f;
box-shadow:inset 1px 1px 2px #fff;
border-radius:5px;
padding:2px
}
fiddle here
EDIT: for those not aware of this, you can make gradients with Colorzilla, that's what I used for the gradients in my code
Not sure if that's what you mean, but you can try outset borders, e.g.
border: 2px outset gray;
Instead of gray use the color you want.
Demo
Yes, the "3D"-like effect on the button is due to the use of gradients on the background. Browsers have a default appearance for buttons, and setting the background-color as you did will somehow disable/override the default browser styles, that's why the second button looks bad. To achieve a similar "3D"-like effect on buttons with different colors, you can use the gradients in your stylesheets using the linear-gradient() function for the background-image property:
/* vendor prefixes omitted */
/* will make this button have a reddish gradient as its background */
.coloredbutton {
...
background-image: linear-gradient(top, #c00, #500);
..
}
Check this fiddle for a demo: http://jsfiddle.net/arnellebalane/240f2vmu/2/
This is the top row (banner) on my website:
#toprow {position: static;top:0px}
I have found the following code, which I believe will enable me to grade the color from dark blue to light blue. Despite many attempts, I have yet to find a way to build it into my banner:
#grad
{
background: -webkit-linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* Standard syntax (must be last) */
}
Using this tool, you can easily achieve what you want. This will give you cross browsers solution also. See below for your colour gradation given by colorzilla:
background: #0066ff; /* Old browsers */
background: -moz-linear-gradient(top, #0066ff 0%, #99ccff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0066ff), color- stop(100%,#99ccff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0066ff 0%,#99ccff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0066ff 0%,#99ccff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0066ff 0%,#99ccff 100%); /* IE10+ */
background: linear-gradient(to bottom, #0066ff 0%,#99ccff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0066ff', endColorstr='#99ccff',GradientType=0 ); /* IE6-9 */
Now, if you place this code in #grad it suppose that you have an HTML element having id="grad".
Firefox 26.0 and IE 8 are giving me issues. Works fine in chrome. Been stuck for a long time now, anyone can help me out?
.sectionBoxTitle {
height: 40px;
margin: 0px 0 60px 0;
padding: 0;
color: white;
background: -moz-linear-gradient(100% 100% 90deg, ##0b4bbb, #007fe4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0b4bbb), to(#007fe4))
}
Here is a cross-browser solution that should help you out. I think it covers most scenarios:
.sectionBoxTitle {
height: 40px;
margin: 0 0 60px 0;
padding: 0;
color: white;
/* For Browsers that do not support gradients */
background-color: #0b4bbb;
/* Safari 4+, Chrome 1-9 */
background: -webkit-gradient(linear,0% 0,0% 100%,from(#0b4bbb),to(#007fe4));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background: -webkit-linear-gradient(top,#0b4bbb,#007fe4);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top,#0b4bbb,#007fe4);
/* For IE 6,7,8,9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b4bbb',endColorstr='#007fe4');
/* IE 10+ */
background: -ms-linear-gradient(top,#0b4bbb,#007fe4);
/* Opera 11.10+ */
background: -o-linear-gradient(top,#0b4bbb,#007fe4);
/* CSS 3 Support */
background: linear-gradient(to bottom,#0b4bbb 0,#007fe4 100%);
}
FIDDLE
Documentation: CSS Tricks
What you'll need is the following:
.sectionBoxTitle {
height: 40px;
margin: 0px 0 60px 0;
padding: 0;
color: white;
background: #0B4BBB; /* Old browsers */
background: -moz-linear-gradient(top, #0B4BBB 0%, #007FE4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0B4BBB), color-stop(100%, #007FE4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* IE10+ */
background: linear-gradient(to bottom, #0B4BBB 0%,#007FE4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b4bbb', endColorstr='#007fe4',GradientType=0 ); /* IE6-9 */
}
Demo.
You'll need all these browser-specific prefixes for it to work in every browser. Just specifying -moz- and the old syntax for -webkit- probably used to cover all browsers that would support gradients back in 2010, but nowadays there are more browsers that support it, so more browsers to add prefixes for.
This code was taken directly from http://www.colorzilla.com/gradient-editor/. I only changed the color format from rgba() to #HEX.
I need to put a red badge on top of an image and it must be cross-browser and different Windows versions.
I've added the following CSS classes, tested it on IE7, IE8 (XP) and IE9 (Win7), as well as Chrome and Firefox, and it looked good:
.ie9 .gradient{
filter: none;
}
.badge {
background: #f8b3b7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4YjNiNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzAxMDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f8b3b7 0%, #cc0103 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b3b7), color-stop(100%,#cc0103)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8b3b7 0%,#cc0103 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8b3b7 0%,#cc0103 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8b3b7 0%,#cc0103 100%); /* IE10+ */
background: linear-gradient(top bottom, #f8b3b7 0%,#cc0103 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b3b7', endColorstr='#cc0103',GradientType=0 ); /* IE6-8 */
position: absolute;
top: 0;
left: 15px;
width: 11px;
height: 12px;
border: solid 1px white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
color: white;
}
The HTML contains:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
...
<div id="iconContainer">
<div class="badge gradient">!</div>
</div>
However, I've been reported that on some variations (apparently IE9 on Win7, not sure if 32bit or 64bit) it doesn't work and instead of the red-colored badge, only its white border is seen. The content is transparent instead of red.
Since I'm having trouble reproduce the bug, I was wondering whether it might be related to the specific browser's settings. Could it be? If so - which settings? Or perhaps to the OS version (32/64bit).
Any other suggestion on what's wrong here?
Thanks.
You are using the shorthand 'background' for the gradients, which overwrites the background as a whole and when a browser encounters an invalid parameter, it will render it transparent. You should use background-image instead
You should use this piece of code instead, and edit it to your liking (for IE filters if that's what you want):
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
Taken from css3please.com.
My button is Chrome is appearing like this.
This is what I want.
In Firefox, however, it appears like this.
.mainButton_grey {
border: 1px solid BFBFBF;
background: -webkit-linear-gradient(top,#DBDBDB,#D1D1D1);
padding-top:7px;
text-align:center;
cursor:pointer;
width:200px;
height:22px;
border-radius:3 3;
background-color:#0972BD;
font-size:11px;
font-weight:bold;
font-family:Arial;
color:#404040;
}
Jsfiddle here.
Just a word of advice for gradients - if you want as much browser compatibility as possible, add the following (just change the values).
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(black, white); /* the standard fallback for old browsers */
Syntax explanation here: http://www.impressivewebs.com/css3-linear-gradient-syntax/
And there's an awesome gradient generator here: http://www.colorzilla.com/gradient-editor/
The reason is because you haven't defined the linear gradient with:
-moz-linear-gradient(top, #DBDBDB, #D1D1D1);
The syntax may be a little different; but each browser has a different way to interpret the gradient.
Here is an example of a gradient with each browser:
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
Hopefully that helps.
Three things:
Get your gradient CSS from this site: http://www.colorzilla.com/gradient-editor/
Update your border-radius to specify the units: border-radius: 3px 3px;
Add # to your border-color declaration: border: 1px solid #BFBFBF;