here is html codes:
<h2>Outer Shadows</h2>
<h3>One-sided</h3>
<div class="box-wrapper">
<!-- Outer shadows on one side -->
<div class="shadow-top">Top Only</div>
<div class="shadow-right">Right Only</div>
<div class="shadow-bottom">Bottom Only</div>
<div class="shadow-left">Left Only</div>
</div>
<h3>Two-sided</h3>
<div class="box-wrapper">
<!-- Outer shadows on two sides -->
<div class="shadow-top-bottom">Top and Bottom</div>
<div class="shadow-left-right">Left and Right</div>
<div class="shadow-top-right">Top and Right</div>
<div class="shadow-top-left">Top and Left</div>
<div class="shadow-bottom-right">Bottom and Right</div>
<div class="shadow-bottom-left">Bottom and Left</div>
</div>
<h3>Three-sided</h3>
<div class="box-wrapper">
<!-- Outer shadows on three sides -->
<div class="shadow-top-bottom-right">Top, Bottom and Right</div>
<div class="shadow-top-bottom-left">Top, Bottom and Left</div>
<div class="shadow-top-left-right">Top, Left and Right</div>
<div class="shadow-bottom-left-right">Bottom, Left and Right</div>
</div>
<h3>All sides</h3>
<div class="box-wrapper">
<!-- Outer shadow on all sides -->
<div class="shadow-all">All sides</div>
</div>
<h2>Inner Shadows</h2>
<h3>One-sided</h3>
<div class="box-wrapper">
<!-- Inner shadows on one side -->
<div class="shadow-inset-top">Top Only</div>
<div class="shadow-inset-right">Right Only</div>
<div class="shadow-inset-bottom">Bottom Only</div>
<div class="shadow-inset-left">Left Only</div>
</div>
<h3>Two-sided</h3>
<div class="box-wrapper">
<!-- Inner shadows on two sides -->
<div class="shadow-inset-top-bottom">Top and Bottom</div>
<div class="shadow-inset-left-right">Left and Right</div>
<div class="shadow-inset-top-right">Top and Right</div>
<div class="shadow-inset-top-left">Top and Left</div>
<div class="shadow-inset-bottom-right">Bottom and Right</div>
<div class="shadow-inset-bottom-left">Bottom and Left</div>
</div>
<h3>Three-sided</h3>
<div class="box-wrapper">
<!-- Inner shadows on three sides -->
<div class="shadow-inset-top-bottom-right">Top, Bottom and Right</div>
<div class="shadow-inset-top-bottom-left">Top, Bottom and Left</div>
<div class="shadow-inset-top-left-right">Top, Left and Right</div>
<div class="shadow-inset-bottom-left-right">Bottom, Left and Right</div>
</div>
<h3>All sides</h3>
<div class="box-wrapper">
<!-- Inner shadow on all sides -->
<div class="shadow-inset-all">All sides</div>
</div>
and in css file write:
body {
font-family: Helvetica Neue, Arial, sans-serif;
font-weight: 100;
letter-spacing: 2px;
}
.box-wrapper {
display: flex;
flex-wrap: wrap;
}
.box-wrapper > div {
margin: 20px;
border: 1px solid #ccc;
color: #999;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 1 0 21%;
line-height: 1.4em;
height: 100px;
}
/*== box-shadow styles ==*/
/*== outer box-shadow styles ==*/
.shadow-top {
box-shadow: 0 -5px 5px -5px #333;
}
.shadow-right {
box-shadow: 5px 0 5px -5px #333;
}
.shadow-bottom {
box-shadow: 0 5px 5px -5px #333;
}
.shadow-left {
box-shadow: -5px 0 5px -5px #333;
}
.shadow-left-right {
box-shadow: -5px 0 5px -5px #333,
5px 0 5px -5px #333;
}
.shadow-top-bottom {
box-shadow: 0 -5px 5px -5px #333,
0 5px 5px -5px #333;
}
.shadow-top-right {
box-shadow: 5px -5px 5px -5px #333;
}
.shadow-top-left {
box-shadow: -5px -5px 5px -5px #333;
}
.shadow-bottom-right {
box-shadow: 5px 5px 5px -5px #333;
}
.shadow-bottom-left {
box-shadow: -5px 5px 5px -5px #333;
}
.shadow-top-bottom-right {
box-shadow: 0 -5px 5px -5px #333,
0 5px 5px -5px #333,
5px 0 5px -5px #333;
}
.shadow-top-bottom-left {
box-shadow: 0 -5px 5px -5px #333,
0 5px 5px -5px #333,
-5px 0 5px -5px #333;
}
.shadow-top-left-right {
box-shadow: 0 -5px 5px -5px #333,
-5px 0 5px -5px #333,
5px 0 5px -5px #333;
}
.shadow-bottom-left-right {
box-shadow: 0 5px 5px -5px #333,
-5px 0 5px -5px #333,
5px 0 5px -5px #333;
}
.shadow-all {
box-shadow: 0 0 5px #333;
}
/*== inner box-shadow styles ==*/
.shadow-inset-top {
box-shadow: inset 0 5px 5px -5px #333;
}
.shadow-inset-right {
box-shadow: inset -5px 0 5px -5px #333;
}
.shadow-inset-bottom {
box-shadow: inset 0 -5px 5px -5px #333;
}
.shadow-inset-left {
box-shadow: inset 5px 0 5px -5px #333;
}
.shadow-inset-left-right {
box-shadow: inset -5px 0 5px -5px #333,
inset 5px 0 5px -5px #333;
}
.shadow-inset-top-bottom {
box-shadow: inset 0 5px 5px -5px #333,
inset 0 -5px 5px -5px #333;
}
.shadow-inset-top-right {
box-shadow: inset -5px 5px 5px -5px #333;
}
.shadow-inset-top-left {
box-shadow: inset 5px 5px 5px -5px #333;
}
.shadow-inset-bottom-right {
box-shadow: inset -5px -5px 5px -5px #333;
}
.shadow-inset-bottom-left {
box-shadow: inset 5px -5px 5px -5px #333;
}
.shadow-inset-top-bottom-right {
box-shadow: inset 0 -5px 5px -5px #333,
inset 0 5px 5px -5px #333,
inset -5px 0 5px -5px #333;
}
.shadow-inset-top-bottom-left {
box-shadow: inset 0 -5px 5px -5px #333,
inset 0 5px 5px -5px #333,
inset 5px 0 5px -5px #333;
}
.shadow-inset-top-left-right {
box-shadow: inset 0 5px 5px -5px #333,
inset -5px 0 5px -5px #333,
inset 5px 0 5px -5px #333;
}
.shadow-inset-bottom-left-right {
box-shadow: inset 0 -5px 5px -5px #333,
inset -5px 0 5px -5px #333,
inset 5px 0 5px -5px #333;
}
.shadow-inset-all {
box-shadow: inset 0 0 5px #333;
}
Top comments (2)
Hi, I've got a couple of suggestions that will make your post easier for people to read 😊.
If you surround a block of code with three backticks, before and after your code becomes a code block, like this.
Just doing this makes code more readable. It's also worth including a little text describing what you're doing and why.
Demo are also great, you can use jsfiddle to make demo for free and embed it like so.
And finally make sure your tags match your content, for instance in this one you've included react but your post doesn't touch on that.
I hope you find this helpful.
Thanks