div#div1, div#div2, div#div3{
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 3px solid black;
}

#div1{
  /* horz-pos, vert-pos, blur amount, size of shadow, color */
  box-shadow: 5px 5px 5px 2px gray;
}

#div2{
  /* inset creates an inner shadow */
  box-shadow: 5px 5px 5px 2px gray inset;
}

#div3{
  /* Create a glow */
  box-shadow: 0px 0px 10px 5px yellow;
}

div#div4, div#div5{
  height: 30px;
  width: 30px;
  font: 20pt Arial;
}

#div4{
  /* horz-pos, vert-pos, blur amount, color */
  text-shadow: 2px 2px 3px gray;
}

#div5{
  /* Create a glow */
  text-shadow: 0 0 3px yellow;
}

div#div6, div#div7, div#div8, div#div9, div#div10{
  height: 100px;
  width: 100px;
  float: left;
  margin-top: 40px;
}

/* Define background by RGB */
#div6{
  background: rgb(0, 0, 205);
}

/* You can change opacity */
#div7{
  background: rgb(0, 0, 205);
  opacity: .5;
}

/* You can also change the alpha */
#div8{
  background: rgba(0, 0, 205, .5);
}

/* Hue, Saturation, Lightness */
#div9{
  background: hsl(205, 100%, 50%);
}

/* You also can change the alpha */
#div10{
  background: hsla(205, 100%, 50%, .5);
}

div#div11, div#div12, div#div13{
  height: 100px;
  width: 100px;
  float: left;
  margin: 20px;
  border: 3px solid black;
  text-align: center;
}

/* Round the corners */
#div11{
  border-radius: 30px;
}

/* Round them until a circle appears */
#div12{
  border-radius: 50px;
}

/* Round 1 Corner */
#div13{
  border-top-right-radius: 30px;
}

/* You can change the background image */
div#div14, div#div15{
  height: 92px;
  width: 80px;
  margin-top: 200px;
  float: left;
  background-image: url(nttlogo.png);
}

#div14{
  background-size: 200% 200%;
}

#div15{
  background-size: 50% 50%;
}