HTML5 CSS3 Animal Face | HTML 5 & CSS 3 - Single Element Graphics - Animal Face

Animal Face created by pure CSS3 plus only one single HTML element.

Demo

Explanation

In this demo, all shapes are created by the box-shadow property.

HTML & CSS

<style>
.box {
 display: block;
 position: absolute;
 /*overflow: hidden; */
 height: 80px;
 width: 80px;
 margin: 80px 80px; 
 /* eye1, eye2, nose_a, nose_b, nose_c, mouth_a, mouth_b, ear1, ear2, face, cheek1, cheek2  */
 box-shadow: 
  135px 10px 0 -30px white, 135px -15px 0 -30px white,
  160px 3px 0 -35px white,  160px 0px 0 -35px white, 160px -3px 0 -35px white, 
  150px 0px 0 -10px red, 160px 0px 0 -15px white, 
  100px -50px 0 -10px red, 100px 50px 0 -10px red, 
  150px 0px 0 10px red, 
  160px 15px 0 -5px red, 160px -15px 0 -5px red;
 border-radius: 40px;
 background: transparent;
 transform: rotate(90deg);
}
</style>
<div class="box"></div>

HTML5 CSS3 Yinyang Bagua | HTML 5 & CSS 3 - Create a Yinyang Bagua Diagram

Create a Yinyang Bagua diagram using pure CSS3 code:

(What is Yinyang Bagua?)

figure

<meta charset="UTF-8">
<style>
.container {
  margin: 100px;
  position: relative;
  width: 137px;
  height: 137px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-right: 2px solid white;
  border-top: 2px solid white;
  border-radius: 100%;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.yinyang {
  width: 136px;
  height: 136px;
  background: -moz-linear-gradient(45deg, white 0%, white 50%, black 51%, black 100%);
  background: -webkit-linear-gradient(45deg, white 0%, white 50%, black 51%, black 100%);
  background: linear-gradient(45deg, white 0%, white 50%, black 51%, black 100%);
  border-radius: 100%;
}

.yinyang::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 58px;
  left: 58px;
  background: white;
  border: 24px solid black;
  border-radius: 100%;
}

.yinyang::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 10px;
  left: 10px;
  background: black;
  border: 24px solid white;
  border-radius: 100%;
}

.yao {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 68px;
  height: 24px;
  position: absolute;
  text-align: center;
}

.yao >div {
  margin: 0 auto;
  padding: 0;
  width: 60px;
  height: 5px;
  margin-bottom: 3px;
}

.qian {
  top: -25px;
  left: -45px;
}

.qian >.positive {
  background: rgb(0, 0, 0);
}

.kun {
  top: 135px;
  left: 115px;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.kun >.negative {
  background: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 40%, transparent 41%, transparent 59%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%);
  background: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 40%, transparent 41%, transparent 59%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%);
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 40%, transparent 41%, transparent 59%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%);
}

.li {
  top: 135px;
  left: -45px;
  -moz-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.li >.positive {
  background: rgb(0, 255, 0);
}

.li >.negative {
  background: -moz-linear-gradient(90deg, rgb(0, 255, 0) 0%, rgb(0, 255, 0) 40%, transparent 41%, transparent 59%, rgb(0, 255, 0) 60%, rgb(0, 255, 0) 100%);
  background: -webkit-linear-gradient(90deg, rgb(0, 255, 0) 0%, rgb(0, 255, 0) 40%, transparent 41%, transparent 59%, rgb(0, 255, 0) 60%, rgb(0, 255, 0) 100%);
  background: linear-gradient(90deg, rgb(0, 255, 0) 0%, rgb(0, 255, 0) 40%, transparent 41%, transparent 59%, rgb(0, 255, 0) 60%, rgb(0, 255, 0) 100%);
}

.kan {
  top: -25px;
  left: 115px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.kan >.positive {
  background: rgb(255, 0, 255);
}

.kan >.negative {
  background: -moz-linear-gradient(90deg, rgb(255, 0, 255) 0%, rgb(255, 0, 255) 40%, transparent 41%, transparent 59%, rgb(255, 0, 255) 60%, rgb(255, 0, 255) 100%);
  background: -webkit-linear-gradient(90deg, rgb(255, 0, 255) 0%, rgb(255, 0, 255) 40%, transparent 41%, transparent 59%, rgb(255, 0, 255) 60%, rgb(255, 0, 255) 100%);
  background: linear-gradient(90deg, rgb(255, 0, 255) 0%, rgb(255, 0, 255) 40%, transparent 41%, transparent 59%, rgb(255, 0, 255) 60%, rgb(255, 0, 255) 100%);
}

.dui {
  top: 55px;
  left: -80px;
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.dui >.positive {
  background: rgb(255, 0, 0);
}

.dui >.negative {
  background: -moz-linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 40%, transparent 41%, transparent 59%, rgb(255, 0, 0) 60%, rgb(255, 0, 0) 100%);
  background: -webkit-linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 40%, transparent 41%, transparent 59%, rgb(255, 0, 0) 60%, rgb(255, 0, 0) 100%);
  background: linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 40%, transparent 41%, transparent 59%, rgb(255, 0, 0) 60%, rgb(255, 0, 0) 100%);
}

