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

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

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

Okay