I am trying to make a sidebar that is similar to the one shown here: https://www.sketchapp.com/docs/ .I made everything working fine except making the box shadow opacity at top and bottom, I tried box shadow but couldn't make it the way its shown in the page. what I did so far
Thanks in advance! ^^
image to see
Welcome to SO.
You can use pseudo selectors and add to them a background with a linear gradient.
for example:
div::before {
background: linear-gradient(180deg, #fcfcfc, rgba(252,252,252,0));
content: '';
display: block;
width: 100%;
height: 4rem;
position: absolute;
z-index: 0;
}
here i am doing the following:
I set the background to a linear gradient fades the color, I put display block in order to make it behave like a div, finally I set the z-index to 0 in order to place it at the top of the other elements.
here is a working demo: https://jsfiddle.net/hdsma1fv/5/
references:
about pseudo elements: https://www.w3schools.com/CSS/css_pseudo_elements.asp
about linear gradients: https://www.w3schools.com/css/css3_gradients.asp
Edit:
If you need the shadow to hide with the scroll then you need to attach the pseudo selector ::before to an element inside the scroll and remove the position: absolute;.
Also if you want it to show in the bottom also, you need two things: first - rotate the linear gradient angle and second - use the pseudoselector ::after instead of the ::before one.
check https://jsfiddle.net/hdsma1fv/34/ for an updated example with both modifications.
Related
I'm building a website with a fixed background image. It would be perfect for it to be both grayscale'd and blurred.
Since I discovered on my own that putting filter: blur(100%) would blur the whole page and its content, I learned that I could set my filters in a :before.
Here is my SCSS:
.front-layout {
font-family: 'Fira-Mono', 'monospace';
min-height: 100vh;
background: #0e0e0e fixed;
background-size: cover;
filter: grayscale(100%); <-- I somehow need it here
&:before {
content: "";
position: absolute;
width : 100%;
height: 100%;
background: inherit;
z-index: -1;
//filter: grayscale(100%) blur(5%); <-- What I want to achieve
filter: blur(5px);
}
// Some other elements
}
FYI, the background image is set dynamically directly in the HTML, that's why it doesn't appear here.
Somehow, I can't get rid of the filter outside the :before element, whatever it is, or the filter inside it won't work. To sum up, it's either both or neither of them.
How can I get rid of the first filter and apply two filters in my :before element?
Edit
I recreated a JSFiddle to make some more context, if you run my code, you won't see anything happening unless you uncomment what I commented.
Thank you in advance
The ::before pseudo element gets hidden behind the element itself (because of the negative z-index), and because that element has the same (un-manipulated) background, the pseudo element gets effectively hidden.
It would work this way, if you could set the background for the pseudo element only, and leave the element’s background transparent - but if you need to use background: inherit to get the pseudo element to inherit the parent’s background that was set via inline style, it can’t work this way.
Your only option then is to get your pseudo element positioned between the element’s own background, and its content - so effectively you need to elevate all content “one level up” - in the simplest way that could be done using
.front-layout > * {
position: relative;
z-index: 1;
}
https://jsfiddle.net/9sfqd7te/6/
Depending on what the element actually contains, and whether those descendants are themselves positioned in any way, it might work with only that; or you might have to make adjustments (like exclude certain elements from getting relative position applied if they are otherwise positioned already, and/or not overwrite a higher z-index they might already have.)
(.front-layout > * limits this to the children of the parent already, descendants further down the tree are no affected.)
I have an image I want to animate, it should slide bottom up to its position. I'm using Angular 5 animations and so far my animation works, but not exacly as I want it. Please check this Plunker as it is an example of what I have.
Ok, I have two div's with height: 50%. The top div has an image (represented as a red square in the plunker) set with position: absolute.
I'm animating this image (red square) to appear from bottom to up, but the problem is:
I want the image to come from the bottom, but behing the bottom div and it is coming in front of it.
I tried z-index, didn't work, figure out why, couldn't think of another way that didn't sound like a cheap and ugly workaround.
Thanks.
Add position: relative; along with z-index to #bottom div.
#bottom {
background: #a3c6ff;
position: relative;
z-index:1;
}
I've created a fiddle to better show what I'm trying to ask.
angle crop of pseudo element
Here's a image showing the desired result:
li.active::after {
content: '';
position: absolute;
background: #fff;
width: 10em;
height: 100%;
height: 20em;
top: 5%;
left: 15%;
transform: rotate(-75deg);
}
What I'm looking to do is have the li active class display a colored background with a cropped angled at the bottom.
it should adapt to the length of the link
needs to see through to the background
include the angle part within the link
be responsive
Is this possible in pure css?
The best way I have found to do this in pure CSS is using a the background-image property with a linear-gradient, going from one color to transparent.
You can use the color of the element itself as a mask, or you can use the background. The difference with be how you define the gradient angle and gradient color.
In this example, I have used your object color to get the effect:
http://jsfiddle.net/948ud6f7/
You will notice it is pretty jagged and not as crisp as if you were to use an image. I am not sure of a workaround with this yet, but different browsers render the edges differently, so this at least gives you a starting point.
Good luck!
You can do that by using one of three methods:
transform/rotate
border-width/border-color(transparent)
box-shadow
I have a div and it has a background image. But I finally understood that I forgot another background for the div that goes at the bottom. so I used the :after pseudo and inserted one.
The background that goes in the :after was supposed to be a transparent image that fades well with the background of the body. But now the background of the parent div is getting behind what is in the :after pseudo element.
Could there be any way I would make the background of the parent div not to show in my :after pseudo element?
Edit
here is my code
.foo{
height: 30px;
padding-bottom: 20px;
background: url(i/myimage.png) no-repeat;
}
.foo:after{
display: block;
position: absolute;
right: 0;
background: url(i/pseudo-elem-bg.png) no-repeat;
content: ' ';
height: 20px; /*takes the bottom padding
}
The ::after pseudo element adds an element which is the last child of the parent selector, not a sibling (hence, an element after the selected one), so it is just natural that the background of the parent shows up if the child background is transparent.
You might need to use another solution than the pseudo-element, such as a real element perhaps. Seeing the current code you have might help finding the best solution for your case.
If you're creating a pseudoelement just to add another background, you could set multiple backgrounds instead, and they will shown in the order you have set it.
Something like:
div {
background: url(bg.png),
url(otherbg.png);
background-position: center top,
center bottom;
}
You could use other background properties and sort them in the same way.
I'm struggling with getting a background image on this page and a drop shadow to show on top of my tab.... [URL_REMOVED]
The left tab should be "below" the white content area, thus the shadow effect should be on top of the tab. The second issue is that I'm using CSS to apply a gradient background, I also want to have a background image as well and it's not working. Can anyone help me figure out why?
You have to add postion:relative to #main and #side. z-index works only on positioned(absolute/relative) elements.
#main {
…
position: relative;
z-index: 2;
}
#side {
…
position: relative;
z-index: 1;
}