html5 로고

게시자: 대문 demun 카테고리: 퍼블리셔/html 2011.11.21 06:00
html5 에 관심이 있는 분이라면 아래와 같은 로고를 보신적이 있으실겁니다.


그런데 이것이 원래 이미지가 아닌 코드로 짜여졌다는 사실은 잘 몰랐을 수도 있을겁니다.
원래의 모양은 이렇습니다.


글꼴이 위와 다르죠?? 그리고 5라는 숫자도 다릅니다. 맨위가 수정한 코드를 이미지로 캡쳐한 것입니다.
html5 로고의 개념은 이렇습니다.
css 테두리모양, :before 와 :after 의 pseudo-elements , 그리고 css3 의 속성 불투명도와 변환, 또 구글의 API 를 이용한 글꼴, 또하나 div 안에 5라는 숫자를 넣은것입니다.

이걸 보기좋게 수정을 하였습니다.
원래의 코드 파일은 아래와 같습니다.


크롬이나 파이어폭스같은 브라우져로 열어보시면 됩니다. 특히 IE 6 같은 브라우져로 열어보시면 안됩니다. 
혹시 그런 브라우져로 열어보실분이 계실거 같아 제가 먼저 열어봅니다. 그럼 아래처럼 보입니다.

IE 6

IE 6



IE 7 마찬가지입니다. IE 6 과 별반 다르지 않습니다. 허나 IE 8 은 약간 흉내 냅니다.

IE 8

IE 8


이것은 수정해서 맨위의 사진처럼 나오게 한것입니다.
이걸 레이아웃에 사용하기에는 좀 어려움이 있는것 같습니다.
수정한 파일은 아래와 같습니다.


댓글