CSS3 gradient displays with different saturation in diffeent browsers. How to fix this problem? Couldn't find anything helpful.
http://d.pr/i/chm1
Here's the code:
html
<div class="button-body">
Купить
</div>
css
.text{
font-family: Calibri;
font-size: 20px;
text-decoration: none;
font-weight: bold;
color: #913944;
margin-top: 7px;
margin-left: 70px;
float: left;
text-align: center;
text-shadow: rgba(255,255,255,0.6) 0px 1px 0.5px;
border-radius: 8px;
}
.button-body{
height:40px;
width:200px;
display:inline-block;
background: -moz-linear-gradient(top, #ff4d55, #cc1d31);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#ff4d55), color-stop(100%,#cc1d31));
background: -o-linear-gradient(top, #ff4d55, #cc1d31);
border-radius: 10px;
border: 2px solid #993f49;
box-shadow: inset 0 1px 1px rgba(255,255,255,1);
}
The problem is the browsers' way of rendering are different. Using image is the best way to make it similar.
Achieving identical presentation across browsers is an enormous challenge at times. From a business perspective, you should ask yourself whether the requirements are that the elements look identical in all browsers or simply look good in all browsers.
Related
I'm trying to make interactive cart buttons using CSS stylings. I want my "add to cart" button to invert colors (black n white only) on hover to enhance user experience.
CSS style:
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
ryanAddButton:hover {
background-color:white;
color:black;
}
HTML snippet of the button:
<p class ="ryanAddButton">Add to Cart</p>
Your original background shorthand uses a gradient which is interpreted as a background-image and so your hover declaration does not override that property.
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
/*
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
*/
background: black;
color: #fff;
font: normal 700 20px/1"Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover {
background-color: white;
color: black;
}
<p class="ryanAddButton">Add to Cart</p>
First of all, there's a slight typo in your CSS.
Solution 1 : (A simple one - a layman's solution) :
Secondly, Paulie_D's answer is correct. However, just as another viewpoint, if you apply the background property, why not change the same property on hover :
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1"Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover {
background:white;
color:black;
border: 1px solid #ccc;
}
<p class="ryanAddButton">Add to Cart</p>
Solution 2 : (A better solution - a designer/programmer's solution) :
Your background property makes use of linear gradient. However, since both the colors are same, the use of linear gradient becomes redundant. Instead, you can get the color by making use of the background-color property. This is beneficial since you wouldn't need to use vendor prefix and at the same time the browser support would be much better on older browsers.
At the same time, it reduces several lines of code by just one :
background-color : black;
Hope this helps!!!
Change the background gradient in the ".ryanAddButton" for black, and you miss the dot for class in "ryanAddButton:hover", should be ".ryanAddButton:hover"
Your background uses a gradient, which overlays the background colour. So even if you change the background colour behind the gradient, you won't see the change. You can override it by setting the entire background property, which will remove the gradient while also setting the background colour.
.ryanAddButton:hover{
background:white; /* overrides all background properties */
color:black;
}
You're also missing a . in your hover selector.
.ryanAddButton{
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover{
background:white;
color:black;
}
<p class ="ryanAddButton"> Add to Cart</p>
I'm creating a toplist of users where I use CSS3 border to create a white-border for the ranking number. Its viewable here: http://www.cphrecmedia.dk/musikdk/stage/channelfans.php
However it seems theres a black border after the border, which I find very very strange. It seems its spill from the background-color.
Its a very minor issue, but I'm very interested in why this actual happens. Does anyone know why? The CSS is very very simple, so it shouldn't happen
To prevent this leak outside border, you need to declare a background-clip property with padding-box. This shall resolve your issue.
The Code change:
#tf span h6 {
background: #333333;
border: 4px solid #F9F9F9;
border-radius: 99px;
color: white;
font: 700 30px/80px arial, sans-serif;
margin-left: -26px;
padding: 5px 13px;
/* The important part to remove the overflow/leak: */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
Hope this helps.
Looks like it is a spill issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=24998
You can add this
box-shadow: 0px 0px 2pt 2pt black;
inside your
#tf span h6 {
}
in .css file
like:
#tf span h6 {
border-radius: 99px;
background: #333333;
color: white;
font: 700 30px/80px arial, sans-serif;
padding: 5px 13px;
border: 4px solid #F9F9F9;
margin-left: -22px;
box-shadow: 0px 0px 2pt 2pt black;
}
it will generate black shadow to your rounded box, so more or less it will become attractive and removes that box kind of issue.
I'm trying to create a button with CSS that will sit on a semi-transparent background that has a beveled or cut edge to it. Here is the Photoshop mockup:
I'm able to do this successfully with a solid color background because I can use an pseudo element with that same background and "cover" the edge of the button, but it doesn't work with a semi-transparent background.
Here's what I've got so far, on a solid background: http://codepen.io/anon/pen/GJFpc
I'm beginning to believe this isn't possible with just CSS, but still hoping S.O. can save me once again!
I love a good css challenge so I tried a few things and this is what I could come up with:
http://jsfiddle.net/QE67v/3/
The css (unprefixed) looks like this:
a.cta {
position: relative;
float: left;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset 0 -2px 1px 2px #fff;
line-height: 16px;
height: 16px;
z-index: 2;
}
a.cta:after {
content: '';
display: block;
position: absolute;
width: 32px;
height: 32px;
right: -16px;
top: 0;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset -3px -2px 1px 2px #fff;
transform: skewX(-45deg);
z-index: -1;
}
There are two main differences with your code:
I use a inset box-shadow to achieve the white 'bevel'. You could
probably do this with gradients as well, but I just find the shadows
more intuitive.
In stead of making the button wider and covering the bottom left
corner with a pseudo element in the color of the background, I kept
the button in its normal width and added a pseudo element to which a
applied the skewX transformation. This allows for any background, as
you can see by the gradient I set as a background in my fiddle.
I believe this is what you where after. Feel free to ask if you need any further help/explanation.
I'm trying to get this to work but there's still something not right.
I want to style the submit buttons with css to match the ones i already have.
<input type="submit" name="save_settings" value="Opslaan">
Style:
input[type="button"], input[type="submit"], button
{
background: url("http://gasterijdebakker.nl/email/php/pages/images/layout/bg-btn-left.png") no-repeat scroll left top transparent;
display: inline-block;
line-height: 35px;
padding:7px 0 15px 12px;
margin:0;
border:0;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 0 1px 1px #70A7E0;
}
jsFiddle
You would be better off not using the background image and using css3 gradient instead. Something like:
input[type="button"], input[type="submit"], button
{
background-color: #a3d4ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a3d4ff), to(#88bcf2));
background-image: -webkit-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: -moz-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: -o-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: linear-gradient(to bottom, #a3d4ff, #88bcf2);
border-radius:3px;
display: inline-block;
line-height: 22px;
padding:7px 12px;
margin:0;
border: 1px solid #88bcf2;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 0 1px 1px #70A7E0;
cursor:pointer;
}
input elements can't be styled completely.
Instead, use a button element.
button elements are much easier to style than input elements. You can add inner HTML content (think em, strong or even img), and make use of :after and :before pseudo-element to achieve complex rendering while input only accept a text value attribute.
source:
Mozilla Developer Network
https://developer.mozilla.org/en-US/docs/HTML/Element/button
I'm having some problems to add opacity to IE 8 (I would also like this to work in IE7 and IE9 but I've just tested it on IE8).
I have my css as this:
label{
color: #333;
text-decoration: none;
border: solid 1px #bebebe;
width: 138px;
padding: 5px;
text-align: center;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #f2f2f2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#bdbdbd');
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#bdbdbd));
background: -moz-linear-gradient(top, #f2f2f2, #bdbdbd);
display: inline-block;
margin-bottom: 10px;
position: relative;
outline: none;
}
So all my labels must be the same in all explorers (This is working with no problem) but I wan to add a opacity to some of these labels. I was using:
.aclass{
opacity:0.4;
filter:alpha(opacity=40);
}
But it is not working on IE. I read some articles here, for example:
Opacity CSS not working in IE8 , opacity in IE8 not working
and others but I haven't found the solution for this. I tried adding this:
.aclass{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
Also adding "zoom:1;" to the previous block or " display: block;" but still not working. I haven't found the solution to this, so if anyone could help me I would really appreciate it.
Thanks in advance!
In your gradient filter, you can define #AARRGGBB whereas the AA == alpha values.
From MSDN. You might have better luck doing this than adding unique filters for gradient and alpha.