I'm trying to add kind of "radial box shadow" to a div.
I use a ::before pseudo-element and Z-index to achieve it.
See a simplified fiddle here.
Problem : while it works fine when the element's position is either relative or absolute, the z-index rule doesn't seem to apply when position is set to fixed.
Any idea how to make this work?
.statusBar {
position: absolute;
/*chnaging this to fixed will break the z-index*/
background: #FCFCFC;
width: 90%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
border: 0.5px solid grey;
}
.statusBar::before {
content: "";
position: absolute;
z-index: -1;
width: 96%;
top: 0;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}
<div class="statusBar">
<span>Some</span>
<span>content</span>
</div>
just wrap your statusBar to a div with the property of position: fixed. And make statusBar as position: relative.
<div class="container">
<div class="statusBar">
<span>Some</span>
<span>content</span>
</div>
</div>
.container{
position: fixed;
width: 100%;
}
.statusBar {
position: relative; /*chnaging this to fix will */
background: #FCFCFC;
width: 90%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
border: 0.5px solid grey;
}
.statusBar::before {
content: "";
position:absolute;
z-index: -1;
width:96%;
top: 0;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow:0 0 18px rgba(0,0,0,0.6);
}
Hope this helps.
Related
I need to make a realistic 3d shadow that looks like the container is standing. Just like the image shows.
Instead of box-shadow, it can be implemented with a pseudo-element like ::before.
This is an over simplified example, but hopefully it will help as a reference.
Example:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 30px;
}
div {
position: relative;
isolation: isolate;
}
figure {
overflow: hidden;
border-radius: 20px;
z-idnex: 10;
height: 200px;
}
div::before {
content: "";
position: absolute;
left: 2px;
right: 2px;
bottom: 2px;
height: 9px;
borderradius: 25px;
filter: blur(6px);
background-color: #000;
z-index: -1;
}
<section>
<div>
<figure>
<img src="https://picsum.photos/200" />
</figure>
</div>
</section>
you can do that by using :pseudo-element, than add box shaddow to it, for example
style.css
.container {border: 5px solid black;
width: 160px;
height: 100px;
border-radius: 20px;
position: relative;
}
.container:after {
position: absolute;
bottom: -2px;
width: 100%;
box-shadow: 2px 3px 12px 1px rgba(0,0,0,0.75);
}
index.html
<div class="container"></div>
I'm trying to implement a zoom in/out functionality, just like you would have on a document editor like google docs or any word processor application. The problem I'm having is that I cannot keep the "document" centered and also be able to scroll all of its parts into view. Here is a small demonstration of the problem: https://codepen.io/liviu_vasut/pen/dyGbwwO
document.getElementById('objectToScale').style.transform = "scale(3)";
.container {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
width: 300px;
height: 200px;
border: 1px solid #000000;
left: 0px;
top: 0px;
margin: 10px;
overflow: auto;
}
.object {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
background-color: grey;
border-radius: 25px;
padding: 5px;
transform-origin: center;
transform: scale(1);
}
<div class="container">
<div id="objectToScale" class="object">x</div>
</div>
Thanks for your time.
You scale only some inner element inside the whole box, but expect see the whole box scaled. if you want to scale the white padding and all the inner content to stay visible (and be able to scroll to) you should add some wrapper inside with width: 100% and height: 100%, and scale it, so the whole content become scaled.
Also, as #HaoWu mentioned, you should set the transform-origin to 0 0.
The final product should look somewhat like this:
var scaled = false;
function toggleScale() {
var objects = document.getElementsByClassName('wrapper');
for (var i = 0; i < objects.length; i++) {
objects[i].style.transform = scaled ? 'scale(1)' : 'scale(3)';
}
scaled = !scaled;
}
.container {
width: 300px;
height: 200px;
border: 1px solid #000000;
left: 0px;
top: 0px;
margin: 10px;
overflow: auto;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
padding: 5px;
transform-origin: 0 0;
}
.object {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
background-color: grey;
border-radius: 25px;
padding: 5px;
transform-origin: center;
transform: scale(1);
}
<input type="button" onclick="toggleScale()" value="Toggle Scale" />
<div class="container">
<div class="wrapper">
<div id="objectToScale" class="object">x</div>
</div>
</div>
Actually, use the transform-origin: 0 0; and manually set the scrollbar to the center:
var scaled = false;
function toggleScale() {
[...document.getElementsByClassName('object')].forEach(e => {
e.classList.toggle('scaled');
e.parentElement.scrollTop = (e.parentElement.scrollHeight - e.parentElement.clientHeight) / 2;
e.parentElement.scrollLeft = (e.parentElement.scrollWidth - e.parentElement.clientWidth) / 2;
});
}
* {
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
width: 300px;
height: 200px;
border: 1px solid #000000;
left: 0px;
top: 0px;
margin: 10px;
overflow: auto;
}
.object {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
background-color: grey;
border-radius: 25px;
padding: 5px;
transform-origin: 0 0;
}
.scaled {
transform: scale(3);
}
<input type="button" onClick="toggleScale()" value="Toggle Scale" />
<div class="container">
<div class="object">cannot see the entire object when scaled</div>
</div>
I want to position a custom button element under it's sibling, so that the sibling's shadow effect will be visible on button. Currently the shadow isn't visible on button, but under it. See code snipped to better understand what I mean by that:
.parent {
position: absolute;
}
.box {
width: 200px;
height: 40px;
background-color: white;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
z-index: 10;
}
.button {
height: 20px;
width: 20px;
background-color: white;
text-align: center;
position: absolute;
right: -20px;
top: 10px;
z-index: 1;
}
<div class="parent">
<div class="box"></div>
<div class="button">x</div>
</div>
Apply position: relative; to .box so that it will support the z-index value without effecting the layout.
.box {
width: 200px;
height: 40px;
background-color: white;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 10;
}
Another option is to change z-index of .button to -1. But it may have other effects in the layout since the element will be positioned behind all other elements.
.button {
height: 20px;
width: 20px;
background-color: white;
text-align: center;
position: absolute;
right: -20px;
top: 10px;
z-index: -1;
}
I'm trying to make a rectangular div that's 95% the width of the viewport and 20% high. But I want another rectangular div inside of that, that is vertically and horizontally centered with a slight2px margin.
.Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
}
It depends upon requirements. But according to question, here is the answer. Please take a look and let me know in case of any issue
.Outer {
width: 95vw;
height: 20vh;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Inner {
border: 1px solid hotpink;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
<div class="Outer">
<div class="Inner"></div>
</div>
Tried to use relative measuring units just in case you are dealing with a responsive design. The .outer box is display: table and the Inner is display: table-cell. They sit perfectly together and the 2px margin your requested is provided by a 2px padding from .Outer
html {
box-sizing: border-box;
font: 500 16px/1.428'Consolas';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100%;
width: 100%;
}
.Outer {
position: absolute;
top: 20%;
left: 3%;
outline: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: table;
padding: 2px;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
display: table-cell;
}
<section class="Outer">
<section class="Inner"></section>
</section>
I'm not 100% this is what your looking for because this has Magic Numbers, but here is a JSFiddle of what I came up with using your provided code.
#Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
position: relative;
}
#Inner {
border: 1px solid hotpink;
width: 95%;
height: 50%;
position: aboslute;
margin-top: 5vh;
margin-left: 2.5vw;
}
<div id=Outer>
<div id=Inner>
</div>
</div>
JSFiddle
Hopefully this helps and you could mess around with it to use percentages on the viewpoints instead of magic numbers.
When I want to center a div vertically, I have a couple classes that help me to do it.
.outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.inner {
border: 1px solid hotpink;
width: 95%;
height: 90%;
margin: auto;
}
.valign-wrap {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.valign-wrap .valign {
display: block;
}
<div class="outer valign-wrap">
<div class="inner valign center"></div>
</div>
JSFiddle
I always recommend add these classes to your projects, they are very useful. Good luck!
I've been battling with this problem for a while and I'd like to ask advice if any of you can help.
I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page.
I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.
My CSS is as follows:
* {
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
border: 5px solid red;
margin-bottom: -16px;
}
body {
background-color: lightblue;
height: 100%;
border: 5px solid blue;
margin: 0 0 -16px 0;
}
.wrapper {
display: block;
position: relative;
background-color: green;
width: 605px;
margin: auto;
height: 100%
}
.header {
display: inline-block;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
I've set borders to html and body just to see that I can stretch them properly, so please ignore those.
You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.
JSFiddle
HTML
<div class="wrapper">
<div class="content">
<div class="header"></div>
</div>
</div>
CSS
.header {
position:absolute;
top:0;
left:0;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
padding-top:120px;
}
Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;