Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
How can I put one button in the center of a web page?
(just with CSS codes)
use position: fixed and then
top: 50%;
left: 50%;
It will move the left top corner of button to the center of screen.
Use transform: translate(-50%, -50%) to move the button to left by 50% of it's width, and up by 50% of it's height;
#erfan_bp99 this can be done with simple CSS.
button {
position: fixed;
top: 50%;
left: 50%;
/*Some extra styleing goes under this comment*/
padding: 15px;
cursor: pointer;
}
CodePen https://codepen.io/Mastercodetech/pen/BaWoBrq
You can just use
position: fixed;
top: 50%;
left: 50%;
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
I declare an absolute component inside a relative component. When I try to set the width as width: 870px it works.
But when I try to set width in per cent as width: 80% or using calc as width: calc(100% - 20px); the width does not change. Please guide me on how to use per cent for absolute components.
Here is my styled component code:
export const StyledFooter = styled.div`
width: 100%;
position: relative;
`;
export const EnrollContainer = styled.section`
position: absolute;
width: calc(100% - 20px);
max-width: 870px;
padding: 80px 120px;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
`;
Here is the JSX part:
return(
<StyledFooter>
<EnrollContainer>Hello</EnrollContainer>
</StyledFooter>
)
You have to set width of the parent (relative one), else it could not do a percentage on a unkown width parent
#relative{
position:relative;
width:150px;
border:2px solid black;
}
#absolute{
position:absolute;
width:50%;
border:2px solid red;
}
<div id="relative">
<div id="absolute"></div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 months ago.
Improve this question
How should I animate text (with writing-mode set to vertical-rl) background in CSS to increase its height when you hover over it? Something like this: https://youtu.be/A_ZS3aE_8Bw
Thanks!
#text {
--width: 2rem;
font-size: var(--width);
writing-mode: vertical-rl;
position: relative;
}
#text::before {
content: "";
position: absolute;
width: var(--width);
height: 0;
background-color: red;
z-index: -1;
transition: all 0.3s ease-in-out;
}
#text:hover::before {
height: 10rem;
}
<div id="text">hello world!</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
i want to code a box like this
and completely using css and other web language ,
not the thing like svg ,
is it possible ?
it is simple when it's cuppy
but the problem is when convex
may some one help me?
The .rect::after has border-radius: 50% and a very long white shadow that will be visible only inside the .rect since the .rect element has overflow:hidden.
For the rect's shadow I'm using filter:drop-shadow(1px 1px 3px #000)
.rect {
position: relative;
height: 100px;
width: 300px;
margin:2em auto;
overflow:hidden;
filter:drop-shadow(1px 1px 3px #000)
}
.rect::after {
content: '';
border-radius: 50%;
background:transparent;
box-shadow: 0 0 0 60vw white;
display: block;
width: 100%;
height: 50px;
position: absolute;
left: 0px;
bottom:-25px;
}
<div class="rect"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
is possible to draw CSS shape like (Not necessarily exact):
Thanks
it will be much better with SVG I think, or just using photoshop to make a .png
But using css for sure you can do it
.the1 {
position: fixed;
background-color:white;
width:100%;
left: -15%;
height:100%;
top: 12%;
border-top-left-radius:50%;
border-top-right-radius:100%;
}
.the2 {
position: fixed;
background-color: white;
width:100%;
left: 15%;
height:100%;
top: 12%;
border-top-left-radius:100%;
border-top-right-radius:10%;
}
.the3 {
position: fixed;
background-color: red;
width:50%;
left: 52%;
height:32%;
top:3%;
border-bottom-left-radius:100%;
border-bottom-right-radius:50%;
}
body{
background: red;
}
<div class="bg">
<div class="the1">
</div>
<div class="the2"></div>
<div class="the3"></div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How to make border-bottom inside block after hover event?
I tried this using text-shadow, but seems it is not solution
An inset box shadow seems to be what you require
div {
height: 75px;
background: #c0ffee;
}
div:hover {
box-shadow: inset 0 -5px 0 red;
}
<div></div>
OR
Use a pseudo-element
div {
height: 75px;
background: #c0ffee;
position: relative;
}
div:hover::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 5px;
background: red;
}
<div></div>