.gen {
  top: 55px;
  left: 150px;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.gen >.positive {
  background: rgb(0, 255, 255);
}

.gen >.negative {
  background: -moz-linear-gradient(90deg, rgb(0, 255, 255) 0%, rgb(0, 255, 255) 40%, transparent 41%, transparent 59%, rgb(0, 255, 255) 60%, rgb(0, 255, 255) 100%);
  background: -webkit-linear-gradient(90deg, rgb(0, 255, 255) 0%, rgb(0, 255, 255) 40%, transparent 41%, transparent 59%, rgb(0, 255, 255) 60%, rgb(0, 255, 255) 100%);
  background: linear-gradient(90deg, rgb(0, 255, 255) 0%, rgb(0, 255, 255) 40%, transparent 41%, transparent 59%, rgb(0, 255, 255) 60%, rgb(0, 255, 255) 100%);
}

.zhen {
  top: 170px;
  left: 35px;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.zhen >.positive {
  background: rgb(255, 255, 0);
}

.zhen >.negative {
  background: -moz-linear-gradient(90deg, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 40%, transparent 41%, transparent 59%, rgb(255, 255, 0) 60%, rgb(255, 255, 0) 100%);
  background: -webkit-linear-gradient(90deg, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 40%, transparent 41%, transparent 59%, rgb(255, 255, 0) 60%, rgb(255, 255, 0) 100%);
  background: linear-gradient(90deg, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 40%, transparent 41%, transparent 59%, rgb(255, 255, 0) 60%, rgb(255, 255, 0) 100%);
}

.xun {
  top: -60px;
  left: 35px;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);  
}

.xun >.positive {
  background: rgb(0, 0, 255);
}

.xun >.negative {
  background: -moz-linear-gradient(90deg, rgb(0, 0, 255) 0%, rgb(0, 0, 255) 40%, transparent 41%, transparent 59%, rgb(0, 0, 255) 60%, rgb(0, 0, 255) 100%);
  background: -webkit-linear-gradient(90deg, rgb(0, 0, 255) 0%, rgb(0, 0, 255) 40%, transparent 41%, transparent 59%, rgb(0, 0, 255) 60%, rgb(0, 0, 255) 100%);
  background: linear-gradient(90deg, rgb(0, 0, 255) 0%, rgb(0, 0, 255) 40%, transparent 41%, transparent 59%, rgb(0, 0, 255) 60%, rgb(0, 0, 255) 100%);
}

</style>

<div class="container">  
  <div class="yinyang">
  </div>
  <div>
    <div class="qian yao">乾<div class="positive"></div><div class="positive"></div><div class="positive"></div></div>
    <div class="kun yao">坤<div class="negative"></div><div class="negative"></div><div class="negative"></div></div>
    <div class="li yao">离<div class="positive"></div><div class="negative"></div><div class="positive"></div></div>
    <div class="kan yao">坎<div class="negative"></div><div class="positive"></div><div class="negative"></div></div>
    <div class="dui yao">兑<div class="negative"></div><div class="positive"></div><div class="positive"></div></div>
    <div class="gen yao">艮<div class="positive"></div><div class="negative"></div><div class="negative"></div></div>
    <div class="zhen yao">震<div class="negative"></div><div class="negative"></div><div class="positive"></div></div>
    <div class="xun yao">巽<div class="positive"></div><div class="positive"></div><div class="negative"></div></div>
  </div>
</div>

乾

坤

离

坎

兑

艮

震

巽

HTML5 CSS3 Moon | HTML 5 & CSS 3 - Create a Moon

CSS 3 Moon Code

The code below creates a red moon with animation:

<style>
.moon {
 margin: 50px 0 0 0;
 width: 200px;
 height: 200px;
}
.moon_left {
 width: 100px;
 height: 100px;
 background: red;
 border-radius: 50px;
}
.moon_right {
 width: 102px;
 height: 102px;
 top: -101px;
 left: -1;
 position: relative;
 background: white;
 border-radius: 50px;
 -webkit-animation: moon_right_position_change 5s ease-in 2s infinite alternate; /* Chrome, Safari, Opera */
 animation: moon_right_position_change 5s ease-in 2s infinite alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moon_right_position_change {
 25% {left: 25px;}
 50% {left: 50px;}
 100% {left: 100px;}
}

/* Standard syntax */
@keyframes moon_right_position_change {
 25% {left: 25px;}
 50% {left: 50px;}
 100% {left: 100px;}
} 

</style>
<div class="moon">
 <div class="moon_left"></div>
 <div class="moon_right"></div>
</div>

HTML5 CSS3 Star | HTML 5 & CSS 3 - Create a Pentagram

CSS3 Pentagram (Five-Pointed Star) Code
The code below creates a yellow star

<style>

/* Chrome, Safari, Opera */
@-webkit-keyframes pentagram_animation {
 0% {-webkit-transform: rotate(0deg);}
 25% {-webkit-transform: rotate(90deg);}
 50% {-webkit-transform: rotate(180deg);}
 75% {-webkit-transform: rotate(270deg);}
 100% {-webkit-transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes pentagram_animation {
 0% {transform: rotate(0deg);
 -ms-transform: rotate(0deg);}
 25% {transform: rotate(90deg);
 -ms-transform: rotate(90deg);}
 50% {transform: rotate(180deg);
 -ms-transform: rotate(180deg);}
 75% {transform: rotate(270deg);
 -ms-transform: rotate(270deg);}
 100% {transform: rotate(360deg);
 -ms-transform: rotate(360deg);}
} 

.pentagram {
 margin: 120px 0 0 0;
 width: 200px;
 height: 200px;
 -ms-transform-origin: 55px 15px; /* IE 9 */
    -webkit-transform-origin: 55px 15px; /* Chrome, Safari, Opera */
    transform-origin: 55px 15px;
 -webkit-animation: pentagram_animation 5s linear 1s infinite normal; /* Chrome, Safari, Opera */
 animation: pentagram_animation 5s linear 1s infinite normal;
}
.pentagram_top {
 width: 0;
 height: 0;
 border-top: 34px solid yellow;
 border-left: 55px solid transparent;
 border-right: 55px solid transparent;
}
.pentagram_left {
 width: 0;
 top: -34px;
 position: relative;
 border-top: 34px solid yellow;
 border-left: 55px solid transparent;
 border-right: 55px solid transparent;
 transform: rotate(72deg);
 -ms-transform: rotate(72deg);
 -webkit-transform: rotate(72deg);
}
.pentagram_right {
 width: 0;
 top: -68px;
 position: relative;
 border-top: 34px solid yellow;
 border-left: 55px solid transparent;
 border-right: 55px solid transparent;
 transform: rotate(-73deg);
 -ms-transform: rotate(-73deg);
 -webkit-transform: rotate(-73deg);
}
</style>
<div class="pentagram">
 <div class="pentagram_top"></div>
 <div class="pentagram_left"></div>
 <div class="pentagram_right"></div>
</div>

HTML5 CSS3 Triangle | HTML 5 & CSS 3 - Create a Triangle

CSS 3 Triangle Code

The code below creates a black triangle

<style>
.triangle {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid black;
}
</style>
<div class="triangle"></div>

CSS3 Add Border Color

If we give the borders a color, what will happen?

<style>
.triangle2 {
 width: 0;
 height: 0;
 border-left: 50px solid red;
 border-right: 50px solid blue;
 border-bottom: 100px solid black;
}
</style>
<div class="triangle2"></div>