Drawing pixel art

We can use multiple box-shadows to draw multiple color blocks. When these blocks are square pixel, they are like pixel art.

Code example link:

https://css3effects.com/pixel-download

https://codepen.io/makzan/pen/zBzzaZ

Code snippet

HTML

<a href="#" class="download button">Download</a>

CSS

.button {
  background: GOLD;
  padding: 1em 2em;
  color: BLACK;
  text-decoration: none;
  border-radius: 2px;
  position: relative;
}
.button:hover {
  background : ORANGE;
}
.button:before {
  content:'';
  width: 1px;
  height: 1px;
  background: rgba(0,0,0,0);
  position: absolute;
  top: 50%;
  left: 1.3em;
  transition: all 0.3s ease-out;
  box-shadow: 0 0 rgba(0,0,0,0), 
	  		5px 6px rgba(0,0,0,0), 
			0 calc(6px * 2) rgba(0,0,0,0), 
 			6px 6px rgba(0,0,0,0), 
 			calc(6px * 2) 0 rgba(0,0,0,0), 
 			-6px 6px rgba(0,0,0,0), 
 			calc(-6px * 3) 0 rgba(0,0,0,0), 
 			0 -6px rgba(0,0,0,0), 
 			-3px calc(-6px * 2) rgba(0,0,0,0), 
 			3px calc(-6px * 4) rgba(0,0,0,0);
}
.button:hover:before {
  background: rgba(0,0,0,1);
  box-shadow: 0 2px, 0 calc(2px * 2), 
 			2px 2px, calc(2px * 2) 0, 
 			-2px 2px, calc(-2px * 2) 0, 
 			0 -2px, 0 calc(-2px * 2), 
 			0 calc(-2px * 3);
}

How it works

The box-shadow allows multiple shadows separated with commas. By using 0px blur shadow on square element, we can create solid color blocks that simulate pixels.

When to use this effect?

Obviously it is unrealistic to create a large master piece of pixel art. But we can use this technique to create tiny pixel buttons. It create personality to website and provide personal touch to our readers.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.