I got from web designer layout, which contains (probe):
<div id="subMenuRow">
<div id="subMenuRowHTML">
Link
</div>
</div>
and respectively css for it:
#subMenuRow{
width: 900px;
height: 40px;
background: #000000;
float: left;
clear: both;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Opacity is used to make transparent bar for html menu. The problem is, that every text including links contains transparency as well, which is very unnecessary. How to avoid opacity for subMenuRowHTML?
First you don't need to use -moz-opacity and -khtml-opacity anymore. They are very very old.
There is no solution fully supported today. CSS3 RGBA solves this in modern browsers but if you need to support old browsers you will need to use semi transparent png:
#subMenuRow { background: url(semi-trans.png); }
IE6 will degrade gracefully with this:
* html #subMenuRow { background: url(full-opacity.gif); }
There are also easy options for png transparency on IE6. It's up to you.
If you have many instances of opacity on your code and don't want to mess up your code with * html everywhere you can use conditional comments.
use a semi transparent .png as a background image:
css:
background: transparent url(/url/image.png) top left repeat;
Add:
#subMenuRowHTML {
filter:none;
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
Related
Loader has a strange blurry patchy color. Original loader doesn't look like the one attached. Please see attachment and the below code. [![enter image description here][1]][1]
#acp-overlay
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: black;
-moz-opacity: 0.3;
opacity:.3;
filter: alpha(opacity=30);
z-index: 10000;
}
#ajaxcartpro-progress{
border: none;
position: fixed;
text-align: center;
padding: 0px;
background-color: transparent;
z-index: 999999;
color: black;
max-width: 200px;
/*position:absolute;*/
/*top: expression(parseInt(document.documentElement.scrollTop, 10) +window.ACPTop+ "px");*/
}
Instead of using a GIF image to create the animation, have a look at CSS3 keyframe animations and use a PNG sprite.
EDIT: I think the Walsh's article describes it quite easily.
To start with, of course you need a container like <div class="loading"></div>
Then, using CSS, you set its background-image to a sprite containing the animation in steps. Basically, what occurs here, is that you show only a part of the background each refresh and thus create the animation. The browser does nothing but pushes the background-position (or other attributes too) with time like this:
#keyframes loadinganim {
0% {background-position: -6864px 0; } # starting position depending on the sprite image
100% {background-position: 0 0;} # where should the animation end
}
.loading {
background-image: url(images/loadingSprite.png); # path to the sprite
animation: loadinganim 3.75s steps(44) infinite; # what's the animation called, how often it should refresh, how many steps, and for how long it should last
# ... other attributes
}
This isn't supported by older browsers, however, so you need to provide a fallback (like a GIF image with a background). You might also need to prefix animation attribute to make it work in browsers like Safari:
.loading {
animation: # ...
-webkit-animation: # ..
# ... other attributes
}
I'm guessing it's a GIF image. GIF images don't support alpha transparency, so it's antialiased against a white background. But you're overlaying it on top of a background that isn't white, so you see the gray pixels that are supposed to blend in with the white.
The frosted glass effect (where an overlay both blurs and tints what is below it) is a common UI element in iOS.
Is there currently anyway to implement that with CSS? There are a lot of questions pertaining to this, but they are limited in what they can do. They typically are limited to putting an overlay over an image--rather than a completely rendered UI.
So, to be clear, I'm not looking for a way to blur an image by itself, but a way to blur the UI below an element. So say I have an HTML form with HTML buttons and HTML text, and I want to place a div above them all so that whatever is below looks blurred. And then I can perhaps scroll what is below and as elements come in and out of the overlay, they are blurred only while under the div.
My understanding is that the answer to this is no, this is not currently possible with CSS but I'm also a bit rusty on the new bells and whistles...
What you are looking for is backdrop-filter, which has been in webkit since August 2015 (see post). It was shipped in Safari 9 (September 30, 2015, part of OS X El Capitan) and works in Chrome today by enabling the Experimental Web Platform features [...] flag.
With backdrop-filter, getting the 'live blur' is as easy as adding backdrop-filter: blur(10px) to a given element.
Demo here.
It's probably going to be a while until it becomes mainstream though, but it's going to enable us to do so much more than the frosted glass effect (i.e. night mode, read more here).
The good news is that tons of people are excited about it, so let's hope we don't have to wait long. If curios, here's the spec for it.
If you want to track progress on this feature, check out:
Mozilla bug
Chrome bug & Chrome status
Microsoft bug
As far as I know, this is achievable only in Firefox.
The key is background-image: element. One of the properties that would prove most useful , in my opinion, of the ones in the "may be some day" list
Demo working only in FF .. Notice that frost is not a child or a parent of test
img {
margin-top: 5px;
margin-left: 40px;
animation: move 1s infinite;
}
#frost {
border: solid 1px blue;
width: 250px;
height: 250px;
position: absolute;
left: 50px;
top: 120px;
background-color: white;
background-image: linear-gradient(rgba(0,0,100,0.2), rgba(0,0,100,0.2)), -moz-element(#test);
background-position: -45px -112px;
background-repeat: repeat, no-repeat;
filter: blur(4px);
opacity: 1;
}
button:hover {
background-color: red;
}
#keyframes move {
from {transform: translate(0px);}
to {transform: translate(40px);}
}
<div id="test">
<button>BUTTON</button>
<img src="http://placekitten.com/1000/750" width="300px" height="300px"/>
</div>
<div id="frost"></div>
I have created a menu block element which I have applied an opacity of 0.4/40 to.
The problem I have is that the opacity affects the text within the menu block and I am looking to have the opacity ONLY applied to the menu block, but not the text.
Hopefully I have just missed something silly. Here is my code:
#menuLeft{
background-color: #33AAEE;
float: left;
width: 20%;
clear: both;
opacity:0.4;
filter: alpha(opacity = 40);
}
I am looking for a way to keep the text colour the same/set the opacity to exclude the text.
Thank you.
This is a very, very, very popular problem. Try using rgba():
//Your opacity is the latest value here for Firefox 3+, Safari 3+, Opera 10.10+
background-color: rgba(51, 170, 238, 0.6);
//Your opacity is the first pair here (in HEX!) for IE6+
progid:DXImageTransform.Microsoft.gradient(startColorstr=#9A33AAEE,endColorstr=#9A33AAEE);
zoom: 1;
float: left;
width: 20%;
clear: both;
/*opacity:0.4;
filter: alpha(opacity = 40);*/
You also can use http://css3please.com/ to easily convert from HEX to RGB and back.
You could also put a transparent picture as the background.
The text should display normally.
http://css-tricks.com/snippets/css/transparent-background-images/
In my CSS I have the following:
.Thing {
filter: alpha(opacity=40);
opacity:0.4;
-moz-opacity:0.4;
}
.Thing button {
filter: alpha(opacity=100);
opacity:1;
-moz-opacity:1.0;
}
However, the button is still .4 opacity. I then try opacity: 2 and such and it looks like I can give it less opacity but not more. Is there a way I can remove it or do I have to write multiple rules to get everything but the button?
I am testing with Firefox and Chrome.
use rgba with a rgb fallback.
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.5); /*ie6 will ignore this*/
rgba will only apply opacity to the target element.
What i've recently been doing is using the rgbapng sass/compass plugin which generates a png image to use as a fallback for browsers without rgba support.
Note: you'll still need to use an ie6 png fix for this to work.
Not a fix for the opacity issue but a possible workaround.
How about removing the button from the normal document flow and then placing back inside the .Thing
Something like this: http://jsfiddle.net/CqgkM/
I'm trying to incorporate thickbox on my site. Basically, it's just a fancy javascript alert with a lot more functionality. However, when you the thickbox appears it darkens the rest of the screen. Id rather not have this. I have searched the CSS file extensively and cannot find how to change the opacity/background color. Any help would be appreciated.
link to CSS file:
http://jquery.com/demo/thickbox/thickbox-code/thickbox.css
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
The "darkening of the screen" is caused by a black overlay with 75% opacity.
Change background-color to transparent if you do not want this.
It's this:
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
You can just empty the content or remove it altogether and problem is fixed!
#riku; you can use rgba for transparent color, like this
css:
.TB_overlayBG {
background: rgba(0,0,0,0.7)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
}
Because rgba is not transparent it's content as opacity does
For more check THIS