DEV Community

Saba beigi
Saba beigi

Posted on • Edited on

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

#css #javascript #react

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (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 •

Thanks

Read next

rajnandan1 profile image

Built a cli for browser

Raj Nandan Sharma -

abhay_yt_52a8e72b213be229 profile image

Render Props Pattern in React: A Comprehensive Guide

Abhay Singh Kathayat -

sharathchandark profile image

Learn How To Build A Translator App With API Using HTML, CSS, And JavaScript

sharathchandark -

nikhilesh_mauje_24 profile image

Master React.js by Focusing on the Vital 20% Concepts

Nikhilesh Mauje -