DEV Community

Saba beigi
Saba beigi

Posted on

CSS3 box-shadow examples (one-sided, two-sided, three-sided)

here is html codes:

Outer Shadows

One-sided

Top Only
Right Only
Bottom Only
Left Only

Two-sided

Top and Bottom
Left and Right
Top and Right
Top and Left
Bottom and Right
Bottom and Left

Three-sided

Top, Bottom and Right
Top, Bottom and Left
Top, Left and Right
Bottom, Left and Right

All sides

All sides

Inner Shadows

One-sided

Top Only
Right Only
Bottom Only
Left Only

Two-sided

Top and Bottom
Left and Right
Top and Right
Top and Left
Bottom and Right
Bottom and Left

Three-sided

Top, Bottom and Right
Top, Bottom and Left
Top, Left and Right
Bottom, Left and Right

All sides

All sides

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;
}

Discussion (2)

Collapse
link2twenty profile image
Andrew Bone

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.

md code block

.shadow-inset-all {
  box-shadow: inset 0 0 5px #333;
}
Enter fullscreen mode Exit fullscreen mode

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.

{% jsfiddle https://jsfiddle.net/link2twenty/h4rkfoq5/ result html css %}
Enter fullscreen mode Exit fullscreen mode


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.

Collapse
sababg profile image
Saba beigi Author

Thanks