Right now I have this background for my page:
body {
margin: 0;
padding: 0;
background-color: #fff;
background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #c8cecf 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
}
It just makes the style of a “notepad”.
Now the problem is i´m doing a media querie for mobile and I want this blue line to “dissapear”:
Is there any way to “move” the background image to the left so only the right notepad style will appear, and the line won´t appear?
Cool idea to recreate actual notepad look. You could just remove the vertical line gradient from the body in the media query like so:
@media (max-width: 1000px) {
body {
background-image: linear-gradient(#eee .1em, transparent .1em);
}
}
Of course if you want it animated you’ll have to do something else. Maybe something like this:
@media (max-width: 1000px) {
body {
background-position: left -81px top 0;
transition: background-position 200ms ease-in-out;
}
}
Unfortunately this isn’t a very performant way, as you can tell by laggy animation. Smoothest way to move things is by using transform property, but that doesn’t work for background images I think. One workaround I can think of is by adding another absolute-positioned element, or using a pseudo-element, and putting that vertical line gradient on it. Then you can use transform: translate on it to move it to the left in the media query. Edit: here you go: https://codepen.io/ArtemPetrov/pen/MMEENw
A little faster? Hard to say.
1 Like
What about playing with z indexes of the notepad elements?
1 Like
