Pure CSS로 로고 만들기

Dan Cole은 CSS만을 사용해서 로고를 만드는 흥미로운 기사를 가지고 있다. 왜일까?

• 더 빠른 로딩 시간
• 이미지가 비활성화된 상태에서 작업
• 확장 가능

다음과 같이 표시됩니다.

방법은 다음과 같습니다.

#tower1 {
  position:absolute;
  top:51px;
  left:20px;
  width:20px;
  height: 30px;
  background-color: #333;
}
#tower2 {
  position:absolute;
  top:31px;
  left:45px;
  width:20px;
  height: 50px;
  background-color: #33E;
}
#tower3 {
  position:absolute;
  top:11px;
  left:70px;
  width:20px;
  height: 70px;
  background-color: #3A3;
}
#tower4 {
  position:absolute;
  top:90px;
  left:20px;
  width:20px;
  height: 10px;
  background-color: #AAA;
}
#tower5 {
  position:absolute;
  top:90px;
  left:45px;
  width:20px;
  height: 17px;
  background-color: #AAD;
}
#tower6 {
  position:absolute;
  top:90px;
  left:70px;
  width:20px;
  height: 23px;
  background-color: #ADA;
}