티스토리 블로그 스킨 글 게시일 리본 꾸미기

기존에 스퀘어 스킨(Square)에서 사용하던 등록일 리본 모양이 한쪽으로 날카롭게 튀어나와 계속 신경쓰이던 참이었는데 인터넷 서핑중에 맘에 드는 리본 모양을 발견했다. 게다가 사용하는 방법까지 친절하게..알려주고 있다. 곧바로 블로그의 기존 CSS 에서 해당하는 부분을 삭제하고 현재의 블로그에 적용해 보았다. 근데 지금의 위치와 모양을 설정하는데 한참 헤맸다. 오른쪽에 모양을 넣을수도 있고 크기를 길게 해서 넣을수도 있다. 한쪽만 모양이 있는게 좋아보여 오른쪽 리본은 모두 삭제했다. 모바일에서도 모두 왼쪽에 위치하도록 설정했다.

컬러도 블로그의 색상에 맞게 파랑 리본으로 수정했다. ㅎㅎ

컴퓨터에서 리본 적용 화면

모바일에서 리본 적용 화면

이제 당분간은 더 스킨 손볼일은 없어야 할텐데... ㅠ.ㅠ

/* 리본 만들기 */
#head .date { 
  text-align: center;
  position: absolute;
  font-size: 16px; font-size: 1.6rem;
  color: #fff; 
  margin: 5px 10px 10px 0;
  left:-10px;
  padding: 5px 15px; 
  text-shadow: 0 1px rgba(0,0,0,.8);
  background-color: #07a;
  background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
  -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
  box-shadow: 0 2px 0 rgba(0,0,0,.3); 
}
#head .date:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-color: transparent;
  bottom: -10px;
  border-width: 0 10px 10px 0;
  border-right-color: #222;
  left: 0;
}