이미지없는 소셜 버튼 css3 social icons

아이콘은 이제 까지 모두 이미지로 배경처리하고 hover 처리하면서 보여주곤 했었습니다.
하지만 이건 이미지가 하나도 없는 단순이 CSS코드만으로 아이콘을 표현합니다.

원문은 Pure CSS social medial icons 라고 합니다. 링크를 클릭하시면 원문을 보실 수 있습니다.
데모페이지는 보기

아래 이미지를 보시면 이해가 가실겁니다.


html5이다보니 익스플로러는 지원하지 않습니다.
그래도 IE 8 정도만 되고 거의 정상적으로 보이더군요.


HTML 마크업은 비교적 단순하며 아래와 같습니다. 
<ul>
   <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
   <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
   <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
   <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
   <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
   <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
   <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
   <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
   <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
   <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
</ul>

CSS 파일은 내용이 워낙 길어 블로그에서는 생략합니다.

테스트로 사용되었던 위의 코드 파일을 첨부합니다. 한번 보세요.

1.html



개    개