I have this sample: http://jsfiddle.net/funguy/jKfeQ/
Dont be confused, its something here, but slighly visible. I want to apply the opacity only to the .postmorewrapper1, but not to the .read-more1 .
Any advices on how I can reach this? Thanks!
You can't, you'll need to make them siblings and position them to emulate parent/child.
As said by AlienWebguy, you can't do it with a CSS property like Opacity without affecting the children.
If you really need to change the opacity of a parent without affecting it's children, the best cheat would be to swap the background-image of the parent to a png transparent, this way the children won't be affected and the opacity of the parent would seem changed.
The problem is that the opacity property applies to all child elements. An alternative would be to instead use rgba when specifying the background colour to .postmorewrapper1, as opposed to a hex value. So instead of this:
background: #FCFCFC;
opacity: 0.4;
Try this:
background: rgba(252, 252, 252, 0.4)
One thing to bear in mind with this technique though is that IE versions 8 and below don't support rgba (it was added in v9). There are a couple of options to get around this:
Use an IE filter (which can have an impact on performance if overused)
Use a semi-transparent PNG image for IE versions 8 and under (which is less maintainable)
The CSS for option 1 would be:
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC); /* IE6 & 7 */
zoom: 1;
You'd put that in your IE stylesheet if you have one.
Related
I'm wondering what happens if a CSS style is supplied for a property which the browser supports, but the style itself isn't supported.
Take for example the following in IE8;
background: url(../path/to/img.png);
background: rgba(0,0,0,0.8);
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
Thanks :).
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
The answer is YES, it will completely ignore that value, and hence it won't render any color, it's a common practice to use a fall back with a hex value like
.class_name {
background: #000;
background: rgba(0,0,0,.5);
}
So, when you write the background twice, it's completely valid, the browsers who understand the rgba() will render an opaque background, but the browsers who don't understand rgba() will use #000.
Though, there are various workarounds for that, like, you can use :before or :after, with filter property with a negative z-index, which can be used as an opaque background, or you can do is, use a normal 1x1 px opaque png image only for IE8.
For example
background: url("IMAGE_URL_HERE")\9; /* Targets IE8 and below */
I just took a look on CSS background-clip. Its a way to mask text with an image. (or the other way round? ^^). Anyway, i thought the order of statements in CSS doesn't effect the result, but with background clip it does.
The CSS for this effect looks like this usually:
.text{
color: transparent;
background: url(pic.ending);
-webkit-background-clip: text;
}
So, this is the first <p> in the fiddle below.
But when I change the order of this to following:
.text_wrong{
-webkit-background-clip: text;
color: transparent;
background: url(pic.ending);
}
It doesn't work. The text isn't masked, the background takes place in the hole <p>. So the error occurs when background clip is before background, right?
Why? Do you have any idea? Sorry for my bad English. (Heres the fiddle.)
background is the shorthand notation for the background properties. This will overwrite all other background rules made earlier. Even though -webkit-background-clip has a vendor prefix it is still a background property. In your second example it gets overwritten when you set the background properties with the shorthand notation.
To make your example work you can use background-image instead of background.
Example
/* sets a single property */
background-color: red;
/* overwrites all single properties */
background: no-repeat;
Demo
Try before buy
This is called Cascading and the ulimate goal of CSS is to represent those items that are declared last in the cascade.
For instance, lets assume the below to be your CSS declaration in stylesheets.
div{height:15px;}
div{height:30px;}
div{height:20px;}
So the div will take the height to be 20px as this is the last declared rule and it will override all the other rules declared earlier.
Hope this solves your query.
According to the w3c specs the value text for background-clip is not a listed value in the specs. Therefor support might be buggy!
http://www.w3.org/TR/css3-background/#background-clip
Determines the background painting area, which determines the area
within which the background is painted. The syntax of the property is
given with
= border-box | padding-box | content-box
I saw that button on this side(http://letsgo.gorizia.it/) and was wondering how to implement such a style?
Is there a useful tutorial or can you give me a hint which css I should use?
I think you could take a look at this post on StackOverflow:
You should use rgba for it like stated in the post
.alpha60 {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
And this website:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
That should give you the effects you want.
You probably still need to look for the rounding of corners but with css3 nowadays that shouldn't be that though to find.
Also W3schools have a page about it. I know it ain't the most reliable site but it can be handy for some small tips or tricks that you can't find that easily.
using RGBA for the background colour should do the trick:
.ui-btn { background-color: rgba(0,0,0,.25); }
Something like that should work but you'll want to play with the colour (first three values) and the opacity itself (last value)
I couldn't get the alpha60 class to have any effect when I added it as a class to buttons or anchor tags with data-role = button assigned. The JQM framework overrides that css, I guess (but I don't know that... if someone does, it would be interesting to learn).
What worked for me was ui-btn-up-a (or b or c or whatever your css theme is) like this (for a blue button with data-theme='b')
.ui-btn-up-b {
background: rgba(0, 0, 255, 0.2); /* set the alpha to taste...*/
}
What was especially nice, I thought, was that the buttons become opaque on hover and keep their click (button down) properties, so the user really knows they're interacting with the button, but otherwise they can read whatever content is behind the button.
Of course, all the cautions about browsers that don't do rgba still apply, so you should make it robust with fallback css if your user base includes older browsers.
Add an anchor tag to your code and set it's HREF to whatever you want. Then go to Photoshop and generate an image for that button.
If you tried to do this in CSS, and set the opacity of the container holding the Anchor, the opacity would filter down to the text of the anchor as well. No good so...
Your final anchor tag should look something like:
<img src="myButton.png" />
(Be sure your image is a .PNG because .JPEG does not support transparency)
I am making a website that uses nothing but jquery-ui for theming.
Well, in my application I need to do alternating colors per row on a list. Right now all of the rows are just the color of .ui-widget-content. Well, I can apply a class on alternating rows with no problem, but I want for the alternating color to be a very transparent version of the background color in .ui-widget-header. How would I do this using nothing but html jquery and CSS? (I'm really hoping to not have to use javascript in order to do this little trick though)
The easiest way to do this is to create a small flat image in Photoshop, Fireworks,GIMP,Kreta etc. and set the color / opacity there. The above solutions will allow for transparency but they are
1) Not standards-compliant and
2) They May cause the text contained in the div to also be transparent (usually an undesirable result in design).
So...
.ui-widget-content-alt {
background: transparent url(images/my_80%transparent_black_bg.png) top left repeat;
}
.ui-widget-content {
background: transparent url(images/my_80%transparent_white_bg.png) top left repeat;
}
Assuming that I didn't misunderstand your question, and that you can use a separate CSS class for alternate rows like .ui-widget-content-alt, you may want to use the following CSS:
.ui-widget-content, .ui-widget-content-alt {
background-color: #000;
}
.ui-widget-content-alt {
filter: alpha(opacity=20);
opacity: 0.2;
}
The opacity property is the CSS standard for opacity values, and works in Firefox, Safari, Chrome and Opera.
The filter property is for IE.
You may want to check the following article for compatibility of the opacity property with older browsers:
CSS Tricks - CSS Transparency Settings for All Browsers
There is no standard way of doing it.
You can use css opacity and fiter to achieve it.
Something like the following would give you 80% black transparent color
.someClass { background-color:#000; -moz-opacity: 0.8; opacity:.80;filter: alpha(opacity=80);}
Using this will cause your CSS to fail compliance checks.
I have a problem in IE with PNG8 images in that it appears with a big dirty black border in the shadowing of my *.png. (IE7, IE8)
I am using alphatransparency and basically have shading under my small image. All browsers render this fine, except IE which renders the shading as a black circle?
I need the image "transparent" because it appears on top of a variety of multicolored backgrounds, etc?
Any ideas?
I am compelled to respond. I just solved this issue as well. Just to recap, in IE7 and IE 8, transparent PNG and GIF images in links sometimes have a black border or shadow around them.
You need to check to make sure there is no opacity filters on these images. I have opacity on 100. I changed this to
filter:0;
Remember also for blurry link text, you need to specify a background color for the link or else it will be fuzzy and blurry.
Death to IE!!
I'd like to say thanks for the answer, and to add something.
In my specific instance, I needed to override a style that was:
filter: alpha(opacity=50);
Adding the below code made my opacity correct, but added the issue of the black edges:
filter: alpha(opacity=100);
This is the line that saved me by fixing the issue:
filter: 0;
I hope this helps someone else too!
OK - solved the problem. It seemed that my JS was assigning
filter: alpha(opacity=100);
to the image and this is what was causing the black mark to appear as I had already made the image alphatransparent in the PNG8 encoding.
I have suffered from similar issues with opacity in ie7, ie8 what you can do is give your png image a background color which will remove the ugly borders from the image....It works for me
This worked for me with animated opacities:
img{
background: transparent;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}
After searching for alternative solutions, I returned to the source images for answers.
It seems that 24bit .png-files cause problems, but 8bit versions behave well. I haven't researched this in depth.
These settings in Photoshop's Save for Web & Devices -dialog helped me get rid of the black strokes in opacity animations:
PNG-8, Selective, Diffusion, Transparency, Colors: 256, Matte: None, No transparency Dither, Interlaced and Convert to sRGB with "Internet Standard RGB".
You can do it in CSS buy using IE's proprietary filtering system.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
DEMO
you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.
You may also need to play with the sizingMethod in the filter to get it to work the way you want.
I had the same thing happen to a PNG with transparency that was set as the background-image of an <A> element with opacity applied.
The fix was to set the background-color of the <A> element.
So, the following:
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
Turns into:
/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;