I'm using a CSS3 gradient like so:
background-image: linear-gradient(to bottom, transparent, #03143f);
The issue I'm having is that safari is adding a black tinge to the gradient where as Chrome is fading nicely.
Has anyone experienced this issue before?
JSFIDDLE
Safari
Chrome
Related
I have a div with text and background which after scrolling down is going over the home slider.I want to have some transparency. Everything is ok in Firefox where that layer is transparent with some opacity set. But in chrome and opera it is solid and slider is not visible under. I use:
background:rgba(255,255,255,0.5);
i event tried to use transparent PNG but it also is solid.Problem preview
How can i make a background transparent in Chrome and Opera?
I know it is an old question but searching for the same problem this poped up on top for me.
So I had the same problem - working perfectly in Firefox but on Chrome no opaciy at all.
What I did and its working perfectly (at least for now) it to change from RGBA colors to HSLA colors.
In my case changed the following :
background-color: rgba(0, 0, 0, 0.75);
to
background-color: hsla(0, 0%, 0%, 0.75);
I have no idea why chrome prefers the HSL colors and opacity.
Also a good point to consider, HSL colors are supported in newer browser versions.
I have this style in CSS for a DIV:
background: repeating-linear-gradient(-55deg, #F00, #F00 10px, #F00 10px, #FFF 11px) repeat scroll 0% 0% transparent
The problem is that the style only works with mozilla and IE , and I need to work with safari, opera and chrome .
From Mozilla Developer Network
Gecko, Opera & Webkit considers to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.
I'm working in WP7 where my application is based in HTML5 and I'm exporting the app through PhoneGap framework.
I want to know if is possible and how to generate a CSS3 gradient for this project (and in the process, I want to share you what I've discovered).
At the moment this is my CSS3 code:
body {
background: brown;
background-image: url(blue_to_white.jpg);
background: linear-gradient(blue, red); /*future CSS3 browsers*/
background: -webkit-linear-gradient(blue, orange); /*new webkit*/
background-image: -ms-linear-gradient(bottom, blue 50%, green 50%); /* IE10 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='purple'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='yellow')"; /* IE8 */
-pie-background: linear-gradient(blue, silver); /*PIE*/
behavior: url(PIE.htc);
}
As you can see, my code is using different techniques for the background:
A brown like color base
An image like gradient of blue to white
A normal CSS3 gradient of blue to red
A CSS3 gradient for webkit browsers of blue to orange
A CSS3 gradient for Microsoft browsers of blue to green
A DXImageTransform for IE6 & IE7 of blue to purple
A DXImageTransform for IE8 of blue to yellow
A pie-background using CSS3PIE of blue to silver
And this is my results:
As you may know, the browser for WinPhone 7.5 is IE9 Mobile, and the browser for WinPhone 7.0 is a mix between IE7 & IE8. Here into slide 16, 17 and 18 explains which CCS3 properties are implemented in IE9, IE10 and "IE9 Mobile": http://goo.gl/1Wz3s
So, Any idea of how to generate a CSS3 gradient in Windows Phone?
or I have no choice and I must implement an image to create this gradient?
Just wanted to show the correct syntax for CSS3 Gradients in IE10+
background: -ms-linear-gradient(
bottom,
#432100 30%,
#00AAAA 70%);
In the google code link posted by JC Del Valle, he is using a backgroung-image definition, which is not correct.
[stack overflow prevented me from inserting image]
In the screen capure at twitter link (#palermo4), I tested your styles as-is. It appears to be working. Something else is in conflict with your CSS3 stuff.
I tried to follow the advices in CSS: semi-transparent background, but not text. I'm happy of the results in Firefox, Safari, Opera and Chrome. With these browsers I obtain a result similar to the one below, where you can see the background in transparency under the header. However, I've problems with IE.
You should click here to see the jsfiddle.
In IE8 is OK, but in IE6/7 there is no colored band at all. Anyone knows how to fix it?
In div.header:
Remove:
background-color: #0a5787;
background: transparent;
Add:
background: none;
zoom: 1;
Change:
/* For IE 5.5-7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#900a5787, endColorstr=#900a5787);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#900a5787, endColorstr=#900a5787)";
This works on IE7 when I test it and in theory I'm sure it should work in IE6, but on my emulator it is not working.
JSFiddle: http://jsfiddle.net/3jEbC/
When I mouse over a table row in a certain part of my table, I'd like the background to change to a linear gradient. The CSS is straightforward:
tbody.row-links tr:hover {
background: ...typical multi-browser linear gradient code...
color: #333C3E;
cursor: pointer;
}
Works great in FF, Chrome, and Safari but not in any version of IE. I know the CSS is resolving because the color and cursor change. I tried placing the filter on the plain <tr> tag itself and still nothing. Does IE just ignore filter on table rows?
The best thing I can come up with is to apply the gradient to the <td>s of the row when the row is hovered, but that causes a lovely flickering while mousing about the row.
For now I'll just give IE a solid color background on hover. Has anyone else tried this and figured it out?
You can use something like:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
for IE9
OR
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
for IE10
older IE only with images.