This question already has answers here:
CSS Fixed position with Auto Margin
(3 answers)
Closed 7 years ago.
I'm currently trying to make an image centered above login form..
here's the CSS code
.circular {
position: fixed;
top: 0;
right: 0;
left: auto;
bottom: auto;
display: block;
margin: 0 auto;
width: 150px;
height: 150px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url("images/chris.jpg") no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .9);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .9);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .9);
}
Still cannot achieve this.
Because your element has a fixed width, you can simply use css calc for it.
.circular {
position: fixed;
top: 0;
left: calc(50% - 75px);
display: block;
width: 150px;
height: 150px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url("images/chris.jpg") no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .9);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .9);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .9);
}
If I understand it correctly, and like the comment from #ohAuth said, a little bit more context would be nice. But you want the center of the image, to be at the center of the cirkel?
You could do that by:
replacing this:
.circular {
position: fixed;
top: 0;
right: 0;
left: auto;
bottom: auto;
display: block;
margin: 0 auto;
width: 150px;
height: 150px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url("images/chris.jpg") no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .9);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .9);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .9);
}
With this:
.circular {
position: fixed;
top: 0;
right: 0;
left: auto;
bottom: auto;
display: block;
margin: 0 auto;
width: 150px;
height: 150px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url("images/chris.jpg") no-repeat center center;
box-shadow: 0 0 8px rgba(0, 0, 0, .9);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .9);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .9);
}
More specific:
This:
background: url("images/chris.jpg") no-repeat;
With this:
background: url("images/chris.jpg") no-repeat center center;
That should put the image in the center.
Let me know if it works :)
Related
This question already has answers here:
Responsive CSS triangle with percents width
(7 answers)
Closed 6 months ago.
I need to create the following form in CSS I tried it with after but I can't get the same result, can someone help me please.
Shape
.login-card{
position: absolute;
width: 394px;
height: 682px;
left: calc(50% - 394px/2);
top: 64px;
/* surface */
background: #FFFFFF;
/* 04 dp */
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.login-card:after {
content: "";
position: absolute;
top: 100%;
width: 60px;
height: 0;
border-style: solid;
border-width: 86px 197px 0 197px;
border-color: red transparent transparent transparent;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}
<div class="login-card">
</div>
You could use a combination of clip-path and calc() to create the shape in the main element and use some padding to prevent content from falling into the triangle shape.
The main issue with this approach is the loss of the box-shadow when using clip-path but this can be fixed using CSS filters, as per this article: https://css-tricks.com/using-box-shadows-and-clip-path-together/
Here's this approach in action on your example:
.login-card {
--triangle-size: 100px;
position: absolute;
width: 394px;
height: 682px;
left: calc(50% - 394px/2);
top: 64px;
background: #fff;
border-radius: 10px 10px 0 0;
padding-bottom: var(--triangle-size);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--triangle-size)), 50% 100%, 0 calc(100% - var(--triangle-size)), 0 0);
}
/** Restore the shadows */
.login-card-wrap {
filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
}
<div class="login-card-wrap">
<div class="login-card"></div>
</div>
Use clip-path and filter instead of box-shadow on the parent and it will follow the shape.
.login-card {
position: relative;
width: 394px;
height: 682px;
left: calc(50% - 394px/2);
top: 64px;
/* surface */
background: #FFFFFF;
/* 04 dp */
filter: drop-shadow(0px 1px 5px rgba(50, 50, 0, 0.5));
border-radius: 10px 10px 3px 3px;
}
.login-card:after {
content: "";
position: absolute;
top: 100%;
background: #fff;
width: 100%;
height: 100px;
clip-path: polygon(0 0, 48% 100%, 99% 0);
}
<div class="login-card"></div>
I am trying to get a div(main) to sit centred withing another div(centre), the div(main) needs to be static as I don't want it to scroll but the div(centre) has to be absolute so it can sit on a separate div with an onclick function.
current HTML and css:
<div className='meal_popup'>
<div className='meal_popupElement'>
<p>testing1</p>
</div>
<div onClick={this.mealOne_boxClickHandler} className='meal_popupBackground' />
</div>
.meal_popup {
position: fixed;
display: flex;
align-items: center;
top: 0;
width: 100%;
height: 100%;
z-index: 30;
}
.meal_popupElement {
position: absolute;
width: 100%;
height: 100%;
background: white;
border-radius: 15px;
height: 35rem;
margin-left: 1rem;
margin-right: 1rem;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
z-index: 2;
}
.meal_popupBackground {
position: relative;
background: rgba(00, 00, 00, 0.6);
width: 100%;
height: 100%;
z-index: 1;
}
Result:
Goal:
(this visually looks how I want but the problem is the whole div is clickable and only want that function on the background HTML and css:)
<div onClick={this.mealTwo_boxClickHandler} className='meal_background'>
<div>
<p>testing2</p>
</div>
</div>
.meal_background {
position: fixed;
display: flex;
align-items: center;
top: 0;
width: 100%;
height: 100%;
background: rgba(00, 00, 00, 0.6);
z-index: 30;
}
.meal_background div {
background: white;
border-radius: 15px;
height: 35rem;
width: 100%;
margin-left: 1rem;
margin-right: 1rem;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
To center any element with position property different than static, you can use the following code. However, be clear that the following code takes slightly more CPU time than other methods;
To center Horizontally
left:50%;
transform: translateX(-50%);
To center vertically
top: 50%;
transform: translateY(-50%);
And particularly for this answer apply right: 0px; on the container with fixed positioning and also apply the code to center horizontally on the element you want to center.
So the problem appears to be with setting left a or right margin values at the edge to create a space either side like I normally would. so instead of width 100% and 1rem left/right margin (which id use as is great for scaling. I had set a preset width and implement the code above provided by #RitanshuSingh.
so my code looks like this:
.meal_popup {
position: fixed;
display: flex;
align-items: center;
top: 0;
width: 100%;
height: 100%;
z-index: 30;
}
.meal_popupElement {
position: absolute;
width: 90%;
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 15px;
height: 35rem;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
z-index: 2;
}
.meal_popupBackground {
position: relative;
background: rgba(00, 00, 00, 0.6);
width: 100%;
height: 100%;
z-index: 1;
}
preferably would like to select a margin but this works for now if you know how to get that working please post a fix.
result:
I need to make this clock responsive when i change screen resolution meaning put the clockwise in the middle of the clock and not moving during rotation
.clock{ width: 500px;
height: 500px;
border-radius:100%;
margin: auto;
background:#333 ;
border:22px solid rgb(41, 25, 25) ;
position:relative;
box-shadow:0 5px 0 0 rgba(0, 0, 0, .3),inset 0 35px 0 0 rgba(0, 0, 0, .3), inset 0 0 0 214px #c33;
}
.hour{
position: absolute;
top: 87px;
left: 822.5px;
width: 35px;
height: 198px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 198px 0 0 #333;
transform: rotate(150deg);
transform-origin: bottom;
}
.minutes{
position: absolute;
top: 115px;
left: 822.5px;
width: 35px;
height: 170px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 170px 0 0 #333;
transform: rotate(150deg);
transform-origin: bottom;
}
<div class="clock"></div>
<div class="hour" id="hour"></div>
<div class="minutes" id="minute"></div>
</div>
Try this code
.clock {
width: 500px;
height: 500px;
border-radius: 100%;
margin: auto;
background: #333;
border: 22px solid rgb(41, 25, 25);
position: relative;
box-shadow: 0 5px 0 0 rgba(0, 0, 0, .3), inset 0 35px 0 0 rgba(0, 0, 0, .3), inset 0 0 0 214px #c33;
}
.hour {
position: absolute;
top: 87px;
left: 50%;
width: 35px;
height: 198px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 198px 0 0 #333;
transform: rotate(150deg);
transform-origin: bottom;
}
.minutes {
position: absolute;
top: 41px;
left: 46%;
width: 35px;
height: 170px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 170px 0 0 #333;
transform: rotate(00deg);
transform-origin: bottom;
}
<div class="clock">
<div class="hour" id="hour"></div>
<div class="minutes" id="minute"></div>
</div>
I am trying to create glow effect around the image ,But I get unnecessary margin.Can some one tell me how to remove it.Here is fiddle - https://jsfiddle.net/q2gv5oka/ , hover the image to see margin.
<div id="play"></div>
Below is my css
#play {
background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin: -35px 0 0 -35px;
z-index: 10;
}
#play:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
Your height and width for #play is set to 70px. Set it to the width and height of your image, 62px in this case.
EDIT: Also as Nick Coad mentioned in the comments, your margins would now be set to -31px instead of -35px.
#play {
background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
position: absolute;
top: 50%;
left: 50%;
width: 62px;
height: 62px;
margin: -31px 0 0 -31px;
z-index: 10;
}
#play:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
<div id="play"></div>
yes, the first answer are correct, because your images are smaller than your size, just add background-size:cover or background-size:contain to fit exactly.
#play {
background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
position: absolute;
background-size:cover;
top: 50%;
left: 50%;
width: 62px;
height: 62px;
margin: -35px 0 0 -35px;
z-index: 10;
}
#play:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
<div id="play"></div>
You can try below code. Set the background-size to 100%.
html code
<div id="play"></div>
css code
#play {
background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
background-size:100%;
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin: -35px 0 0 -35px;
z-index: 10;
}
#play:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
View demo here
I have code below. It has several divs and css code. The image pic size is about 45kb,small size. So, I want to know, should I use img directly or use the code below. Which one has the faster speed when page loading. Appreciate.
div.smileyface {
width: 300px;
height: 300px;
position: relative;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
display: block;
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}
p.eyes {
width: 50px;
height: 80px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: 40px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
p.eyes.lefteye {
left: 75px;
}
p.eyes.righteye {
right: 75px;
}
div.smile {
width: 200px;
height: 70px;
border: 10px solid #222;
border-top: 0;
background: rgba(0,0,0,0);
-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
border-radius: 0 0 120px 120px / 0 0 90px 90px;
position: absolute;
bottom: 50px;
left: 38px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
div.corner {
width: 10px;
height: 30px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: -12px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
left: -12px;
}
div.corner.right {
left: 202px;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
}
<div class="smileyface">
<p class="eyes lefteye"></p>
<p class="eyes righteye"></p>
<div class="smile">
<div class="corner"></div>
<div class="corner right"></div>
</div>
</div>
According to YSlow, it is a best practice to Minimize HTTP Requests: use CSS sprites, avoid CSS images, combine files etc.
The overall goal should in the end be to optimize page weight, though.
Since the image is 45KB in this case, I would recommend the CSS solution - it is 2148 chars, which is 2KB. If all CSS is in one file, the CSS solution will save you 43KB and 1 HTTP request.
The CSS Solution might get even smaller with a tool such as FormatCSS and by minification.
45KB sounds like a very big file, unnecessary big even. Optimize Images could also be considered.
Here is a detailed explanation of what to use when. Hope it helps:
When to use IMG vs. CSS background-image?