I'm creating a horizontally scrolling div of music albums and want to have a fade on the right hand side of the div to help convey that the list scrolls horizontally.
I've almost cracked it, but can't quite understand why I can't get it exactly the way I want.
Here is a codepen of what I have so far... The fade (red for the sake of the example) works perfectly if the position is set to absolute but fails when set to fixed - which is what I need.
CodePen link
Attach the fade to the .artist__media not to .content.
Like this:
.artist__media {
margin-top: 50px;
position: relative;
&:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 15px;
pointer-events: none;
background-image: linear-gradient(to right, rgba(255,255,255,0), red 85%);
width: 15%;
}
.content {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
}
See the fiddle.
Is that what you wanted?
Related
I am attempting to make a coloured "blob" with a parallax scroll in the background. This is my current CSS, and the blob (an empty with class name "blob"), remains fixed as you scroll down the page:
.blob1 {
background: #FFFAD1;
border-radius:40%;
transform: rotate(-130deg);
width:40%;
top:10%;
right: -20%;
position: fixed;
height: 20em;
overflow: scroll;
}
I have no idea where that little box/border at the end is coming from though. Has anyone seen something like this before?
Bonus round: I have got the scrolling with the page (position: fixed), but what I really want is for it to slowly move upwards as I scroll down. How might I achieve something like that?
Code
.blob1 {
background: #FFFAD1;
border-radius: 40%;
transform: rotate(-130deg);
width: 40%;
top: 40%;
right: -20%;
position: fixed;
height: 20em;
overflow: scroll;
}
<div class="blob1"></div>
If you change overflow: scroll; to overflow: auto; or : hidden or remove it completly. then the border will disappear.
To get rid of the scrollbars, you need to hide the overflow with overflow: hidden;.
When you use position:fixed; the element stays fixed without consuming space.
So I added 2 other divs. The first is bringing some space between the two, the second is a background that gets over blob1. To do that, you need to play with z-index. You need to position:relative; the other div and since blob has the default z-index you can assign at the background div a z-index: 1;.
.blob1 {
background: #FFFAD1;
border-radius: 40%;
transform: rotate(-130deg);
width: 20%;
top: 20%;
right: 50%;
position: fixed;
height: 10em;
overflow: hidden;
}
.spacer {
min-height: 300px;
}
.get-over-blob {
min-height: 600px;
background: darkorange;
position: relative;
z-index: 1;
}
<div class="blob1"></div>
<div class="spacer"></div>
<div class="get-over-blob"></div>
I formatted blob1 values for a better representation, be sure to change them back to yours.
I have a little pseudo modal I am building for my app that takes over the screen for a moment when a user clicks the button. I have it set as position fixed so it can overtake the entire screen infront of the user. I have it show and hiding right now with just toggling between display: block and display: none, my css right now just looks like so :
(SCSS) :
.sort-fullscreen {
display: none;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
display: block;
}
}
And there is just a
<div class="sort-fullscreen">
... users content
</div>
Sitting at the bottom of my page.
So this works fine, however I am trying to figure out if there is a way to animate the position fixed coming onto the page - perhaps sliding on and off?
Initially - I tried something like this
.sort-fullscreen {
display: block;
top: 0;
left: -100%;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
left: 0%;
}
}
However, this does not seem to work for me. I cannot seem to find a clean way to animate a position fixed onto the page. Any help on how to achieve this would be appreciated. Thanks!
Your code seemed to work for me, albeit after adding 's' in your transition time:
transition: all 0.5s;
Fiddle: https://jsfiddle.net/dt2j6872/1/
How can I extend background color outside div?
My code:
.content-right{
background-color: blue;
padding: 40px;
position: relative;
}
.content-right:after{
position: absolute;
top: 0;
right: calc(1px - 100%);
width: 100%;
height: 100%;
background-color: red;
content: "";
}
jsfiddle
The problem is that I'm getting scroll (horizontal) and I don't want that... What I want is that red part to be extended after that black so it reaches the edge of the screen on any resolution but without scrolling... If I add overflow: hidden, it doesn't solve the problem.
Any ideas?
Thanks.
Move the pseudo to the left, and make the width of this 1000px.
Set a shadow on it to the right, with 1000px offset, and color red
.main{
background-color: #000;
height: 500px;
}
.content-right{
background-color: blue;
padding: 10px;
position: relative;
height: 100px;
}
.content-right:after{
position: absolute;
top: 0;
right: 0px;
width: 1000px;
height: 100%;
background-color: transparent;
box-shadow: 1000px 0px red;
content: "";
z-index: -1;
}
fiddle
Note: now the pseudo element will be probably outside of bounds, but to the left. Elements going outside of bounds to the left or upper side do not generate scrollbars.
On the other side, the shadow extends to the right. But the shadow is not taking into account when computing the layout, so this won't generate scrollbars either.
Quick Fix, but essentially I made the document have a overflow-x value of hidden so it will NEVER produce a horizontal scroll bar. If this is a problem, I can try to think of a better solution, but this is what I have so far.
JSFiddle: https://jsfiddle.net/m4f4x3bt/3/
html, body{
overflow-x: hidden;
}
Fiddle
I am trying to make the div #top opacity: 50%, so when you scroll, it will show a faded portion of the webpage below it. When I run this, however, it does not show opacity. It still shows solid.
CSS:
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: relative;
position: fixed;
opacity: 50%;
}
HTML:
<div id='top'>Cuisine List</div>
opacity takes a decimal between 0 and 1, like so:
opacity: 0.5;
See MDN for more information.
Also,
you seem to have two positions - you should remove the first one
for position: fixed to work, you must specify at least one location, such as:
top: 0px;
which will anchor it to the top.
fixed fiddle
So, I modified a wordpress tabs widget so that I could make it look like in the image I attached, only that I have one problem.
I can't make the ribbon edges stay on top of the website layout.
I have a demo of what I've done so far here.
So I added this code to show the images:
#wp-tabs-1 .ui-tabs .ui-tabs-nav:before{
content: url(../images/l-corner.png);
width: 47px;
height: 43px;
position: absolute;
left: -5em;
z-index: 999;
}
#wp-tabs-1 .ui-tabs-nav:after{
content: url(../images/r-corner.png);
width: 47px;
height: 43px;
position: absolute;
right: -5em;
z-index: 999;
}
I tried all the positioning combinations with the z-index that I could, and nothing seems to work, to make the ribbon edges stay on top.
They're hidden by .grid { overflow: hidden }. Change it to .grid { overflow: visible } or simply remove it and it should work.