I am creating a site for my hometown in Wordpress. Because I want that the user sees the whole background image, I modified the main div's transparency property. So far so good. However, I also want to have a Google Maps box on the website. Since it is also part of the main div, the Google Maps box is also transparent (which makes it really hard to see what's going on). I wonder if there is a way to add an exception to the main div's transparency just for the Google Maps box.
Any ideas would be much appreciated.
This is the CSS3 code I use. cbox is the main div that needs to be 0.80 transparent. gmapsframe is the box for the Google Maps.
.cbox {
overflow: hidden;
width: 958px;
margin: 0 auto;
padding: 20px 0 0 0;
background: url("images/cbox.png") center 1px no-repeat;
background-color: rgba(0, 0, 0, 0.8);
}
.gmapsframe {
background-color: rgba(0, 0, 0, 1);
}
It doesn't seem to work at all.
There are 2 ways you can do this,
Option 1 is to override the parent transparency. Apply this to your maps div
<div id='transparentDiv' style='background-color: rgba(0, 0, 0, 0.4);'>
<div id=mapDiv style='background-color: rgba(0, 0, 0, 1);'></div>
</div>
Here is a JS Fiddle example: http://jsfiddle.net/V9Y5f/
Option 2 is to use absolute or relative positioning:
<div id='containerDiv'>
<div id='transparentDiv' style='background-color: rgba(0, 0, 0, 0.4);'>
</div>
<div id='mapDiv' style='position: relative; top: -30px;'></div>
</div>
Here is a JS Fiddle example using relative positioning: http://jsfiddle.net/p7TXU/
Instead of using the opacity property of CSS, use rgba on the parent, as it handles opacity, and does not affect any children.
Ps.: You don't need to change anything regarding transparency on any children of that div.
More info regarding rgba.
Related
This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 6 months ago.
please take a look to the snippet below.
I honestly can't get why the absolute positioned element (red) is not overlapping the other one. Why?
I all comes from analyzing a more complex case with some animations on a slideshow which I wanted to replicate. And they are take advantage of this strange (at least to me) behaviour, along with some other absolute-pos-in-flex-container related things.
Anyway, I tried to simplify the thing down to the bone and that's it.
Why isn't the description overlapping the caption?
.caption{
background-color: rgba(0, 0, 0, .2);
}
.description{
position: absolute;
background-color: rgba(250, 0, 0, .7);
}
<div class="caption">caption</div>
<div class="description">description</div>
The description element does not overlap the caption element because you have not set the top, bottom, left or right properties. Just setting position: absolute; by itself won't change the position of the element. You also need one of those additional properties to be set in order to tell the element where it will be absolutely positioned.
Try something like:
.caption{
background-color: rgba(0, 0, 0, .2);
}
.description{
position: absolute;
top: 8px;
background-color: rgba(250, 0, 0, .7);
}
<div class="caption">caption</div>
<div class="description">description</div>
To explicitly move absolutely positioned elements, it is necessary to set the CSS values of the top|bottom|left|right properties. By default, these properties have auto values - this is the key point in this situation.
According to the documentation, when top: auto:
for absolutely positioned elements, the position of the element is based on the bottom property, while height: auto is treated as a height based on the content; or if bottom is also auto, the element is positioned where it should vertically be positioned if it were a static element.
Similar with the rest of the properties (bottom, left, right).
Accordingly, when you set the positioning explicitly, then the elements will already overlap:
.caption {
background-color: rgba(0, 0, 0, .2);
}
.description {
position: absolute;
background-color: rgba(250, 0, 0, .7);
top: 0;
left: 0;
}
<div class="caption">caption</div>
<div class="description">description</div>
I have used CSS background on multiple divs to create a number of large format buttons. It looks beautiful, but the buttons are created dynamically, and there could be thousands of them. This means a HUGE dynamic CSS script... it there a better way of giving each element a different CSS background with the same properties?
here is the example code - HTML:
<div id="ab_a" class="banner_button">
<h2>Title A</h2>`
</div>
<div id="ab_b" class="banner_button">
<h2>Title B</h2>`
</div>
<div id="ab_c" class="banner_button">
<h2>Title C</h2>`
</div>
etc.... (there could be several thousand of these)
The CSS:
#ab_a {
background:
linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
),
url(../images/bgimageA.jpg);
background-size: cover;
width: 100%;
padding-bottom:37.01%;
position: relative;
float: left;
}
#ab_b {
background:
linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
),
url(../images/bgimageB.jpg);
background-size: cover;
width: 100%;
padding-bottom:37.01%;
position: relative;
float: left;
}
#ab_c {
background:
linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
),
url(../images/bgimageC.jpg);
background-size: cover;
width: 100%;
padding-bottom:37.01%;
position: relative;
float: left;
}
...I don't want to have to repeat this block of code 1000's of times in a dynamic CSS file.
How can I separate the background url (the only bit which changes) from the rest of the code?
BTW - Putting just the background url inline within the script will not work, it will ignore all the CSS properties in the stylesheet.
Thanks in advance.
Using multiple background images on a single element, unfortunately, there's no way using pure CSS to set the second background image in a separate rule without repeating all the previous background layers.
jQuery to the rescue.
jsFiddle demo in action
Inside your CSS set the second background to none:
.banner_button{
background: linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
), none 50% / cover; /* notice the `none` for the second layer */
width: 100%;
padding-bottom: 37.01%;
position: relative;
float: left;
}
while creating your elements, make sure to generate them passing the desired image URL from whatever data you use, >> inside a data-* attribute of your generated element:
<div class="banner_button" data-bg="../images/whatever.jpg"></div>
Than using jQuery, replace that none value with the value holded by the data-bg attribute:
$(".banner_button").css("backgroundImage", function(i, v){
return v.replace("none", "url("+ $(this).data("bg") +")" );
});
That's it.
jQuery will rebuild the whole background layers for you!
I want to create a form similar to this on my website. Unfortunately, when I lower the opacity of the div conaining my form elements, the e-mail, password, and text all reduce in opacity as well. How can I make a form like this where only the surrounding box is see-through, but my login elements, title, and buttons are not?
Create a div with background:rgba( 255, 255, 255, 0.3 ); and than simply add the inputs which than could look somehow like this:
.login_wrapper {
width:300px;
height:375px;
background: rgba( 255, 255, 255, 0.3 );
margin:0 auto;
}
.login_wrapper h1 {
padding-top:30px;
text-align:center;
color:#fff;
}
.login_wrapper input[type=text] {
width:80%;
height: 25px;
margin-left: 10%;
margin-top: 10px;
}
body {
height: 100%;
width: 100%;
background:url("https://unsplash.imgix.net/photo-1428591501234-1ffcb0d6871f?dpr=2&fit=crop&fm=jpg&q=75&w=1050");
background-size:cover;
}
<div class="login_wrapper">
<h1>Create Account</h1>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
I think you now get the idea.
You can set the opacity of the background div using rgba. For example:
.form-container { background: rgba(0, 0, 0, 0.5); }
The last parameter for rgba is the alpha value and controls the transparency of the background.
The surrounding box is not actually "see through" - you'll notice it actually contains a blurred version of the page's background image in addition to a lightened effect.
I feel the best way to achieve this, at the cost of dev-time, is to create two background images (the page's background, and a blurred, lightened version of the same in Photoshop) and set the background-image of the elements accordingly. You can use CSS's new calc function to help keep the images aligned if you're doing any advanced trickery.
The simpler approach, though considerably more CPU intensive on the web-browser and not supported by browsers older than a few years is to use CSS's blur filter. This is documented here: How to apply a CSS 3 blur filter to a background image
The way I've always done this has been...
<div class="overlay">
<div class="overlay-content">
<h2>Whatever</h2>
<form><!-- foo --></form>
</div>
</div>
.overlay-content has a bg color (white to lighten, black to darken) such as background-color: rgba(0,0,0,0.3); with a transparency value.
I have a wordpress site I'm working on and I'm needing to add CSS3 drop shadows to four elements. Content-menu-wrapper is independent of the other divs (not graphically connected) and is functional.
Next divs are content wrapper, footer, footer-bottom. Each div is graphically 'connected' one on top of the other. Content-wrapper needs shadow on top, left and right. Footer needs shadow on left and right. Footer-bottom needs shadow on left, right and bottom.
When I try editing the shadow to "test", the shadow simply disappears. Most likely I'm using the code wrong. Below is the functioning code for content-menu-wrapper.
CSS :
#content-menu-wrapper
{
background-color: white;
margin:0px auto 15px auto;
height: 32px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
Please help me with the code for the other three divs. Thank you.
Left and right is easy:
box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.6),
15px 0 15px -15px rgba(0, 0, 0, 0.6);
Getting three sides to look good however is really hard as using the above technique there are gaps in the corners.
My suggestion would be to enclose all the elements in a wrapping div and apply the box-shadow to that. Keeps the CSS much cleaner and is easier to pull off.
Use this online tool to get the css for the shadow for your divs.
I was able to fix this problem by wrapping the content and footer divs within a larger div per jimjimmy's answer above. These are the details: First I created a new div id in common.css, "content-shadow".
Then I added the box-shadow attribute plus copy/paste attributes from my content-wrapper div so the site would format correctly. In my case it looked like this:
#content-shadow {
border-left:0px solid #E7E7E7;
border-right:0px solid #E7E7E7;
border-bottom:0px solid #E7E7E7;
border-top:0px solid #E7E7E7;
background-color:#FFFFFF;
margin:0px auto 0px auto;
margin-bottom:0px;
margin-top:0px;
width: 1000px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
Next I placed a div in the header.php file of my theme before the "content-wrapper" div. Saving that file I moved to the footer.php file and placed a tag at the end of the file in the appropriate place. For me this was above "content-bottom-empty-space" div so I could have a little space on the bottom of my site.
Save the file and now it will/should propagate throughout wordpress. I hope this helps somebody in some way.
I noticed using the clip property also removes the box-shadow property. Is there a way to use both on the same element?
Some background: I have three columns for three types of products. Each product has an image, and each image is different in size. I want to standardize image size so my products display consistently. But I would also like to use box-shadow to make the images more appealing. To make images the same size, I have to clip the bottom. But clipping the bottom also removes the box-shadow from the bottom. Is there anyway around this problem?
Here is my code sample:
<ul class="gameCover">
<li class="coverSpace"><img src="images/#IndexView.GameID#.jpg" alt="" title="" class="frontThumb" /></li>
<li>→ See More</li>
</ul>
.gameCover {
float:left;
width:110px;
}
.coverSpace {
height:135px;
}
/* CATALOG GAME COVER IMG */
.frontThumb {
float:left;
position:absolute;
overflow:hidden;
clip:rect(0px, 100px 115px, 0px);
-moz-box-shadow:3px 3px 7px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:3px 3px 7px rgba(0, 0, 0, 0.5);
}
/* END CATALOG GAME COVER IMG */
Thanks!
Without seeing your markup, I don't know if this would work for you, but you could possibly apply box-shadow to the img's containing element.