이 사이트는 곧 패쇄 예정입니다. 새로 작업한 사이트로 와주세요^^ http://wiss.tistory.com/

티스토리 뷰




sublime로고를 css를 통해 구현했네요~
섬세함에 박수를 보내고 싶습니다.
또한 이렇게 표현 할 수도 있구나! 대단하네요^^

가상요소를 이용하면 디자인의 섬세한 부분을 줄 수 있네요~
포토샵이 이제 필요 없겠어요~

.base:before{
  content: " ";
  width:225px;
  height: 232px;
  background: #d5d5d5;
  position: absolute;
  top: -4px;
  left: 0px;
  border-bottom: 1px solid #fff;
  border-radius: 20px;
  -webkit-border-bottom: 1px solid #fff;
  -webkit-border-radius: 20px;
  -moz-border-bottom: 1px solid #fff;
  -moz-border-radius: 20px;
}
.base:after{
  content: " ";
  width:204px;
  height: 218px;
  background: #000;
  position: absolute;
  top: -5px;
  left: 11px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}
.corpo:before{
  content: " ";
  width:205px;
  height: 205px;
  background: #4c4c4c;
  background-image: linear-gradient(to bottom, #a3a3a3, #585858 50%, #4c4c4c 53%);
  position: absolute;
  top: -29px;
  left:-1px;
  border:1px solid #c1c1c1;
  border-bottom: 1px solid #b0b0b0;
  border-radius: 14px;
  transform: rotateX(5deg);
  -webkit-border:1px solid #c1c1c1;
  -webkit-border-bottom: 1px solid #b0b0b0;
  -webkit-border-radius: 14px;
  -webkit-transform: rotateX(5deg);
  -moz-border:1px solid #c1c1c1;
  -moz-border-bottom: 1px solid #b0b0b0;
  -moz-border-radius: 14px;
  -moz-transform: rotateX(5deg);
}
.s:before{
  content: "S";
  color: #000;
  position: absolute;
  top:-3px;
  z-index:-1;
  text-shadow:none;
  -webkit-text-shadow:none;
}
.s:after{
  content: "S";
  color: #fff;
  position: absolute;
  right: 0px;
  z-index:-2;
  top:1.6px;
  text-shadow: none;
  -webkit-text-shadow: none;
  -moz-text-shadow: none;
  -moz-webkit-text-shadow: none;

}











이 사이트는 곧 패쇄 예정입니다. 새로 작업한 사이트로 와주세요^^ http://wiss.tistory.com/
댓글
댓글쓰기 폼