Pixelated Art Via HTML & CSS

by Unknown 12:46 0 comments
Pixelated Charmander made via HTML & CSS
Related Articles:

 

 



Here's the source code:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charmander by roundCube</title>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

 
 </head>

    <body>
    <div class="charmander"></div>
    <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>
<div id="text"><p style="text-align:center;">Charmander by roundCube</p></div>
   
    </body>
   
    <style>

html,
body {
  height: 100%;
}

body {
  background: -webkit-linear-gradient(top, #65c662 0%, #44b040 100%);
  background: linear-gradient(to bottom, #65c662 0%, #44b040 100%);
  background-size: 100%;
  overflow: hidden;
}

#copyright{
position:absolute;
top:29%;
left:35%;

}
#copyright a{
text-decoration:none;
color:white;
opacity:0.5;
}

#text{
position:absolute;
bottom:10%;
left:27%;
width:100%:
height:20%;
font-family: 'Pacifico', cursive;
font-size:40px;
}

.charmander {
  position: relative;
  width: 1px;
  height: 1px;
  top:10%;
  left:25%;
  -webkit-transform: scale(20);
      -ms-transform: scale(20);
          transform: scale(20);
  box-shadow: 8px 0px 0 black, 9px 0px 0 black, 10px 0px 0 black, 11px 0px 0 black,7px 1px 0 black,8px 1px 0 rgb(255, 154, 52),
  9px 1px 0 rgb(255, 154, 52),10px 1px 0 rgb(255, 154, 52),11px 1px 0 rgb(253, 117, 0),12px 1px 0 black,6px 2px 0 black,
  7px 2px 0 rgb(255, 154, 52),8px 2px 0 rgb(255, 154, 52),9px 2px 0 rgb(255, 154, 52),10px 2px 0 rgb(255, 154, 52),
  11px 2px 0 rgb(255, 154, 52),12px 2px 0 rgb(253, 117, 0),13px 2px 0 black,6px 3px 0 black,7px 3px 0 rgb(255, 154, 52),
  8px 3px 0 rgb(255, 154, 52),9px 3px 0 rgb(255, 154, 52),10px 3px 0 rgb(255, 154, 52),11px 3px 0 rgb(255, 154, 52),
  12px 3px 0 rgb(255, 154, 52),13px 3px 0 black,5px 4px 0 black,6px 4px 0 rgb(255, 154, 52),7px 4px 0 rgb(255, 154, 52),
  8px 4px 0 rgb(255, 154, 52),9px 4px 0 rgb(255, 154, 52),10px 4px 0 rgb(255, 154, 52),11px 4px 0 rgb(255, 154, 52),
  12px 4px 0 rgb(255, 154, 52),13px 4px 0 rgb(253, 117, 0), 14px 4px 0 black,4px 5px 0 black,5px 5px 0 rgb(255, 154, 52),
  6px 5px 0 rgb(255, 154, 52),7px 5px 0 rgb(255, 154, 52),8px 5px 0 rgb(255, 154, 52),9px 5px 0 white,10px 5px 0 black,
  11px 5px 0 rgb(255, 154, 52),12px 5px 0 rgb(255, 154, 52),13px 5px 0 rgb(253, 117, 0),14px 5px 0 black,4px 6px 0 black,
  5px 6px 0 rgb(255, 154, 52),6px 6px 0 rgb(255, 154, 52),7px 6px 0 rgb(255, 154, 52),8px 6px 0 rgb(255, 154, 52),
  9px 6px 0 black,10px 6px 0 black,11px 6px 0 rgb(255, 154, 52),12px 6px 0 rgb(253, 117, 0),13px 6px 0 rgb(253, 117, 0),
  14px 6px 0 rgb(253, 117, 0),15px 6px 0 black,4px 7px 0 black,5px 7px 0 rgb(255, 154, 52),6px 7px 0 rgb(255, 154, 52),
  7px 7px 0 rgb(255, 154, 52),8px 7px 0 rgb(255, 154, 52),9px 7px 0 black,10px 7px 0 black,11px 7px 0 rgb(255, 154, 52),
  12px 7px 0 rgb(253, 117, 0),13px 7px 0 rgb(253, 117, 0),14px 7px 0 rgb(253, 117, 0),15px 7px 0 black,5px 8px 0 black,
  6px 8px 0 rgb(253, 117, 0),7px 8px 0 rgb(255, 154, 52),8px 8px 0 rgb(255, 154, 52),9px 8px 0 rgb(255, 154, 52),
  10px 8px 0 rgb(255, 154, 52),11px 8px 0 rgb(253, 117, 0),12px 8px 0 rgb(253, 117, 0),13px 8px 0 rgb(253, 117, 0),
  14px 8px 0 rgb(253, 117, 0),15px 8px 0 rgb(253, 117, 0),16px 8px 0 black,6px 9px 0 black,7px 9px 0 black,
  8px 9px 0 rgb(253, 117, 0),9px 9px 0 rgb(253, 117, 0),10px 9px 0 rgb(253, 117, 0),11px 9px 0 rgb(253, 117, 0),
  12px 9px 0 rgb(253, 117, 0),13px 9px 0 rgb(253, 117, 0),14px 9px 0 rgb(253, 117, 0),15px 9px 0 rgb(253, 117, 0),
  16px 9px 0 rgb(253, 117, 0),17px 9px 0 black,8px 10px 0 black,9px 10px 0 rgb(253, 117, 0),10px 10px 0 rgb(253, 117, 0),
  11px 10px 0 rgb(253, 117, 0),12px 10px 0 rgb(253, 117, 0),13px 10px 0 rgb(253, 117, 0),14px 10px 0 rgb(253, 117, 0),
  15px 10px 0 rgb(253, 117, 0),16px 10px 0 rgb(253, 117, 0),17px 10px 0 rgb(253, 117, 0),18px 10px 0 black,
  9px 11px 0 black,10px 11px 0 black,11px 11px 0 black,12px 11px 0 rgb(253, 117, 0),13px 11px 0 rgb(253, 117, 0),
  14px 11px 0 black,15px 11px 0 rgb(253, 117, 0),16px 11px 0 rgb(253, 117, 0),17px 11px 0 rgb(253, 117, 0),
  18px 11px 0 black,19px 11px 0 black,20px 11px 0 rgb(253, 117, 0),21px 11px 0 rgb(255, 154, 52),22px 11px 0 black,
  10px 12px 0 black,11px 12px 0 yellow,12px 12px 0 yellow,13px 12px 0 black,14px 12px 0 rgb(255, 154, 52),
  15px 12px 0 rgb(255, 154, 52),16px 12px 0 rgb(253, 117, 0),17px 12px 0 rgb(253, 117, 0),18px 12px 0 rgb(253, 117, 0),
  19px 12px 0 black,20px 12px 0 rgb(253, 117, 0),21px 12px 0 rgb(255, 154, 52),22px 12px 0 black,10px 13px 0 black,
  11px 13px 0 yellow,12px 13px 0 yellow,13px 13px 0 yellow,14px 13px 0 black,15px 13px 0 black,16px 13px 0 rgb(253, 117, 0),
  17px 13px 0 rgb(253, 117, 0),18px 13px 0 rgb(253, 117, 0),19px 13px 0 black,20px 13px 0 rgb(253, 117, 0),21px 13px 0 black,
  9px 14px 0 black,10px 14px 0 lightgray,11px 14px 0 black,12px 14px 0 yellow,13px 14px 0 yellow,14px 14px 0 yellow,
  15px 14px 0 rgb(253, 117, 0),16px 14px 0 rgb(253, 117, 0),17px 14px 0 rgb(253, 117, 0),18px 14px 0 rgb(253, 117, 0),
  19px 14px 0 black,20px 14px 0 black,10px 15px 0 black,11px 15px 0 black,12px 15px 0 black,13px 15px 0 yellow,14px 15px 0 yellow,
  15px 15px 0 rgb(253, 117, 0),16px 15px 0 rgb(253, 117, 0),17px 15px 0 rgb(253, 117, 0),18px 15px 0 black,19px 15px 0 black,
  13px 16px 0 black,14px 16px 0 black,15px 16px 0 black,16px 16px 0 rgb(253, 117, 0),17px 16px 0 black,
  18px 16px 0 black,14px 17px 0 black,15px 17px 0 lightgray,16px 17px 0 rgb(253, 117, 0),17px 17px 0 lightgray,18px 17px 0 black,
  15px 18px 0 black,16px 18px 0 black,17px 18px 0 black,20px 10px 0 black,21px 10px 0 rgb(255, 154, 52),22px 10px 0 rgb(255, 154, 52),
  23px 10px 0 black,23px 9px 0 black,22px 9px 0 rgb(255, 154, 52),21px 9px 0 black,21px 8px 0 black,22px 8px 0 yellow,23px 8px 0 black,
  24px 8px 0 black,25px 7px 0 black,24px 7px 0 rgb(253, 117, 0),23px 7px 0 yellow,22px 7px 0 yellow,21px 7px 0 rgb(253, 117, 0),
  20px 7px 0 black,20px 6px 0 black,20px 5px 0 black,21px 6px 0 rgb(253, 117, 0),21px 5px 0 rgb(253, 117, 0),22px 6px 0 rgb(255, 154, 52),
  23px 6px 0 yellow,24px 6px 0 rgb(253, 117, 0),25px 6px 0 black,25px 5px 0 black,24px 5px 0 rgb(253, 117, 0),23px 5px 0 rgb(255, 154, 52),
  22px 5px 0 rgb(253, 117, 0),21px 4px 0 black,22px 4px 0 rgb(253, 117, 0),23px 4px 0 rgb(253, 117, 0),24px 4px 0 black,24px 3px 0 black,
  23px 3px 0 rgb(253, 117, 0),22px 3px 0 rgb(253, 117, 0),21px 3px 0 black,21px 2px 0 black,22px 2px 0 rgb(253, 117, 0),
  23px 2px 0 black,22px 1px 0 black;
}

    </style>
   
</html>

What should our next pixelated design be? Let us know in comments below.

If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page
Labels:

About author: Usama Moin

I am Usama Moin,author and co-founder of roundCube,I love writing codes and stuff.

0 comments:

Subscribe to: Post Comments (Atom)