Develop Reference

Is it possible to make a div work like how a "layer mask" would? [duplicate]

I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.

The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/

If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.

Responsive Menu with Text on Background Image

I have a responsive menu on top of an image background, which also has text on top.
Because I have to set the text messaqge with "position: absolute" to make it overlay on top of the background image, when I expand the menu the menu items will overlay on the text message. How do I fix that?
The other problem is I'd like to have the menu be transparent on the background image instead of being on the dark grey background. However, I can't seem to find a way to do that.
Here's the code

You may want to consider for you header message to put it inside of your header-slides div and then position this div to relative. That way your header message is actually positioned absolutely in the header and not in the body. Then if you want your nav to be transparent over the header image then you can position your body to relative just to be safe and position your nav to absolute, give it a high z-index and background opacity can be achieved by using rgba colors. So something like the following:
Here is a fiddle demo Fiddle Demo
Header:
.header-slides {
height: 500px;
border: 1px solid black;
position:relative;
}
<div class="header-slides" data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]'>
<h2>Header Message</h2>
</div>
Then your nav:
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(20,20,20,0.8);
min-height: 30px;
position:absolute;
top:0;
left:0;
width:100%;
z-index:5;
}
And then remove the postion of relative from your responsive css at max width of 680px from your nav so remove the following completely:
ul.topnav.responsive {position: relative;}

z-index, bruh.
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
.topnav{z-index:9999999}
try it.
For transparent BG colors you can use rgba(). There are online tools to convert your colors all oer the place.

IE10- transparent overlay using z-index

I am working on beautification of javascript alert.I need a transparent overlay which overlay the whole page other than the alert block,just like the origin javascript alert.
The html:
<html>
<body>
<div class="alert-overlay">
<div class="alert-block"></div>
</div>
</body>
</html>
The css of the overlay:
.alert-overlay {
width: 100%;
height: 100%;
position: fixed;
z-index: 1100;
left:0;
top:0;
}
The css of the alert block:
.alert-block{
position:absolute;
top:30%;
left:50%;
width: 300px;
background-color: #fff;
margin-left: -150px;
border-radius: 5px;
z-index:1200;
}
It works in IE11,chrome and firefox,but failed in IE10-.
The overlay seems overlay nothing in IE10-,all the elements on the page are active.Strangely,if I add a background-color:black,it will overlay everything but the alert-block,and make the page inactive like the origin javascript alert except the additional background,which is not what I want.
So how can I make the transparent overlay work on IE10-?Is that a z-index bug?

IE10 has some issues. Try giving a background with filter. Here is how you can do it-
background:white; filter:alpha(opacity=1);
Some helpful links :
z-index problem in IE with transparent div
IE z-index trouble on element with transparent background
Hope it helps.

IE10 and less allow actions through elements when it's not having any backgorund or content. You must add a background to your overlay. Use a transparent one if you don't want it to be visible:
background-color: rgba(0,0,0,0);

Resizing initial div load to fit to browser zoom?

So I am currently designing a website and one of things Im noticing is the div I have placed for the container doesnt exactly flow in the way I want it to when observed in different resolutions. Heres what I have in the CSS:
#container{
position: relative;
width: 100%;
height: 100%;
background-color: black;
}
#center{
background-image:url(http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png);
height:1080px;
width:1920px;
position:absolute;
top:50%;
left:50%;
margin-left: -960px;
margin-top: -540px;
overflow: hidden
}
And here is my HTML:
<div id="container">
<div id="center"></div>
</div>
I pretty much just want the center div to resize on initial load based on the level of zoom the browser is currently at and fit the edges of the div to that zoom while keeping the div's width and height proportions of 16:9. I would like to be able to apply the same scaling to everything that is nested within the div as well if this is possible. But I would like the user to be able to zoom in and out afterwards without the div resizing to fit the screen actively while he is zooming. Im mostly wanting this process without auto zooming the browser because I do not want to mess with the level of zoom the user has on other websites.

The paragraph explaining your goal is quite confusing. Can you explain what you're trying to do better?
#center{
transform:scale(1.5);
transform-origin: center center;
-webkit-transform:scale(1.5);
-webkit-transform-origin: center center;
}
This would scale your div, and all it's children, without changing it's aspect ratio.
Or maybe you could use an actual tag inside #center instead of a background-image. Then you could do this:
#center img{
width: 100%;
height: auto;
}
And this link is an indepth SO post on detecting cross-browser page zoom.

JQuery CSS Colorful clock

I am using the following jQuery component:
http://tutorialzine.com/2009/12/colorful-clock-jquery-css/
And need to set it with a transparent background. The CSS I am setting with a background transparent is the following:
.clock .bg, .clock .front{
width:100px;
height:200px;
background-color:#252525;
position:absolute;
top:0;
}
However when I do that the clock does not function as needed as part of the circle on the left side stays visible.
Any suggestions as to how to solve this?

it will not be possible to set a transparent background using this clock.
The animation relies on the div's being non-transparent so that they will occlude part of the images used to create the moving dial effects.
See this explanation from the original tutorial, the top left image has a note "Hidden under front left div"
http://cdn.tutorialzine.com/wp-content/uploads/2009/12/i22.png