I have two div's one is .father and the other one is .child - as follows:
<div class="father">
<p></p>
</div>
<div class="child">
<p></p>
</div>
As you can see, the child is not inside the father (sorry if this seems doggy, the only example blinked to me). What I am trying to do; is when I give the .father a background colour lets say "background-color: #000". I want the child to inherit the colour black BUT make it brighter/darker...
I have tried to do the following:
.child {
background-color: -20%;
}
I don't know if that is a real way, I guess it's stupid - but I need to share what I did.
I have also tried to do it using CSS transparency but that will be applied to the whole div... what if the div has text inside it?
So for example, I wrap the div .child with another div and give that div a black background, then apply transparency to the div .child - but this will apply transparency to the text as well!
If I have added a around the how can I make that span inherit the colour of the div inside it? and inherit its size as well.
I'm afraid you cannot do that in pure CSS. Unless of course you work with rgba colors to make it transparent.
There is however a function in SASS (and LESS) that allows to darken/lighten colors. Take a look at these function's reference here.
More information about SASS/SCSS: http://sass-lang.com/
You can set for the child background the same color that for the father, and set a semitransparent pseudo element over it.
If the background of the pseudo element is semi-transparent white, the background-color gets lighter; if the pseudo element is semitransparent black, the child gets darker.
.father, .child {
background-color: red;
}
.child {
position: relative;
}
.child:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,0.2);
}
.child:hover:after {
background-color: rgba(255,255,255,0.3);
}
In this example, the child gets darker red, but turns to lighter red when hovered (and works the same if the base color is whatever you want
fiddle
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'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
I'm new here, so please tell me if I formulated something wrongly, code or text-wise.
This is the code I'm currently using for my page. Yes, I know it's short and terrible, but I'm still learning HTML/CSS. If you run that on a page, you'll notice no hover events on the navbar buttons, and some fiddling with the logo will reveal that the actual navbar is a big bar. (width:100%?)
I was only wondering as to how I would go about creating an on hover that's only slightly there, something like this: (hovered on the left, not hovered on the right)
Hover showcase
I don't necessarily need it using my current setup or it being exact, but I'd like an explanation as to how this would be done. (the site I took it from has fancy fade on the text turning blue and a slide animation on the bar from the bottom, but I don't expect I'll be able to do that)
I was also wondering how I could have the logo be on the same bar as the other li elements, and then center it off how long logo + li elements (the whole bar) would be. (as opposing to having the li elements centered and a logo off to the left.) Also, a thick, colored bar above the navbar, but not below, like a margin, and having the navbar be a little thicker as well, as the picture above depicts fairly well.
Thank you for any assistance I can recieve!
Hyao
So for the hover color you can do something like:
li:hover {
color: blue;
border-bottom: 3px solid blue;
}
To add more of the animation you might want to do:
li {
display: inline-block;
vertical-align: middle;
}
li a:hover {
color: blue;
}
li a:after {
margin: 0 auto;
width: 0px;
height: 3px;
display: block;
content: "";
background-color: blue;
transition: width 0.5s linear;
}
li a:hover:after {
width: 100%;
}
li img {
padding: 14px 16px;
}
http://plnkr.co/edit/GrxqcRjoMa7aWjHvnBhA
basically you are creating a psuedo element :after which has an animation on its width. When you hover over an li element the psuedo element will grow to 100% of the width looking like an expanding underline.
To make the image inline with the other elements remove your position: absolute style for the #logo
I have a button html element on my page and want to use the JQuery button so I do
$( "#myButton" ).button();
This works great, but I want to edit the style of the button, namely (as it says in the title) I want to make the button shorter with smaller text and center the text vertically. I've tried
#myButton {
height: 22px;
font-size: 16px !important;
}
And this works in terms of making my button and text the size I want them, but it doesn't center the text vertically in the button. I've tried setting padding-bottom: 2px;, I've tried setting line-height: 22px;, and I've tried setting vertical-align: center;, but none have worked. The button still looks like: Any help would be greatly appreciated. Thanks!
Try to use padding: 0; instead height: 22px; and your height will be defined by your font-size attribute.
Example: https://jsfiddle.net/dmonti/mz8k7kkw/
For centering small elements relative to a parent I usually just use absolute positioning:
HTML
<div>
<span>Process</span>
</div>
CSS
div {
position: relative;
border: 5px solid grey;
background: black;
color: white;
width: 200px;
height: 300px;
}
span {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
The important things to note here are that your "Process" element is self-contained (inside it's own span element), and that its parent element's position property is set to relative.
The CSS transform property might look a little confusing, but it essentially keeps the element perfectly centered inside of it's parent, no matter how it's resized.
Fiddle
In my fiddle, you can see how it centers by adjusting the div's height property in the css.
Hope this helps!
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