I am creating a webpage that have a transparent div.
I want to add a non-transparent div inside that transparent div and I find that it is also transparent.
I try to set the div inside to opacity:1 but it doesn't work.
What should I do?
I found this somewhere while researching CSS3 and apologize that I cannot re-call where so as to credit the appropriate author.
But if you are looking for a semi-transparent background solid color on a div. Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.
ex.
#mydiv { background-color: rgba(128,64,0,0.75); }
There are two ways that I know of to work around this:
Fake transparency on the containing div by using a transparent PNG as the background image.
Separate the divs so that they are side-by-side, and then use relative or absolute positioning to stack them.
This doesn't work in CSS unfortunately. In the past I've used positioning to push the non transparent div containing the content into the transparent div. I couldn't dig up some old code from my projects, but I did find this blog post:
Non-transparent elements inside transparent elements
use background, padding, background-origin to control the padding and z-index to control the position of the element. For example:
#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}
Related
I have a div with stuff in it on a page with a background gradient.
Now towards the right, I would like to fade that div out to the background:
I have tried using background gradients, but those are behind the text. Basically what I would need was a foreground property which I could fill with another gradient.
How can I achieve this without needing to use canvas and JavaScript?
I suggest creating a transparent .png image and applying it as a background on top of the div with text by creating a class with absolute positioning.
.transparent {background: url("xxxxxx.png") repeat-y 0 0 transparent; position:absolute; top:0; right:0; z-index:1;}
Hope this helps.
A transparent (rgba) gradient in a separate DIV positioned absolutely on top of the original div should do the trick.
Caveat: Absolute positioning may not be feasible, depeding on your layout.
I have a button that uses a graphic and has rounded corners.
In order to make the button CSS reusable, and able to accommodate any length text whilst still keeping the round corners, I'd like to use :after to add the end rounded corner after the main button (thus the first image/text can grow and the rounded corner will always be tacked on the end.)
Managed to get the :after working when I add content (e.g the words 'test' and some background colours) but cannot get it to work when there is no content on the styling. I just need the background image and that's it.
JSFiddle with the buttons. You can see the :after code but for some reason this doesn't display.
#wizard-nav .paging:after
{
background-image:url("http://i.imgur.com/GDJgl.png");
height:22px;
width:7px;
}
When using the ::before and ::after pseudo-selectors you need to set a value to content.
Pseudo elements are also inline elements, so if you want to define a height or width then you must display it as a block element.
For example:
#wizard-nav .paging::after {
content: "";
display: block;
background-image:url("http://i.imgur.com/GDJgl.png");
height:22px;
width:7px;
}
Working example: http://tinkerbin.com/GSO0HpD2
You have an alternative for your background-image. You can generate it for example with http://www.colorzilla.com/gradient-editor/ and than applu some border-radius, as much as you like and border, and you have the same effect more quickly than working around a background-image like this. For example:
border:red 1px solid;
border-radius:10px;
And by the way - they didn't appear because of your background-image. Take down your ".
http://jsfiddle.net/WZywh/ here is an example
Let's say I'm making a Valentine's Day app. I want a heart to fill up with pink from 0 to 100 to show one's love for another.
The height of the image will be 102 pixels, and for every % someone is "in love", we will creep up a single-pixel height line.
My approach is as follows: go into Photoshop and remove the 'background' of the inside of the heart, so that the inside is now transparent. The area of the surrounding heart will be painted white. Put on a site with a white background. Put the image on a 102 x (whatever) div, then put another div inside, whose background color is pink. It's then a simple matter of increasing the child div's height.
This is nice, but I can only use it on sites which have a white background, because it's the white that's preventing the area from turning pink. In short, I need a way to fill up this heart while being able to change the background color of the web page.
Create the heart as you normally would making the background transparent and fill in the center. Use that as the background image of a div and position it at the bottom.
The example below shows a heart at 40%.
HTML
<div class="heart-wrap">
<div class="heart" style="height: 40px; margin-top: 60px;">
</div>
</div>
CSS
.heart,
.heart-wrap {
width: 100px;
height: 100px;
}
.heart {
background: transparent left bottom url('/heart.png');
}
Demo: http://jsfiddle.net/UFBjh/
Demo2: http://jsfiddle.net/L5uDp/
Check out this demo. This is probably what you want - http://jsfiddle.net/Rhpyp/
The solution involves drawing out the heart using CSS3 using the technique mentioned in http://www.webfroze.com/css/heart-shape/
And then having an outer div handle the partial hiding of the heart as needed.
The color of the heart as well as the DIV that is used for partially hiding it is editable via CSS.
I'm trying to create a border that sits INSIDE an image. So, there should be a 10px or so margin from the edge of the photo to where the border is.
Examples of what it should look like: http://imgur.com/a/lMSMR
You can see the page with the photos here: http://blueboxluxe.com/praise/
Anyways, few parts of this is harder to do... 1) the layout is fluid -- the photo size can change. 2) I want the border to show up on all photos -- no matter the size. 3) On the praise page, there's a lot of floats happening; so, things need to work with that correctly.
I've tried playing with box-shadow, but all I get is a border on the outside of the image. Not inside.
Try the outline property and specify a negative offset:
outline:2px solid red;
outline-offset:-15px;
No IE support though!
you can also try a container div
<div><img src=""/></div>
give div a fixed height and width and overflow hidden.
div{height:100px;width:100px;overflow:hidden;border:1px solid black;}
Maybe create a div within the div that contains the image, set it to
position:absolute;
margin:2% auto;
left:2%;
width:96%;
border:solid 1px #fff;
and then give the element that is containing it:
text-align:center;
Alternatively, if the image is floating in a much larger div that contains other elements, put it into a parent div set to the size of the image then put the new div that will add the border underneath or above the image; do not put the image into the div that you want to use as a border; the reason I used percentages is because it should then resize depending on the size of the image.
If you play around with the numbers it should work as you wish.
you can use the box-shadow property in css3. Use a 1px thick box-shadow with a color would give you that effect on almost all browsers.
See http://i40.tinypic.com/2nv4gol.png for example image.
I have a span element (blue background in example image) that contains other span elements (red background in example image). Currently, the inner spans' red background color take precedence over the container span's blue background color.
I need the container span's blue background color to take precedence over the inner spans' red background color.
Can I do something with the container span's z-index and fiddle its opacity? Any help would be appreciated.
maybe you can define a new css for the inner spans, make it transparent background and add a !important to the CSS rule, like, if the inner spans are class 'x' ...
.x {background-color:transparent !important}
Well, you could try setting the container to position: relative; z-index: 1; and the inner ones to position: relative; z-index: 0;, but I think that would hide the text behind the background colour too.
I think more information on why you are trying to do this would help give a better answer than this, but maybe you could have some JavaScript remove the background colour of the inner spans? Like I said, it depends on what you're doing, exactly.