DEV Community

Saba beigi
Saba beigi

Posted on • Edited on

2

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

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay