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.
Related
I need to create a button like the one below, but it's proving exceedingly difficult to get that border effect without the use of images:
.
Specifically, the border effects I've seen never have a bevel effect - it's almost as though I need two borders. The colors, shape, and other aspects of the button are not the problem here.
Here's what I have so far, which is pretty close:
button {
border: 1px solid gray;
border-radius: 4px;
text-align: center;
display: inline-block;
padding: 5px 10px;
background: linear-gradient(to bottom, #f9fcff 0%,#93a0c6 100%);
}
<button>OK</button>
You can achieve this effect with one element, using a background: linear-gradient, double border and border-radius.
To apply the background even to the transparent middle part of the border, increase the size of the background (i.e. 140%) and adjust its position.
button {
background: linear-gradient(to bottom, #fff 0%, #8ab 100%);
background-size: 140%;
background-position: 0 50%;
border: 4px double #23538a;
border-radius: 6px;
padding: 5px 8px;
color: #23538a;
}
<button>OK</button>
This will get you close. Use a combination of box-shadow, padding, and 'border-radius`:
.btn-container {
display:inline-block;
border: solid 1px #224488;
border-radius: 4px;
padding: 2px;
background:#acd;
box-shadow:0px 4px 6px #cde inset;
}
.btn {
display:inline-block;
border: solid 1px #224488;
border-radius: 4px;
padding: 2px;
background:#acd;
box-shadow:0px 5px 10px #e0f0ff inset;
}
<div>
<span class='btn-container'>
<span class='btn'>Click here!</span>
</span>
</div>
Fiddle: https://jsfiddle.net/oqqpccmf/
i'm just trying styling the select box both for webkit and moz browsers , on webkit it looks great but in Firefox it looks so bad, the default option is not vertical aligned with the select box.
Can you help me out finding whats wrong with this code please:
CSS:
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}select option,select option:hover{
padding:5px;
}
HTML
<select>
<option>hey</option>
<option>hey2</option>
<option>hey3</option>
</select>
Here a fiddle so you can see how it looks on Firefox and then in Chrome :/ unbelievable!!
http://jsfiddle.net/wL8Rs/
I'm using Chrome latest 34.0 version and Firefox latest 29.0 version
Add padding to select
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
padding:5px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}
http://jsfiddle.net/wL8Rs/3/
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.
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.
I have the following CSS:
box-shadow: inset 0px 0px 2px #a00;
Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites the original rule.
There doesn't seem to be a box-shadow-color, at least Google turns nothing up.
Actually… there is! Sort of. box-shadow defaults to color, just like border does.
According to http://dev.w3.org/.../#the-box-shadow
The color is the color of the shadow. If the color is absent, the used
color is taken from the ‘color’ property.
In practice, you have to change the color property and leave box-shadow without a color:
box-shadow: 1px 2px 3px;
color: #a00;
Support
Safari 6+
Chrome 20+ (at least)
Firefox 13+ (at least)
IE9+ (IE8 doesn't support box-shadow at all)
Demo
div {
box-shadow: 0 0 50px;
transition: 0.3s color;
}
.green {
color: green;
}
.red {
color: red;
}
div:hover {
color: yellow;
}
/*demo style*/
body {
text-align: center;
}
div {
display: inline-block;
background: white;
height: 100px;
width: 100px;
margin: 30px;
border-radius: 50%;
}
<div class="green"></div>
<div class="red"></div>
The bug mentioned in the comment below has since been fixed :)
No:
http://www.w3.org/TR/css3-background/#the-box-shadow
You can verify this in Chrome and Firefox by checking the list of computed styles. Other properties that have shorthand methods (like border-radius) have their variations defined in the spec.
As with most missing "long-hand" CSS properties, CSS variables can solve this problem:
#el {
--box-shadow-color: palegoldenrod;
box-shadow: 1px 2px 3px var(--box-shadow-color);
}
#el:hover {
--box-shadow-color: goldenrod;
}
You can do this with CSS Variable
.box-shadow {
--box-shadow-color: #000; /* Declaring the variable */
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */
}
.box-shadow:hover {
--box-shadow-color: #ff0000; /* Changing the value of the variable */
}
You could use a CSS pre-processor to do your skinning. With Sass you can do something similar to this:
_theme1.scss:
$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.
_theme2.scss:
$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.
styles.scss:
// import whichever theme you want to use
#import 'theme2';
-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;
If it's not site wide theming but class based theming you need, then you can do this: http://codepen.io/jjenzz/pen/EaAzo
A quick and copy/paste you can use for Chrome and Firefox would be: (change the stuff after the # to change the color)
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;
Matt Roberts' answer is correct for webkit browsers (safari, chrome, etc), but I thought someone out there might want a quick answer rather than be told to learn to program to make some shadows.