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>
Related
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;
}
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
.fullscreen {
height: 100%;
width: 100%;
background: no-repeat url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg') center / cover;
}
.line_horiz {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.line_vert {
position: absolute;
width: 100%;
height: 3px;
background-color: rgba(255, 255, 255, 1);
top: 20%;
left: 0;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line_vert"></span>
<span class="line_horiz"></span>
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
As the horizontal and vertical lines are styling rather than informational content one suggestion is to remove them from the body of the HTML and instead create them using linear gradients on the background of the fullscreen element. That way they don't for example get looked at by screen readers. Also, using linear gradients means we can have 'gaps' in the lines where we want them.
This snippet just does the calculation of the gap for the btn element as the logo element has background white so it doesn't matter that the 'line' goes right across. If this changes then put in a linear gradient with gap calculations in a similar way to that done for the btn.
Note, box-sizing with content has been used and explicitly stated (so borders are included in the calculations and padding is set to zero) in case it has been altered elsewhere in the code.
body {
width: 100vw;
height: 100vh;
}
.fullscreen {
/* set up some variables to make it easier to change things later if you want to */
--logoMid: calc(20% - var(--borderW));
--btnW: 100px;
--btnMid: 50%;
/* position from the top to the middle of the btn */
--borderW: 3px;
--btnTop: calc(var(--btnMid) - (var(--btnW) / 2) - (var(--borderW) / 2));
/* actual position of top of btn element */
--btnBottom: calc(var(--btnTop) + var(--btnW) + var(--borderW));
box-sizing: content-box;
height: 100%;
width: 100%;
background-image: linear-gradient(white 0%, white var(--btnTop), transparent var(--btnTop), transparent var(--btnBottom), white var(--btnBottom), white 100%), linear-gradient(to right, white 0, white 100%), url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg');
background-size: var(--borderW) 100%, 100% var(--borderW), cover;
background-position: calc(var(--btnMid) - (var(--borderW) / 2)) 0, 0 var(--logoMid), center top;
background-repeat: no-repeat no-repeat;
margin: 0;
padding: 0;
position: relative;
}
.logo-img {
box-sizing: content-box;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.btn {
box-sizing: content-box;
margin: 0;
padding: 0;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
box-sizing: content-box;
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
Note: run the snippet in full screen as there won't be enough room to show the gap between the logo and btn on the small snippet viewport.
Here is my solution, Its not perfect, but it will give you a good starting points.
I have changes your HTML structure, by removing the divs that create the lines, Instead, I have used pseudo selectors to draw the lines.
Note that, you will have to tweak some of these numbers to properly fit your content.
Please run the example in full screen mode
.fullscreen {
height: 100vh;
width: 100%;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center/cover;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 100px;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.logo-img:before {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
left: 130px;
display: block;
}
.logo-img:after {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
right: 130px;
display: block;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
padding: 20px;
box-sizing: border-box;
}
.btn .inner {
width: 100%;
height: 100%;
background: white;
}
.btn:after {
content: "";
display: block;
width: 3px;
height: calc(50vh - 48px);
background: #ffffff;
position: absolute;
top: 100%;
left: 50%;
}
.btn:before {
content: "";
display: block;
width: 3px;
top: calc(-50vh + 220px);
background: #ffffff;
position: absolute;
bottom: 100%;
left: 50%;
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn">
<div class="inner"></div>
</div>
</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/
I'm trying to center an element with percent, but it don't work! Have I missed something or is the way I'm doing it impossible?
When I'm using this setting, the element is almost touching the top of the browser area.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
}
Because everything is in %, you should just define width + height and top + left positions, not margin:
.modal-box {
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
JsFiddle: http://jsfiddle.net/ghorg12110/ob29nn2u/
html,
body {
width: 100%;
height: 100%;
}
.modal-box {
background-color: red;
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
<div class="modal-box"></div>
Instead of margins, use a transform. This will center the box regardless of height/width.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
background: red;
transform: translate(-50%, -50%);
}
<div class="modal-box"></div>
If you want to center with percents, you will need to know the width of an element.
so say modal-box was 300px wide, you would do something like this:
.modal-box{
width:300px;
position:fixed;
left:50%;
margin-left: -150px; /*1/2 of your divs width*/
}
Why are you adding
margin-top: -25%;
margin-left: -25;
That negates the position: fixed of what you were trying to achieve. Remove those two lines and you will see how you can have your fixed position of the element.
If you want it relative to the viewport (irrespective of parent), then make use of the viewport-relative-lengths
.modal-box {
border: 1px solid #000;
position: fixed;
z-index: 1000;
width: 50vw; height: 50vh;
top: 50vh; left: 50vw;
margin-top: -25vh; margin-left: -25vw;
}
<div class="modal-box"></div>
I need to make a div that looks like this:
With text in the middle in css. I tried looking at transforms and other 3d stuff, but I couldn't figure it out, especially without ruining the text.
You can use a skewed Y pseudo element as a background of the element. This won't affect the content :
div {
position: relative;
display: inline-block;
padding: 20px 50px;
overflow: hidden;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FFD505;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: skewY(5deg);
-ms-transform: skewY(5deg);
transform: skewY(5deg);
z-index: -1;
border-radius: 10px 10px 0 0;
}
<div>Some text</div>
The div has overflow:hidden so that the overflowing parts of the pseudo-element are hidden.
The pseudo element has a negative z-index so it stacks behind the content of the div
The transform-origin is set to 0 0 so that top left of the skewed pseudo element doesn't move.
you could use a skew'ed pseudo element for this, which ensures the text won't be skewd as well:
.wrap {
height: 100px;
width: 400px;
position: relative;
overflow: hidden;
padding-top: 30%;
}
.wrap:before {
content: "";
position: absolute;
border-radius: 5px;
height: 100%;
width: 100%;
left: 0;
top: 20%;
background: tomato;
transform: skewY(5deg);
z-index: -2;
}
<div class="wrap">hello
</div>