I'm working on a to-do web app and I'm trying to achieve a visual effect wherein multiple todos appear to "share" a single background. So, imagine that a user adds a few todos. Their backgrounds appear as a part of a single gradient, with colors transitioning from top todo to bottom todo. This pen should hopefully demonstrate what I want to happen (click the first div):
Elements 'sharing' a background
HTML:
<div class="outer">
<div class="inner"></div>
<p>CLICK ME</p>
</div>
CSS:
.outer {
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 200px;
background: white;
overflow: hidden;
clip: rect(auto, auto, auto, auto);
transition: transform 500ms ease-in-out;
font-size: 2rem;
}
.inner {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to right, red, orange, green, blue);
opacity: 0.5;
}
Now this already kind of works, I guess, but only if I manually animate position of the divs. Is there some way to utilize CSS transforms instead? The big problem there is that as soon as a transform is applied to outer div, the fixed child div stops being fixed, completely destroying the 'same background' illusion. you can see it in this pen:
Illusion fail
I read that it's part of the spec and that's just how it is, but thought maybe you CSS wizards here know other ways to achieve this effect, perhaps even without fixed child divs. Would really appreciate your help.
Here's an example using clip-path, but one issue is that it doesn't clip the same way as clip does, because it only clips the element itself, not child elements under it. Children elements will also get clipped, so they have to be moved to match the new clip position.
https://codepen.io/mix3d/pen/OJPjbGp
Related
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.
I want to have a frosty-glass effect on a div. There are few examples over internet on how to achieve this, however most of them say that, you have a background image for your body then you have a small div over it and want to have frosty-glass effect for that small div.
However my case is slightly different as I dont have any background image rather some text (or any other DOM for that matter) under a div, there is another div which covers that 1st div partially and I want to have frosty-glass effect on that 2nd div. Below is a little example
HTML
<div class = 'parent'>
<div class = 'top'>
</div>
<div class = 'bottom'>
Some div...
</div>
</div>
CSS
.parent {
height: 200px;
width: 100%;
}
.top {
height: 80px;
width: 100%;
position: fixed;
top: 0;
background-color: rgba(0,0,0,.2);
}
.bottom {
height: 150;
width: 100%;
margin-top: 10px;
}
I am looking for to have the frosty-glass effect for div with class top which is actually fixed positioned.
The Codepen example - https://codepen.io/Volabos/pen/RwWxwQd
Is there any way to have that effect using CSS?
Thanks for any pointer
Use the css filter property, eg. filter: blur(3px);.
Find a demo based on yours here.
Example:
The area with the red border is where you can fully see through the mask. Everything else is grayscaled and partially hidden with opacity or transparent white background.
One thing I tried is to make a class for each selectable area with a grayscale filter and lower opacity. Then I apply this class on all areas but the selected one. But this doesn't work well this nested zones because some of the areas become less opaque than others.
Any advice on how could I implement this?
Codepen
Works as expected only on #footer, because it doesn't have parent or children areas that are selectable
You could apply an highlighted class to the chosen element like so
.highlighted {
border: 1px red solid;
outline: 999em solid rgba(255,255,255, .75);
}
A wide outline will cover all other elements.
Example : http://codepen.io/anon/pen/emOXRJ
Add an z-index higher then the overlay to the element you want too focus on.
I don't think there will be a straightforward way to do this. One idea would be to have four block elements around the edges of the element in question that have a semi-transparent fill colour, however you will have to measure and position these in JavaScript, and you'll have to take scrolling into account also. Before attempting this, I would look for a library that already offers this.
You can use a full sized div with a transparent grey background and a z-index higher than the rest of your site:
#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(200, 200, 200, 0.8);
z-index: 1;
}
and then on the zone you want to be fully visible you set an even higher z-index:
#other_content{
z-index: 2;
position: absolute;
top: 50px;
left: 100px;
border: red medium solid;
}
like in this fiddle
I'm developing a jQuery Backbone.js web app.
I have a table with table entries. The table has a white background.
If the user selects a table entry, a modal popup is shown. To show the user that the popup is now in modal mode, I used to have the jQuery UI diagonal stripes (ui-widget-overlay).
But I changed to an alternative. Those stripes were too "striking", "obtrusive" for me. I now change the opacity of the table to 0.5. I like this more.
The problem now is that I have popups in the popup window. And if I also change the opacity of the first popup to show the user that only the second popup is working now, the table shines through the first popup.
Is there any possibility, any alternative way to have a popup window (a div) "dim", "grey out" to half of its appearance without getting transparent?
I would add another div on top of the div that has the same dimensions but has grey background color with opacity 0.75. This should work pretty fine.
CSS
.inner {
position: absolute;
}
.fade {
background: grey;
opacity: 0.75;
}
HTML
<div class="outer">
<div class="inner">content</div>
<div class="inner fade"></div>
</div>
This way you are pretty safe when it comes to cross-browser references. Also you can control the fade by adding an "id" attribute to the fade class and make it go away. This way, you can also make div inactive, as they div inner fade is on top of it.
Try with hsla (look here).
<style>
#el1 {
background: red;
width: 700px;
height: 700px;
}
#el2 {
background-color: hsla(190, 30%, 94%, 0.6);
width: 500px;
height: 500px;
}
#el3 {
background: green;
width: 300px;
height: 300px;
}
</style>
<div id="el1">
<div id="el2">
<div id="el3">
</div>
</div>
</div>
In my code, el1 is the holder and not transparent at all. Then, el2 as first child uses hsla for transparency. The contained el3 is not transparent again and this works.
You could lay a glass pane on top of your page and set the z-index appropriately so that your 2nd popup lies on top of it and everything else is hidden under it:
#pane {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
opacity:0.5;
z-index: 999;
}
Assure that your 2nd popup has a z-index higher than the pane and you're fine.
I just stumbled across this guys site: http://mantia.me/
He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.
Any guesses on how to make something similiar?
Images:
It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.
You can view the png on top of the image transitions.
So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.
Here is how he does it:
HTML
<div id="content">
<div id="feature"></div>
<div id="navigation"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
margin: 64px auto;
font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
color: #404040;
}
#navigation{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 800px;
height: 46px;
background: transparent
url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png)
no-repeat top left;
}
#feature {
width: 800px;
height: 466px;
overflow: hidden;
background-color: aqua;
}
And then he just adds an img element to #feature.
<div id="feature">
<img src="http://mantia.me/images/supermariobros_large.jpg"
alt="Super Mario Bros.">
</div>
See fiddle.