- 다양한 주제에 대해 자유롭게 글을 작성하는 게시판입니다.
Date 16/01/06 15:07:48
Name   Toby
Subject   CSS로 글씨에 불을 질러보자
지난번에는 CSS로 삼각형을 그리는 방법에 대해서 설명해드렸습니다.

조금 더 복잡한 도형을 그리는 방법을 살펴볼까요?

평행사변형


CSS3에 새로 추가된 transform:skew 속성을 사용하면 평행사변형을 쉽게 만들 수 있습니다.
skew 속성에 기울임 각도 값을 주면 사각형인 박스가 기울어져 평행사변형이 됩니다.
transform을 지원하는 IE9 이상의 브라우저에서 만들 수 있습니다.




사다리꼴


삼각형 만들기와 동일한 방법을 사용하면서 width, height 모두를 0으로 하는 대신 한 쪽의 값을 주게 되면 사다리 꼴을 만들 수 있습니다.
transparent 컬러를 지원하는 IE7 이상의 브라우저에서 만들 수 있습니다.



육각형 별


기본적으로 하나의 HTML 요소는 화면에 하나의 요소를 그리지만, 가상컨텐츠(CSS generated contents)를 활용하면 추가로 2개의 요소를 더 그릴 수 있습니다. 먼저 살펴보았던 삼각형 만들기 방법과 가상컨텐츠를 사용하여 이등변 삼각형을 두개 만든 뒤, 두개의 요소를 겹치면 육각형 별을 만들 수 있습니다.
가상컨텐츠를 만드는 선택자인 :before, :after를 지원하는 IE8 이상의 브라우저에서 만들 수 있습니다.




그 외의 다양한 모양들


이러한 방법들을 응용하면 하나의 HTML 요소만을 가지고도 오각형, 육각형, 마름모꼴, 말풍선, 초승달, 태극무늬 등등 다양한 도형들을 만들 수 있습니다.

해외의 유명 개발자인 Nicolas Gallagher는 하나의 HTML 요소만으로 만들 수 있는 다양한 아이콘 셋을 만들어 공개하기도 하였습니다.




그림자


CSS가 발전하면서 추가된 효과중 그림자를 그리는 기능이 있습니다.

글씨에 그림자를 추가해주는 text-shadow와, 영역에 그림자를 추가해주는 box-shadow가 그것인데요.

단순히 보여드리자면 다음과 같습니다.




본체로부터 얼마만큼 떨어질 것인가를 결정하는 x,y 좌표 값과 얼만큼 뿌옇게 번질 것인가를 결정하는 blur값, 그리고 색상을 결정하는 컬러값을 줄 수 있습니다.

이 속성들이 흥미로운 점은 쉼표를 이용해서 코드를 추가해주면 [여러개의 그림자]를 줄 수 있다는 점입니다.



[※ IE10 이상이나 다른 모던 브라우저를 이용하시는 분들만 그림자를 볼 수 있습니다. IE9이하 사용자분들은 궁금하시면 모바일로 보세요]


예를 들어 이런식으로 3개의 그림자를 만들 수 있습니다.

홍차넷




여기에 적당히 blur 값을 추가하여 뿌옇게 만들면 다음과 같이 되기도 합니다.

홍차넷




색상을 바꿔서 불꽃처럼 보이게 할 수도 있지요.

홍차넷



애니메이션을 줄 수도 있습니다.

홍차넷




p.s : 보너스로 box-shadow를 통해 점 하나씩 찍어가며 그린 슈퍼마리오 추가합니다.




5
  • Toby님을 방화범으로 신고하겠습니다.
  • CSS는 추천!
  • Wow


목록
번호 제목 이름 날짜 조회 추천
1332 육아/가정거미는 곤충이 아니라고? 14 Toby 15/10/24 9796 0
2972 기타다람쥐 - 생긴대로 판단하면 안 된다 (약혐) 14 Toby 16/06/08 8380 0
1466 IT/컴퓨터트위터 홍차봇 계정을 만들었습니다. 5 Toby 15/11/05 9921 2
2409 일상/생각스토퍼, 클로저, 댐퍼 5 Toby 16/03/16 7611 0
2960 IT/컴퓨터내 계정도 털렸을까? @ www 17 Toby 16/06/07 4077 0
1542 일상/생각홍차넷에 질문을 많이 해주세요. 13 Toby 15/11/12 6493 0
1576 IT/컴퓨터웹 프론트엔드(front-end)란? 20 Toby 15/11/17 8397 8
1616 꿀팁/강좌해커 스크립트 6 Toby 15/11/23 13098 5
1622 IT/컴퓨터20만원대 LG모니터 h/w 캘리브레이션 논란 18 Toby 15/11/24 21768 0
1702 꿀팁/강좌페이코 이벤트 꿀빠세요 (티몬 1만원 할인, 벅스 6개월 990원) 5 Toby 15/12/04 8538 1
1753 기타김광림의원 국회 중 인사청탁 문자 발송 15 Toby 15/12/11 8181 0
1788 정치세월호 청문회가 진행중입니다. 6 Toby 15/12/16 5149 0
1789 정치두산 희망퇴직 이슈 관련 22 Toby 15/12/16 6686 0
1791 기타망년회 벙개를 하려고 합니다 57 Toby 15/12/16 6061 3
1819 일상/생각홍차넷 망년회 벙개를 잘 마쳤습니다. 14 Toby 15/12/19 6549 0
1844 문화/예술텍사스 홀덤 19화가 업로드 되었습니다. 6 Toby 15/12/22 6071 1
1878 기타자문단 활동을 신청해주세요. 27 Toby 15/12/29 4991 0
1882 IT/컴퓨터CSS로 삼각형을 그려보자 18 Toby 15/12/29 26396 6
1895 IT/컴퓨터모바일 컨텐츠 제작업체 '메이크어스' 4 Toby 15/12/30 5610 0
1961 IT/컴퓨터CSS로 글씨에 불을 질러보자 10 Toby 16/01/06 10497 5
1963 정치엄마부대 대표의 경력 22 Toby 16/01/06 6034 0
1969 정치더불어민주당 새 로고 공개 / 김한길 안철수 신당 입당 21 Toby 16/01/07 5351 0
1996 방송/연예썰전 새 패널로 전원책, 유시민 합류 9 Toby 16/01/11 4982 0
2004 요리/음식탕수기 제작기 26 Toby 16/01/11 5746 6
2024 IT/컴퓨터IE 8,9,10 에 대한 업데이트가 공식 종료되었습니다. 34 Toby 16/01/14 4994 0
목록

+ : 최근 2시간내에 달린 댓글
+ : 최근 4시간내에 달린 댓글

댓글