Replacing box:shadow with an svg

HTML & CSS
1

How would I add something like this in place of the box:shadow?

SVG

<svg width="306" height="306" viewBox="0 0 306 306">
  <rect x="0" y="0" width="306" height="306" fill="#38761d" />
  <rect x="9" y="9" width="288" height="288" fill="black" />
  <rect x="18" y="18" width="270" height="270" fill="#1155cc" />
  <rect x="27" y="27" width="252" height="252" fill="black" />
  <rect x="36" y="36" width="234" height="234" fill="#38761d" />
  <rect x="45" y="45" width="216" height="216" fill="black" />
  <rect x="54" y="54" width="198" height="198" fill="#1155cc" />
  <rect x="63" y="63" width="180" height="180" fill="black" />
  <rect x="72" y="72" width="162" height="162" fill="#38761d" />
  <rect x="81" y="81" width="144" height="144" fill="black" />
  <rect x="90" y="90" width="126" height="126" fill="#1155cc" />
  <rect x="99" y="99" width="108" height="108" fill="black" />
  <rect x="108" y="108" width="90" height="90" fill="#38761d" />
  <rect x="117" y="117" width="72" height="72" fill="black" />
  <rect x="126" y="126" width="54" height="54" fill="#1155cc" />
  <rect x="135" y="135" width="36" height="36" fill="black" />
  <rect x="144" y="144" width="18" height="18" fill="#38761d" />
</svg>

body {
  color: #fff;
  font: 600 80px/60px "Opan Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  margin: 50px 300px;
}

.cube {
  position: relative;
  width: 300px;
}

.side {
  height: 255px;
  line-height: 255px;
  position: absolute;
  text-align: center;
  width: 255px;
}

.top {
  border: solid 5px #38761d;
  transform: rotate(-45deg) skew(15deg, 15deg);
  box-shadow: 0 0 0 5px black inset, 0 0 0 10px blue inset, 0 0 0 15px black inset, 0 0 0 20px green inset, 0 0 0 25px black inset, 0 0 0 30px blue inset, 0 0 0 35px black inset, 0 0 0 40px green inset, 0 0 0 45px black inset, 0 0 0 50px blue inset, 0 0 0 55px black inset, 0 0 0 60px green inset, 0 0 0 65px black inset, 0 0 0 70px blue inset, 0 0 0 75px black inset, 0 0 0 80px green inset, 0 0 0 85px black inset, 0 0 0 90px blue inset, 0 0 0 95px black inset, 0 0 0 100px green inset, 0 0 0 105px black inset, 0 0 0 110px blue inset, 0 0 0 115px black inset, 0 0 0 120px green inset, 0 0 0 125px black inset, 0 0 0 130px blue inset;
  z-index: 1;
}

.left {
  background: url;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: solid 5px #38761d;
  transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
}

.right {
  border: solid 5px #38761d;
  background: #000000;
  transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
}
2

The first thing I would do is remove the box shadow, then I would add the svg as a bg image.

I used a red bg color but you can change it to your image.


.top {
  border: solid 5px #38761d;
  transform: rotate(-45deg) skew(15deg, 15deg);
  background:red;
  z-index: 1;
}

Your image would need to be 255 x 255 since the .side class sets the dimensions of the .top rules.

.side {
  height: 255px;
  line-height: 255px;
  position: absolute;
  text-align: center;
  width: 255px;
}
1 Like
3

Replace 1 line of CSS with about 40 lines of code. Does that really make much sense?

1 Like
4

I was thinking just about the same thing. Why in the world would you WANT to replace a decoration with a non-semantic set of html markup? Makes no sense to me at all… :shifty:

2 Likes
5

It’s not a terrible difference.

The CSS box-shadow rule weighs - 0.636 KB
The svg weighs - 1.13 KB

I wouldn’t put the svg in the html for decoration, I’d use it as a BG image as I mentioned.
Probably as a data uri bg image

You would have the option for a more creative decoration as well.

1 Like
6

I was only using it to generate an image picture.

7

Wouldn’t you be better off using graphics software for that?

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.