figure figcaption {
position:absolute;
top: -65px;
background: rgba(0, 0, 0, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
zoom: 1;
width: 195px;
height: 65px;
}
for some reason the background is not appearing on IE 8. Rest of the browsers are working fine.
Initial Considerations:
http://css-tricks.com/snippets/css/cross-browser-opacity/
-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
References:
Opacity CSS not working in IE8
Internet Explorer Dev Center
http://social.msdn.microsoft.com/Forums/ie/en-US/616b7ee2-fdd3-48d9-9485-28608517afc1/ie-8-progiddximagetransformmicrosoftalphaopacity90-with-rollovers-does-not-work?forum=iewebdevelopment
http://msdn.microsoft.com/en-us/library/ms532967(v=vs.85).aspx
Alternative Considerations:
You might want to try and experiment with the online ColorZilla app. I've found it to be incredibly helpful when trying to deal with browser versions and compatibility issues regarding not just gradients but backgrounds and their sometimes hard to remember properties.
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-8 */
All Code Taken From ColorZilla: http://www.colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0.7+100;Custom
Related
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 want touchscreen buttons that stay depressed while the page is active rather than revert to normal state.
Is there a simple solution to this?
Ie, you're on the main page, there are three buttons, you press a button, it takes you to the new page and shades a different color.
The code I'm working with looks like this:
HTML:
<input type="button" value="Name" class="Class" onclick="location.href='#';">
CSS:
.class {display:inline;border:solid #000 3px;margin-left:auto;margin-right:auto;padding:10px;font-family: 'helvetica neue', helvetica, arial;font-size:16px;font-weight:600;
color:#fff; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em;
background: #aaa; /* Old browsers */
background: -moz-linear-gradient(top, #636363 0%, #ffffff 4%, #000000 75%, #ffff00 97%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#636363), color-stop(4%,#ffffff), color-stop(75%,#000000), color-stop(97%,#ffff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* IE10+ */
background: linear-gradient(to bottom, #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636363', endColorstr='#ffff00',GradientType=0 ); /* IE6-9 */
}
.class:active {background: #bababa; /* Old browsers */
background: -moz-linear-gradient(top, #bababa 1%, #636363 69%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#bababa), color-stop(69%,#636363), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bababa 1%,#636363 69%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bababa 1%,#636363 69%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bababa 1%,#636363 69%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #bababa 1%,#636363 69%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
What i would do is assign some sort off 'active' class to the link (eather on the server side, of by using some javascript), and give it the same styling as your hover state. Something like this:
#menu a:hover, #menu a.active {
background: #[PressedStateColor];
}
You could add the 'active' class with some easy javascript (jQuery) like this:
// when the dom is ready
$(document).ready(function() {
// for each of the links in the #menu
$('#menu a').each(function() {
// if the href of the link matches the one for the current page
if ($(this).attr('href') == window.location.href) {
// add the class 'active' to the link
$(this).addClass('active');
}
});
});
Note that this is not foolproof, it will only work on simple url's. Personally I would go for a server side solution.
To demonstrate, I set up a little fiddle: http://jsfiddle.net/RyHse/
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;
I added a gradient background for my .html page. Seems to work in most browsers but I would like to know if it is standard and complies to all rules.
.css
html {
/* fallback */
background-color: #65a5d1;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#65a5d1));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #fff, #65a5d1);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #fff, #65a5d1);
/* IE 10 */
background: -ms-linear-gradient(top, #fff, #65a5d1);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #fff, #65a5d1);
height: 900px;
}
If you want to generate gradients that are fully compatible you can check the Ultimate CSS Gradient Generator:
Here's the output it generates:
/* Old browsers */
background: #1e5799;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMjA3Y2NhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
/* FF3.6+ */
background: -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* Chrome, Safari4+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE10+ */
background: -ms-linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* W3C */
background: linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE6-8 fallback on horizontal gradient */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
As you see it generates bit more properties to cover even more cases.
If you want support for IE 9 you'll have to follow this... yeah I know it sucks, but...
Support for full multi-stop gradients with IE9 (using SVG):
Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->