I've been trying to find a way to have a shadow on the inside of an image but I can only manage an outer shadow. .showSlide is a div element btw
.showSlide {
display: block;
width:100%;
height:350px;
}
.showSlide img {
width: 100%;
height:100%;
border-radius: 15%;
-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;
}
Add this:
.showSlide::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-border-radius: 15%;
-moz-border-radius: 15%;
border-radius: 15%;
box-shadow: inset 0 0 12px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 12px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
and edit:
.showSlide {
display: block;
width:100%;
height:350px;
position: relative;
}
.showSlide img {
width: 100%;
height:100%;
border-radius: 15%;
}
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;
I have simple html and css code :
HTML:
<div class="header">
<div class="tip"></div>
</div>
CSS:
.header {
display: block;
width: 260px;
min-height: 222px;
background-color: #252525;
position: relative;
z-index: 5;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
border-radius: 2px;
}
.tip {
display: inline-block;
width: 10px;
height: 10px;
right: 11px;
top: -5px;
transform: rotateZ(45deg);
position: absolute;
z-index: 1;
background-color: red;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
I just want to .tip block was under .header block.
But now it looks like this, although the z-index of .tip is less then z-index of .header:
This is what I want:
For some reason, z-index doesn't work.
It's necessary for me to set z-index on .header block, because I have another blocks on page which have z-index too
To make the child of a parent element have a higher z-index than the parent element, remove the parent's z-index value.
.header {
display: block;
width: 260px;
min-height: 222px;
background-color: #252525;
position: relative;
/*z-index: 5;*/
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
border-radius: 2px;
}
.tip {
display: inline-block;
width: 10px;
height: 10px;
right: 11px;
top: -5px;
transform: rotateZ(45deg);
position: absolute;
z-index: -1;
background-color: red;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
<div class="header">
<div class="tip"></div>
</div>
try changing 1 to -1...and remove z-index: 5 in the first block (header); take a look of this part of the code:
.header {
display: block;
width: 260px;
min-height: 222px;
background-color: #252525;
position: relative;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
border-radius: 2px;
}
.tip {
display: inline-block;
width: 10px;
height: 10px;
right: 11px;
top: -5px;
transform: rotateZ(45deg);
position: absolute;
z-index: -1;
background-color: red;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
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.
My css:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
What i want:
What i get:
Red = absolute header
White = #main with "blue" scrollbars
Green = #content border with the text in it.
I guess it is quite easy to solve but i still couldnt manage after trying for ages :P
Updated/simplified jsfiddle:
http://jsfiddle.net/YAgW2/9/
Your CSS should be:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: auto;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
width:auto;
}
Use the following CSS:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
background-color: green;
}
#content {
white-space: nowrap;
padding: 5px;
color: white;
background-color: red;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
And the following HTML:
<div>
<div id="main">
</div>
<div id="content" style="position:absolute">
Try to extend this text
</div>
</div>
Could you not move #content outside of #main and position it where you want, i.e. on top of #main?
Adding float: left; to #content solves the display issue!
I have a box which overlaps another to form a sort of L shape, I am trying to achieve a glow around the whole of the L shape which therefore requires a glow on only 3 sides of one of these boxes.
I've tried using the box-shadow property but can't seem to get it to only work for 3 of the sides, is this the correct method to use or is there another method using borders I could use to achieve a glow on the 3 sides?
Here is the code I've been trying to use
-moz-box-shadow: 0 -1px 5px #80abc6;
-webkit-box-shadow: 0 -1px 5px #80abc6;
box-shadow: 0 -1px 5px #80abc6;
You could use the clip property:
div {
width: 100px;
height: 30px;
margin: 30px;
clip: rect(-15px,115px,45px,0);
position: absolute;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
}
Demo: http://jsfiddle.net/QBQJn/
You can do it with css :after property. Like this:
div{
width:100px;
height:30px;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
margin:30px;
position:relative;
}
div:after{
content:'';
width:10px;
height:100%;
background:#fff;
position:absolute;
top:0;
left:-10px;
}
Check this http://jsfiddle.net/QBQJn/1/
Here's one way to do it: http://jsfiddle.net/thirtydot/Wec5h/
HTML:
<div id="l">
<div id="v"></div><div id="h"></div>
</div>
CSS:
#l {
padding: 20px;
border: 1px solid red;
float: left;
}
#v, #h {
-moz-box-shadow: 0 0 5px #80abc6;
-webkit-box-shadow: 0 0 5px #80abc6;
box-shadow: 0 0 5px #80abc6;
display: inline-block;
vertical-align: bottom;
position: relative;
}
#v {
width: 48px;
height: 192px;
}
#h {
width: 96px;
height: 48px;
}
#v:after {
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 38px;
left: 0;
height: 20px;
background: #fff;
}
#h:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 20px;
background: #fff;
}