I wanted to make a format divided into two parts with the shape of curves, only the background visual, with different colors and without affecting the position of any element.
EXAMPLE
I wanted to do something like this, I remember having seen something similar using linear or radial gradient but I can't find it, it's just for the background without applying any kind of division or border
I think you can make something like
wave background but just rotate it.
<section>
<!-- content here -->
<div class="curve"></div>
</section>
section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-height: 400px;
padding-top: 100px;
background: #3c31dd;
}
.curve {
position: absolute;
height: 250px;
width: 100%;
bottom: 0;
text-align: center;
}
.curve::before {
content: '';
display: block;
position: absolute;
border-radius: 100% 50%;
width: 55%;
height: 100%;
transform: translate(85%, 60%);
background-color: hsl(216, 21%, 16%);
}
.curve::after {
content: '';
display: block;
position: absolute;
border-radius: 100% 50%;
width: 55%;
height: 100%;
background-color: #3c31dd;
transform: translate(-4%, 40%);
z-index: -1;
}
Related
Please see this minimum example
.container {
position: relative;
width: 200px;
height: 200px;
border: 3px solid gray;
overflow: scroll;
}
.box {
width: 100%;
height: 800px;
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
.loading-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
opacity: 0.5;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="loading-cover">
Loading
</div>
<div class="box"></div>
</div>
I want to fix the white overlay when scrolling.
I've tried inset: 0 or width: 100%;height:100%; on loading-cover, but no luck.
position: sticky; is also unusable in this case because it sticks to the window viewport, not the scrollable container.
Is there any way I can solve this problem?
This might not be the shortest path to a solution, but it does work. It might hold up in cross-browser testing if you don't need to support IE.
This is using a loading class on the container that applies a sticky ::before pseudo-element, with a negative bottom margin to make the content pop up underneath it. A little goofy, but it's a weird situation. I also removed some unnecessary width values and changed overflow to overflow-y, which may or may not be useful in your situation.
With this, you could turn on and off the "Loading" message by adding or removing the class to the container.
.container {
position: relative;
width: 200px;
height: 200px;
border: 3px solid gray;
overflow-y: scroll;
}
.box {
height: 800px;
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
.container.loading::before {
position: sticky;
top: 0;
height: 200px;
margin-bottom: -200px;
background: white;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
content: 'Loading';
}
<div class="container loading">
<div class="box"></div>
</div>
I have a simple css styling question. I've been trying to create this effect on a background to match a design but i just can't seem to get it right.
Here is what I have
And here is the design
does anyone have any tips to help me create that background effect? any help would be appreciated.
My code right now, if it helps:
.backgroundOverlay {
background-image: url('../images/background-pattern.png'), linear-
gradient(to bottom right, rgba(0,118,255,0.8), rgba(0,197,255,0.8));
/* opacity: 0.3; */
height: 100vh;
width: 100vw;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
/* padding: 15vw 5vw; */
}
The background image is just a repeated .png file
Thank you in advance
Use this:
.container{
width: 100%;
height: 300px;
border: 1px solid #000;
position: relative;
}
.container .content{
position: absolute;
z-index:999;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.container::after{
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index:99;
background-image: url("path/to/yourfile.png");
background-size: repeat;
opacity: 0.4;
}
<div class="container">
<div class="content">
<img src="path/to/your/upper_frame.png" />
</div>
</div>
is it possible to create this patern in css with responsive design, so that background line is always at the right position and the right height no mather how big the size of the window is.
You can use pseudo-elements to create this, but to create perfect responsive circle you can use vh units on both height and width of circle. Then you can just use position: absolute and transform: translate() to position pseudo-elements.
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.circle {
position: relative;
width: 60vh;
height: 60vh;
border-radius: 50%;
background: #E54B4B;
}
.circle:before,
.circle:after {
content: '';
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.circle:before {
transform: translate(-50%, -50%);
width: 100vw;
background: #B65657;
height: 20vh;
z-index: -1;
}
.circle:after {
height: 20vh;
width: 20vh;
background: white;
}
<div class="circle"></div>
I'm trying to position the logo to the center of the header div with half of the logo overflowing to the bottom div. I have the following but I can't figure out how to dynamically set it to be centered. Because relying on top and left values seems like it's going to be inconsistent.
.header {
position: relative;
height: 200px;
background-color: #000;
&:after {
z-index: 2;
content: ' ';
position: absolute;
left: 27%;
top: 60%;
width: 200px;
height: 200px;
background-image: url('images/logo.png');
}
}
You can use left: 50% with negative margin-left (half of logo width).
.header {
background-color: #000;
position: relative;
height: 200px;
}
.header:after {
margin-left: -100px;
position: absolute;
background: #f00;
bottom: -100px;
height: 200px;
width: 200px;
content: ' ';
z-index: 2;
left: 50%;
}
<div class="header"></div>
May I suggest flexbox?
Centering logic will be handled for you, then you just need to make sure the background image is positioned correctly.
.header {
background-color: #000;
height: 200px;
position: relative;
&:after {
content: '';
height: 100%;
display: flex;
background: url('http://i.imgur.com/9My4X1v.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
}
https://jsfiddle.net/JackHasaKeyboard/9azLwx22/10/
Im using an image sprite with transparency which im applying to pseudo content. I need a coloured rounder border around the image.
This is what I have so far:
http://codepen.io/anon/pen/bpmGaz
<div class="icon"></div>
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
However I need it to look like this:
I can do this with additional pseudo content (see below) but the code is getting a bit messy. Is there a shorter way to do this?
http://codepen.io/anon/pen/VaEwQy
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
I tried using the outline property however sadly it doesn't work cross browser with border-radius.
Adding this code to your pseudo-element seems to do the trick:
border: 50px solid gold;
border-radius: 100%;
http://codepen.io/anon/pen/aNRzmE