My code : (http://codepen.io/anon/pen/EaQyMo)
CSS:
html, body
height: 100%
line-height: 1.5
.wrap
height: 100vh
display: flex
main
flex: 1
display: flex
#media (max-width: 800px)
flex-direction: column
h1
margin-top: 0
aside
flex: 1
background: #f7f7f7
overflow-y: hidden
height: 100vh
position: relative
article
flex: 2
background: #f0eeee
padding: 2em;
overflow-y: scroll
#aside1
background: tomato
height: 100%;
overflow-y: auto;
#aside2
background: #bbb
position: absolute
top: 100vh
transform: translate(0, -50px)
width: 100%
height: 100%
transition: all .4s
#aside2.show
top: 0;
transform: translate(0, 0)
#aside2-head
padding: 0 .5em
height: 50px
background: #bbb
cursor: pointer
h1
text-align: center;
#aside2-content
padding: 2em
background: darkblue
height: 100%
overflow-y: auto
My problems :
The bottom of the red section (#aside1) is hidden by the "click me" button, here is how I want it to be:
The bottom of the blue section (#aside2-content) is hidden even if we scroll until the bottom, here is how I want it to be:
I can get the result with a fixed height, but this is not a flexible solution.
Thank you!
Related
I am having trouble with css about entire page. Here is my page when I look on responsive size: 990px x 789px
and here is page at size 1024px x 789px which is good :
Code base css:
.filter-body-wrapper
padding: 0
width: 94%
margin: auto
.filter-type
border-bottom: 1px dashed rgb(2,150,136)
.single-item
margin: 10px auto
width: 97%
&.disabled
opacity: .5
.area-filter
display: flex
align-items: center
padding-left: 1rem
.clear-filters
text-align: center
padding: 10px 0
button
background: none
text-decoration: none
border: none
border-bottom: 2px solid rgb(11,60,190)
margin: 10px 0
padding: 0 2px
cursor: pointer
#media screen and ( max-width: 990px )
.filter-wrapper
background-color: white
position: absolute
right: -40%
top: 125px
transition: .5s all
#filter-box
transition: .5s all
z-index: 1
#filter-box.display
transition: .5s all
right: 0
.two.columns
width: 25%
#media screen and ( max-width: 600px )
.filter-wrapper
right: -100%
top: 0
min-height: 100vh
.filter-options-table
border: none
.filter-options.header
.back-btn
display: inline
.two.columns
width: 100%
#filter-box
position: fixed
z-index: 9
top: 0
right: -100%
bottom: 0
transition: .5s all
#filter-box.display
right: 0
overflow-y: scroll
transition: .5s all
I can provide website for example if need to
The error will appear whenever the size width went down to >990px
comment or remove both html and body property overflow property in css
html {
/* overflow-x: visible; */
}
body {
/* overflow: visible; */
}
I'm making progress bar with CSS. I want to make the end of the section inside the bar oblique. How can I do as pictured?
.progress-bar{
height: 34px;
background: #0C0C0C;
display: flex;
flex: 1 auto;
width: 100%;
position: relative;
}
.progress-bar div{
width: 69%;
background: #1EA614;
height: 100%;
}
.progress-bar div span{
position: absolute;
font-size: 24px;
width: 100%;
left: 0;
justify-content: center;
align-items: center;
display: flex;
height: 100%;
}
<div class="progress-bar">
<div>
<span>Level 5</span>
</div>
</div>
Here is a simplified version with less of code where you can easily control the curve, the color and the percentage of the progress
.progress-bar {
--s:20px; /* define the curve (make bigger to increase the curve, smaller to reduce)*/
--p:50; /* percentage of the progress without unit */
--c:#1EA614; /* color */
height: 34px;
line-height:34px;
background:
linear-gradient(to bottom right,var(--c) 49%,transparent 50%)
calc(1%*var(--p) + var(--p,0)/100*var(--s)) 0 / var(--s) 100%,
linear-gradient(var(--c) 0 0)
0 / calc(1%*var(--p)) 100%,
#0C0C0C;
background-repeat:no-repeat;
text-align: center;
font-size: 24px;
color:#fff;
margin:5px;
}
<div class="progress-bar">
Level 5
</div>
<div class="progress-bar" style="--p:30;--c:red;--s:10px">
Level 5
</div>
<div class="progress-bar" style="--p:70;--c:lightblue;--s:40px">
Level 5
</div>
<div class="progress-bar" style="--p:100;--s:40px">
Level 5
</div>
You could use a gradient to accomplish this, as I do below.
The only line that I've changed is
background-image: linear-gradient(105deg, #1EA614 0%, #1EA614 85%, transparent 85%);
Essentially, we declare a gradient background that's on an angle which roughly lines up with the photo you gave. Then, we set the stops like so:
At 0% (all the way to the left) it's fully green;
85% of the way through we ensure that it's still fully green. This means that there is no graduation between the original green and the black, and thus that we get a sharp transition.
85% of the way through (so directly after) we make it black. Because this is so close to the previous stop, the transition between them is instant, and we get the effect you're looking for.
Note that this number, 85%, does need some tweaking to make sure that the cutoff is the same all of the way through.
Here's your demo again, but with this code added in. I've also added an animation, so that you can see it works at all width stages of the bar.
.progress-bar{
height: 34px;
background: #0C0C0C;
display: flex;
flex: 1 auto;
width: 250px;
position: relative;
}
.progress-bar div{
width: 100%;
background-size: cover;
background-position: -250px 0;
background-repeat: no-repeat;
background-image: linear-gradient(105deg, #1EA614 0%, #1EA614 96%, transparent 96%);
height: 100%;
animation: bar 2s linear infinite;
}
.progress-bar div span{
position: absolute;
font-size: 24px;
width: 100%;
left: 0;
justify-content: center;
align-items: center;
display: flex;
height: 100%;
}
#keyframes bar {
0% {
background-position: -250px 0;
}
100% {
background-position: 0 0;
}
}
<div class="progress-bar">
<div>
<span>Level 5</span>
</div>
</div>
If you're having issues with it not filling the entire bar, you could try just moving the gradient across the bar, rather than changing the bar's width. I've updated my example to do this.
References:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
.progress{
height: 34px;
background: #0C0C0C;
display: flex;
flex: 1 auto;
width: 100%;
position: relative;
}
.progress .progress-bar{
width: 60%;
background: #1EA614;
height: 100%;
position: relative;
overflow: hidden;
}
.progress span{
position: absolute;
font-size: 24px;
width: 100%;
left: 0;
justify-content: center;
align-items: center;
display: flex;
height: 100%;
}
.progress .progress-bar:after{
content: "";
position: absolute;
top: -1px;
right: -6.5px;
height: 115%;
width: 13px;
background: #0C0C0C;
transform: rotate(20deg);
}
<div class="progress">
<div class="progress-bar"></div>
<span>Level 5</span>
</div>
I'm trying to create a frosted glass effect on a non-rectangular element but it's not working out. I'm experiencing an odd issue that I can't seem to wrap my head around...
The frosted glass effect is easy to accomplish by setting a fixed background-image on the document body, adding a partially transparent background color to the element and creating a ::before pseudo element with the same fixed background-image and applying a blur filter. Like so:
body {
background: url(bg-lanterns.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
}
main::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg-lanterns.jpg) 0 / cover fixed;
filter: blur(10px);
}
Creating a non-rectangular element is also easy by using clip-path like this:
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
But trying to combine these two effects breaks the stacking order and causes the ::before element to appear above the white background.
I get the same result in Chrome and Firefox so I'm wondering if this is the expected behavior and I'm simply doing something wrong... Can anybody shed some light on what is happening here?
Here's a live demo:
body {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
main::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
}
<main></main>
According to the specification for clip-path:
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.
I managed to achieve the desired effect by adding the white color to an ::after pseudo element and clipping both pseudo elements instead of the element itself.
body {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
}
main::before,
main::after {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
main::before {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
}
main::after {
background: rgba(255,255,255,0.7);
}
<main> <span> test </span> </main>
I'm trying to produce a pure-CSS parallax effect following the approach from this post. It mostly works; however, there are some artifacts when the parallaxed elements are not full-width.
In the snippet below, the hero element (with specified dimensions) is meant to scroll more slowly than the rest of the page. The container's perspective-origin points exactly to the middle of the hero element, so applying transform: translateZ(-1px) scale(2); to the hero should not move it at all. But it does produce a horizontal shift of a few pixels. (Vertical position is fine.)
Why does this happen, and how to fix it?
.container {
height: 500px;
background: #eee;
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
perspective-origin: 50% 171.5px;
}
.hero {
background: url('http://via.placeholder.com/1256x343');
height: 343px;
margin-left: auto;
margin-right: auto;
transform: translateZ(-1px) scale(2);
max-width: 1256px;
}
.main {
background: rebeccapurple;
height: 2000px;
margin-left: auto;
margin-right: auto;
max-width: 1256px;
}
<div class="container">
<div class="hero"></div>
<div class="main">Scroll me down</div>
</div>
This layout is based on the hero element being perfectly centered on the container.
Then, perspective-origin-x: 50% will work ....
But, as long as you have a scroll bar on the right side, the content-box size is no longer the same in container and hero, and it misses the alignment.
Take a look at this post for more details and a solution that may be could work in your case
html,body{
margin: 0;
height: 100%;
overflow: hidden;
background: #000;
}
#wrapper1{
width: calc(100% + 17px);
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
#wrapper2{
width: 100%;
height: 100%;
perspective: 1px;
perspective-origin: calc(100% - 17px) center;
overflow-y: scroll;
}
#wrapper3{
width: 100%;
max-width: 100vw;
transform-style: preserve-3d;
}
.parallax_layer1{
transform-origin: 100% center;
transform: translateZ(-.4px) scale(1.4); /* scale=1-translateZ/perspective */
z-index: -1;
position: relative;
}
section{
background: #111;
height: 50vh;
box-shadow: 0 0 50px rgba(0,0,0,0.7);
width: 100%;
}
img{
width: 100%;
height: 80vh;
margin: -5vh 0;
object-fit: cover;
}
I am confused by the size of the margins in this example on chrome (v 56.0.2924.87 as of posting)
<div class='a'><div class='b'></div></div>
Here is the simple css:
.a {
position: absolute;
width: 100px;
height: 400px;
background-color: red;
overflow-y: scroll;
}
.b {
position: absolute;
top: 0;
left: 0;
height: 4000px;
width: 100%;
background-color: pink;
transform-origin: 50% 0%;
transform: scale( 0.25 );
margin-top: 20px;
margin-bottom: 20px;
}
http://codepen.io/jedierikb/pen/EZRZbx?editors=1100
Some questions:
Why is the top margin different from the bottom margin? The top margin takes up 20px while the bottom just a few pixels.
Why isn't the top margin scaled? I expected the margin value of 20px to be scaled just like the content.
What value would I used for the bottom margin to make it the same as the top margin?