How does twitter implement this kind of transparency ?
I tried adding opacity to my code but every children element is being affected. what I aim is somewhat like in the image above. how would I do that? is opacity the right css rule for that?
Try using RGBa instead of opacity to achieve this effect. The opacity property forces all child elements to also become transparent, and there are not many simple ways to work around that. RGBa makes the element transparent but all the child elements remain unchanged.
Example:
div {
background: rgba(10, 10, 10, 0.5);
}
The first three numbers in RGBa represent the color in RGB values; the fourth represents a transparency, and should be between 0.0 and 1.0 (similar to the opacity property).
JS Fiddle Example
RGB Color Chart
background-color: rgba(255,255,255,.5);
http://www.css3.info/preview/rgba/
CSS opacity will always work that way. You can always use semi-transparent png as a background.
Related
Is it possible to keep the background dark while adding opacity? I'm trying to create an input that looks like the image added. Every time I set the background to #000 and add opacity, the background starts to turn gray instead of staying black and becoming transparent.
Edit:
For everyone telling me to use:
background: rgba(0,0,0, 0.5);
This is the result (doesn't work)
Edit 2:
Here is a fiddle - http://jsfiddle.net/n7aob2yd/1/
The last value 0.5 is the alpha channel.
.selector {
background-color: rgba(0, 0, 0, 0.5);
}
What you're doing is correct. You see gray because the background is white. Try using a background like the one in your screenshot and you'll see that it works. And don't use opacity because it will apply it to everything, including the text. Now, try using a background color that matches the background image, in this case, a dark blue. Maybe that's what's missing.
div { background-color: rgb(255,0,0); opacity: 1; }
div { background-color: rgba(255,0,0,1); }
What is the difference between the above two?
Opacity sets the opacity value for an element and all of its children;
While RGBA sets the opacity value only for a single declaration.
This is well explained here. http://www.css3.info/introduction-opacity-rgba/
Opacity : The opacity property sets the opacity level for an element.(Setting opacity for an elements makes the whole element transparent including its content.)
Defining opacity:
element{opacity:0.5} //makes the element and it's content 50% transparent
The opacity-level describes the transparency-level, where 1 is not
transparant at all, 0.5 is 50% see-through, and 0 is completely
transparent.
Alpha Channel RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.
Background : rgba (Red,Green,Blue,Opacity) (Setting rgba of an element only makes the element background transparent leaving its content as it is.)
Defining Background rgba: background:
element{
background:rgba(40, 41, 42, 0.5);
}
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
To convert a hex value of color to rgb: Here
Further Info:
RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
when you use alpha, you are only setting opacity for that specific property of the div. So only the background will be slightly transparent if you set the alpha value to say .5
However, when you set opacity to .5, the ENTIRE div and everything inside it will stay slightly transparent, no matter what alpha values elements within the div have.
Within a div with opacity set to .5, an element will be at max ".5" opaque (when its alpha value is set to 1). If its alpha value is set to .5, the transparent affect will compound and it will actually be something like ".25" transparent. Not sure about the specific numbers.
Most answers are good. Let me add a bit:
Alpha channel : specified as a value of a CSS attribute. Like as in a part of RGB color. Many a times used with background-color CSS attribute.
Opacity : a CSS attribute of an element. Impacts the entire element, and it's contents.
This example from MDN (among the reliable sources for web dev) here beautifully explains this and makes this really clear.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Make_box_transparent
I have a div element to which I set opacity: 0.7; in the CSS file because I would like the text inside it to be opaque. I display some images inside this div, but the images appear with the inherited opacity property. The result are opaque images.
Is it possible to give a CSS property to the images not to inherit the opacity of the div that contains them? If not, how can I avoid having the images opaque?
Thanks.
If you're using opacity to allow the text to have partial transparency, then simply set the color of the element:
#elemId {
color: rgba(0,0,0,0.7);
}
This lets you avoid adjusting the opacity property, and should work in all browsers that support the opacity property, too.
Only way is with positioning. Here is a great article from CSS Tricks: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
Use position: relative; and a top value to make elements over one another.
If you are just trying to make a background transparent then you can use the rgba() value in your background.
Edit:
Here is a crazy idea. You could use PHP GD to render a image with a gray backround(making transparent) with white text that you want to display in the correct position. Then use a mask-box-image or mask-image CSS property and set it to the rendered image.
If of course your content is not dynamic then you could make the image in Photoshop/whatever program.
Anti-aliasing would not be the same from the browser to the GD render but is the best hack if you do not want to use positioning.
Add the following code in your css
z-index:111
it works.
I wish to create breadcrumbs that employ css arrows, and want to apply a gradient on the background, but have been unable to set a gradient for the css triangles themselves.
I'm wondering if I can set an opacity on the triangles , and then lay them over top of a div with the desired background gradient. This also has to be compatible down to IE7. So far no luck. Does anyone have any suggestions?
Use PNG image for the arrow. Arrow image must have transparent background.
The best way to achieve what your looking for would be to use an image. IE7 I don't think supports opacity without some javascript manipulation. Use a gif or another type of image with transparent background.
This is how you set opacity or <=IE8
.triangle {
filter: Alpha(Opacity=80); // ie argh!
opacity: 0.8; // standard browsers
}
I have a div with 60% opacity, to show part of a background image behind the div. Because the opacity is at 60%, the text in that div appears as grey.
Is there anyway to override this level and make the text appear black?
Any advice appreciated.
Thanks.
Set the opacity on the background rather than the element.
background-color: rgba(255,0,0,0.6);
A while ago I wrote about how to achieve this in a backwards compatible way.
I've experimented with this in the past on my own website. By far the easiest method to achieve what you want is to create a single-pixel .PNG image with its opacity set to less than 100% (i.e., partly-transparent) and use it as a background image. By default it will fill the whole containing element - make sure that the CSS background-repeat attribute is set to 'repeat' if it doesn't.
Doing things this way you don't have to set transparency on the containing element itself, hence the opacity of its text will be unaffected.
Amazingly, there is just the tool for making a semi-transparent single-pixel .PNG here.
The opacity applies to the whole div and all of its children. Unfortunately, you cannot undo that opacity, but only add more. And besides that, there's no way for CSS to select the text inside an element.
In your case, the best solution is to apply a transparent background image (with PNG) to your div block, like a white one pixel image with 60% opacity.
Another solution would be to use different boxes and positioning, like described in this tutorial by Steven York.
this should answer just about all of your questions: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
The simplest solution would be to create a semi-transparent PNG with the correct colour and use that as a background image.
Another solution that may be possible depending on your layout is to put the text in a separate layer and position that over the top of the semi-transparent part. Something like this would work:
<div style="position: relative; background-image: url('your_image.jpg')">
<div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
<div style="position: absolute">The text to go on top</div>
</div>
You'd need to add your own positions/sizes (the top, left, width and height properties) as appropriate.