<nav class="offcanvas-menu">
<div class="user-details"></div>
<ul class="test">
<li>content</li>
</ul>
<div class=navfooter>
footer content
</div>
</nav>
i dont know how to get the .navfooter on the bottom of the sidebar. it is allways unter the .test container. i tryed couple of things but its not getting work
these are the styles for it
<style>
.test{
left: 0;
top: 20%;
height: 400px;
width: 200px;
background: #ECF0F1;
-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
}
.navfooter {
position: relative;
bottom: 0;
z-index: 999;
height: 64px;
width: 100%;
background: #1e67cb;
box-shadow: 0 -1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.6);
}
.offcanvas-menu {
position: fixed;
top: 0;
left: 0;
z-index: 1031;
/*visibility: hidden;*/
background: #fff;
border-right: 1px solid #CCC;
width: 250px;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
</style>
Have you tried changing the .navfooter to absolute?
.navfooter {
position: absolute;
bottom: 0;
z-index: 999;
height: 64px;
width: 100%;
background: #1e67cb;
box-shadow: 0 -1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.6);
}
Related
Currently I have a HTML & CSS that results in a page like below
However, I want the shadows above B & C tabs so that it looks like they are behind.
Can anyone hele achieve this?
body {
background-color: rgb(245, 165, 61);
--border-rad: 5px;
}
.wrapper {
width: 80vh;
margin: 5%;
}
.tabs {
display: flex;
justify-content: space-around;
}
.tab {
width: 20%;
color: #000;
background-color: #fff;
margin: 2px 2px 0% 2px;
border-top-left-radius: var(--border-rad);
border-top-right-radius: var(--border-rad);
position: relative;
text-decoration: none;
text-align: center;
}
.tab:before,
.tab:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.tab:before {
left: -20px;
border-radius: 0 0 var(--border-rad) 0;
box-shadow: var(--border-rad) 0 0 0 #fff;
}
.tab:after {
right: -20px;
border-radius: 0 0 0 var(--border-rad);
box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}
.content {
background-color: #fff;
height: 75vh;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
text-align: center;
}
<div class="wrapper">
<div class="tabs">
<span class="tab">A</span>
<span class="tab">B</span>
<span class="tab">C</span>
</div>
<div class="content">content</div>
</div>
You need to temper with the z-index of the different elements. Remember you can only modify the z-index if the element itself has a position set (e.g. position: relative)
Below is a working example. Note that I have also added an "active" class to the currently active tab.
You would need to create JavaScript to make it full functional, but this is the starting point.
Good luck!
body {
background-color: rgb(245, 165, 61);
--border-rad: 5px;
}
.wrapper {
width: 80vh;
margin: 5%;
}
.tabs {
display: flex;
justify-content: space-around;
}
.tab {
position: relative;
width: 20%;
color: #000;
background-color: #fff;
margin: 2px 2px 0% 2px;
border-top-left-radius: var(--border-rad);
border-top-right-radius: var(--border-rad);
position: relative;
text-decoration: none;
text-align: center;
}
.tab.active {
z-index: 2;
}
.tab:before,
.tab:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.tab:before {
left: -20px;
border-radius: 0 0 var(--border-rad) 0;
box-shadow: var(--border-rad) 0 0 0 #fff;
}
.tab:after {
right: -20px;
border-radius: 0 0 0 var(--border-rad);
box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}
.content {
position: relative;
z-index: 1;
background-color: #fff;
height: 75vh;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
text-align: center;
}
<div class="wrapper">
<div class="tabs">
<span class="tab active">A</span>
<span class="tab">B</span>
<span class="tab">C</span>
</div>
<div class="content">content</div>
</div>
Just add these to your content and tab css classes:
.content {
position: relative;
z-index: 2;
}
.tab
z-index: 1;
}
Edit: you need the relative positioning for z-index to work.
You can always try the following css witch will give the box the black shadow and the border bottom you want.
box-shadow: rgb(0 0 0 / 25%) 0px 54px 55px, rgb(0 0 0 / 12%) 0px -12px 30px, rgb(0 0 0 / 12%) 0px 4px 6px, rgb(0 0 0 / 17%) 0px 12px 13px, rgb(0 0 0 / 5%) 0px -3px 5px;
border-bottom: solid;
border-width: thin;
z-index: 50;
So i managed to create a inset shadow on an image, after reading around the web..
it works, but i cannot make it change on :hover.
Currently i have:
.shadow {
position: relative;
max-width: 100%;
float: left;
}
.shadow::before {
border-radius: 100%;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .6);
transition: box-shadow .2s ease-in-out;
}
.shadow:hover:before {
box-shadow: inset 5px 5px 55px rbga(0, 0, 0, .8);
}
.shadow img {
float: left;
border-radius: 100%;
width: 300px;
}
<div class="shadow">
<img src="https://picsum.photos/300/300?image=1015">
</div>
I have put the code here: https://codepen.io/anon/pen/rRwGmV
I hope some of you know how to do this.
Thanks
.shadow {
position: relative;
max-width: 100%;
float: left;
}
.shadow::before {
border-radius: 100%;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 3px 3px 8px red;
transition: box-shadow .2s ease-in-out;
}
.shadow:hover::before {
box-shadow: inset 5px 5px 55px green;
}
.shadow img {
float: left;
border-radius: 100%;
width: 300px;
}
<div class="shadow">
<img src="https://picsum.photos/300/300?image=1015">
</div>
what do you think about do it without :before?
.shadow img{
border-radius: 50%;
box-shadow: 3px 3px 8px rgba(0,0,0,.6);
}
img:hover {
box-shadow: 5px 5px 5px red;
}
<div class="shadow">
<img src="https://picsum.photos/300/300?image=1015">
</div>
Here is my codepen whith this code
Did I forget to do something? How can I improve?
I have problem with z-index value in child element.
Structure looks like this:
#header {
position: relative;
z-index: 2;
width: 100%;
height: 15vh;
display: block;
margin: 0 auto;
background-color: white;
color: #44a9ff;
padding: 0;
overflow: hidden;
border-bottom: 3px solid #44a9ff;
-webkit-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
}
#main {
position: relative;
z-index: 1;
width: 100%;
height: 75vh;
display: block;
margin: 0 auto;
overflow: hidden;
padding: 0;
background: url('img/main_bg.jpg') no-repeat center center;
background-size: cover;
border-bottom: 3px solid #44a9ff;
}
#box {
position: relative;
z-index: 10;
width: 40%;
height: 38vh;
background-color: #44a9ff;
float: right;
color: white;
display: block;
overflow: hidden;
}
<div id="nav">
<ul>
<li>..</li>
<li>..</li>
</ul>
</div>
<div id="main">
<div id="box">
</div>
</div>
Element #nav has z-index 2, because there is box shadow in the bottom. #main has z-index 1, because when is higher, shadow is not visible. And than there is #box, which has z index 3, because I need it to cover shadow from #nav. But it probably has value of z-index from #main, so it doesn't cover it. How could I fix this please?
Try taking #box out of #main and setting it absolute above with right & top coordinates:
#header {
position: relative;
z-index: 2;
width: 100%;
height: 15vh;
display: block;
margin: 0 auto;
background-color: white;
color: #44a9ff;
padding: 0;
overflow: hidden;
border-bottom: 3px solid #44a9ff;
-webkit-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
}
#main {
position: relative;
z-index: 1;
width: 100%;
height: 75vh;
display: block;
margin: 0 auto;
overflow: hidden;
padding: 0;
background: url('img/main_bg.jpg') no-repeat center center;
background-size: cover;
border-bottom: 3px solid #44a9ff;
background: green;
}
#box {
/* set it absolute */
position: absolute;
/* tweak coordinates to your benefit */
right: 8px;
top: 19vh;
z-index: 3;
width: 40%;
height: 38vh;
background-color: #44a9ff;
color: white;
display: block;
overflow: hidden;
}
<div id="header">
<div id="nav">
<ul>
<li>..
</li>
<li>..
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="box"></div>
try moving #box out of #main and give it a custom css code to get it to the right position
<div id="nav">
<ul>
<li>..</li>
<li>..</li>
</ul>
</div>
<div id="box">
</div>
<div id="main">
</div>
I have a problem with CSS3 Shadows that I did not expirience before.
It seems like a box-shadow, that is applied to a div via the :before and :after selector, is only possible, if the container of the div has no background-color set.
Is there any way to make this possible?
<div class="container">
<div class="shadow-box">
test
</div>
</div>
The .container must not have a background-color set. I created an example on http://jsfiddle.net/v1utr15n/
You need to make sure that the .container will start a new stacking order. You can do this by either setting a position: relative; z-index: 0 or a opacity other than 1, e.g. opacity: .9999.
.container {
background-color: #fff;
height: 500px;
position: relative;
z-index: 0;
}
.shadow-box {
background-color: #fff;
position: relative;
width: 300px;
height: 300px;
}
.shadow-box:before,
.shadow-box:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
<div class="container">
<div class="shadow-box">
test
</div>
</div>
See http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ for some background information on z-index and stacking order context.
Put the code of the box-shadow in the shadow-box class, not in before or after.
URL: http://jsfiddle.net/v1utr15n/1/
.container {
background-color: #fff;
height: 500px;
}
.shadow-box {
background-color: #fff;
position: relative;
width: 300px;
height: 300px;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
.shadow-box:before,
.shadow-box:after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
<div class="container">
<div class="shadow-box">
Shadow box
</div>
</div>
This is what i have got so far
After after checking out tutorial
I want know how curved effect is generated on divs the only question that i found near to what i was looking for was At here at stackoverlow but that too dint help
How folded edge effect is created on as in the above picture
Css
#MenuShape{
height:50px;
background-color:orange;
width:200px;
position:relative;
text-align:center;
left:100px;
}
#MenuShape:after{
content:"";
position: absolute;
width: 0;
height: 0;
left:200px;
border-top: 50px solid transparent;
border-left: 100px solid orange;
border-bottom: 0px solid transparent;
}
#MenuShape:before{
content:"";
position: absolute;
width: 0;
height: -50;
left:-100px;
border-top: 50px solid transparent;
border-right: 100px solid orange;
border-bottom: 0px solid transparent;
}
HTML
<div id="MenuShape" >
sachin
</div>
https://css-tricks.com/ this the site on inspecting it i found its span wrapped
anchor tag along with svg tag
<a href="/" class="home">
<svg viewBox="0 0 100 25" class="shape-tab">
<use xlink:href="#shape-tab"></use>
</svg>
<span>Blog</span></a>
Click here to see the unexpected behaviour it works fine in codepen
Here is a final demo (archived) on the folded corners:
and the following code is how you can create them:
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
/* Firefox 3.0 damage limitation */
display: block;
width: 0;
}
.note.rounded {
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.note.rounded:before {
border-width: 8px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
<div class="note"></div>
To create a curved wave effect you can use this code:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
To achieve the curve you’ll need to inverse where it starts. Follow the same demo, just reverse your values.
See a live demonstration (archived) of how border radius can create the shapes and effects you want and adjust each corner to see it in action.