I am making a website and I have got a background of light blue, then on top of that I have a white transparent rectangle. Then all in there I have a div where my actual information is going to be, laid out like this
<div id = "transparent">
<div id = "yourinfo">
<div id = "profileinfo">
<span id = "yourname"> Name </span>
<br>
<span> View </span>
</div>
</div>
</div>
However when I try and give a background colour to my main page above the transparent rectangle, this element is also transparent, how do I remove this transparency and get this element to appear as if on top of the transparent rectangle?
Here is my css for these elements
div#transparent{
margin: 40px 40px auto;
margin-top:0px;
height: 620px;
background-color: white;
opacity:.3;
padding: 20px;
}
div#yourinfo{
width: 350px;
height: 250px;
background-color: red;
border: 1px solid gray;
opacity:1;
-webkit-border-radius: 15px;
padding:10px;
}
The CSS opacity applies to children elements. To accomplish what you wish you will have to use the rgba (RGB plus Alpha/Transparency channel) on your background-color declaration.
Such as:
#transparent {
background-color: rgba(255,255,255,0.3)
}
Be aware that this approach does not work with IE8<, so you might have to look for a workaround. Either you use a transparent .png (like in the olden days) or you use some conditional stylesheet and the Microsoft Internet Explorer proprietary syntax.
Also, obviously, this approach will only work if you don't want #transparent to have semi-transparent text; all text will be 100% opaque in that div. Accordingly, you can use the same CSS3 syntax on the text color.
Related
Hi I am trying to make the quote box transparent and larger the text size.
Original code below.
<div class="quote"><h1>WOW YOUR AUDIENCE<br></h1><hr style="margin: 0 20%;">
You have not mentioned how much transparency and font size you need so I have taken it randomly. Also you were missing a closing div tag.
Here is the code:
<div class="quote" style="opacity:0.5"><h1 style="font-size:50px">WOW YOUR AUDIENCE<br></h1></div><hr style="margin: 0 20%;">
You have asked to make the complete quote box transparent and not only its background-color(which is white!!). Hopefully this is what you need.
To achieve this without affecting the transparency of the text while making the background-color of the div that surrounds it transparent, use rgba colors instead of opacity
The first 3 values are the Red, Green Blue levels, and the 4th number is the transparency on a scale of 0-1.
Learn more about rgba in css here.
To increase the size of any font, you can use font-size. I used em in this example since it is relative to the screen size but you can use any of the CSS measurement units.
.quote {
background: rgba(200, 54, 54, 0.5);
z-index: 22;
}
h1 { font-size: 6em; }
.example {
position: absolute;
background-color: blue;
top: 10px;
left: 80%;
height: 200px;
width: 50px;
z-index: -1;
}
<div class="quote"><h1>WOW YOUR AUDIENCE<br></h1><hr style="margin: 0 20%;"></div>
<div class="example"></div>
To apply transparency to all elements in a div or to an element itself, you can simply use the opacity style from a range of 0-1 like so: opacity: 0.7;
I have a page where I have a div that is positioned over another div. The top div is set to be transparent in most places, and not capturing pointer events. I know IE 9 and 10 don't support the CSS pointer-events property, but I'm seeing some odd behavior in IE 9 and 10 when the underlying div doesn't have any content. In those cases, it doesn't grab the mouse events at all. If there's a border or some text content hovering over the border or content does work, but not in the blank spaces of the element. I've tried using the transparent background image, but that doesn't seem to work. I've attached the link to the bare-bones fiddle that reproduces the problem.
HTML:
<div class="topElement"></div>
<div class="bottomElement">Works in IE 9 and 10 only if you hover over text or border.</div>
CSS:
.topElement {
position:absolute;
width: 100%;
height: 100%;
background: transparent;
pointer-events: none;
z-index: 2;
}
.bottomElement {
position:absolute;
width: 100%;
height: 100%;
border: 3px solid black;
background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR??AA7");
}
.bottomElement:hover {
background-color: red;
}
http://jsfiddle.net/MLundin617/jpr3j8jb/4/
The area should turn red when you hover over it.
You must write z-index to ".bottomElement" >=2
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!
Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.
One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)