- 다양한 주제에 대해 자유롭게 글을 작성하는 게시판입니다.
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


*alchemist*
홍차넷이 불타고 있군요.. 흐흐 불처럼 흥해라!
얼그레이
헉.. 중간에 아이콘은 정말 노가다의 산물 아닌가요..? 대박.
사이트 들어가봤는데 코드는 어떻게 볼 수 있는건가요?.?
네. 이 페이지인데요.
http://nicolasgallagher.com/pure-css-gui-icons/demo/
어짜피 배포용은 아니고 감상용이라 별도의 소스코드를 따로 배포하고 있지는 않구요. 개발자도구로 하나씩 찍어서 보시면 됩니다.

아니면 이 파일을 열어서 보셔도 되겠네요.
http://nicolasgallagher.com/pure-css-gui-icons/demo/default.css
얼그레이
아 찍어서 보는 수밖에 없군요..
생각보다 코드가 길지 않아서 이것저것 찍어보긴 했는데 정말 그게 다였네요 ㄷㄷ
답변 감사합니다:D
본문에 슈퍼마리오 그림을 추가했습니다.
그림자 갯수에 제한이 없기 때문에 얼마든지 갯수를 늘릴 수 있거든요. 그래서 box-shadow를 활용한 도트 드로잉이 가능합니다.
J_Square
고딩 시절 세기말의 미니멀라이즈 유행에 text only 최소 용량으로 홈페이지를 만든다고 끄적이던 것이 어제 같은데…
그때 이런 효과들은 자바스크립트 떡칠로도 깔끔하지 않았는데, 무서운 세월입니다.
얼그레이
그림자 겹치는 효과는 알고 있었는데 불 지르는 효과는 신박하네요. 저런식으로도 응용이 가능하겠어요. 배우고갑니다.
볼만한 링크 두개 남깁니다.
http://line25.com/wp-content/uploads/2010/text-shadow/demo/
http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/

회사 업무에선 쓸일이 없지만, 개인작업에선 경우에 따라 꽤 써먹어볼만 하기도 합니다.
얼그레이
우와ㅋㅋㅋ몇몇 표현은 재밌네요.
css는 생각보다 활용도가 정말 무궁무진하네요.
몇가지는 활용할 수도 있겠어요.
링크 감사합니다!
YORDLE ONE
많이 배우고 갑니다.
목록
번호 제목 이름 날짜 조회 추천
2356 IT/컴퓨터알파고의 작동 원리 8 Toby 16/03/09 6162 5
2289 IT/컴퓨터애플이 2015년 상반기 투명성 보고서를 게시하였습니다. 17 Beer Inside 16/02/24 4608 3
2269 IT/컴퓨터LG의 플래그쉽 휴대폰 G5가 공개되었습니다. 15 Darwin4078 16/02/22 5402 0
2258 IT/컴퓨터삼성 기어 VR 사용기- 이것은 광고글이 아닙니다.(엄격,진지) 5 삼성그룹 16/02/19 5242 0
2110 IT/컴퓨터1월 한국 스마트폰 판매순위 10 Leeka 16/01/25 5270 0
2102 IT/컴퓨터구글,애플에 년 1조 2천억 지불 5 Leeka 16/01/23 4086 1
2070 IT/컴퓨터3주간의 개인 프로젝트 삽질기..(1/2) 11 칸나바롱 16/01/20 8504 5
2024 IT/컴퓨터IE 8,9,10 에 대한 업데이트가 공식 종료되었습니다. 34 Toby 16/01/14 5320 0
2012 IT/컴퓨터국정원 사이버안보 보안권고문 페이지의 정보는 쓸만한가요? 10 한아 16/01/12 6579 0
2011 IT/컴퓨터[정보] ESET NOD32 백신 1년 3,300원 프로모션 25 April_fool 16/01/12 7753 1
2002 IT/컴퓨터애플뮤직, 유료 회원 1000만명 돌파 18 Leeka 16/01/11 5161 0
1984 IT/컴퓨터인텔, 스카이레이크 기반의 컴퓨팅 스틱 발표 3 Beer Inside 16/01/09 4487 0
1964 IT/컴퓨터LG.. 15인치 980g.. 의 그램 공개 13 Leeka 16/01/06 6485 0
1961 IT/컴퓨터CSS로 글씨에 불을 질러보자 10 Toby 16/01/06 10882 5
1960 IT/컴퓨터추수감사절 미국 쇼핑 기기 분석 10 Leeka 16/01/06 5006 0
1950 IT/컴퓨터2015년 스마트워치 시장 결과 1 Leeka 16/01/05 4798 0
1943 IT/컴퓨터와이브로를 아시나요? 37 얼그레이 16/01/04 5394 2
1942 IT/컴퓨터중고차매매 스타트업 규제 논란 11 kpark 16/01/04 6290 0
1941 IT/컴퓨터정초부터 오배송으로 당황스런 일이.... 18 damianhwang 16/01/04 5659 0
1904 IT/컴퓨터세계 시총 1~3위 기업 순위.. 8 Leeka 15/12/31 4809 0
1895 IT/컴퓨터모바일 컨텐츠 제작업체 '메이크어스' 4 Toby 15/12/30 5908 0
1882 IT/컴퓨터CSS로 삼각형을 그려보자 18 Toby 15/12/29 26921 6
1800 IT/컴퓨터구글은 우릴 멍청이로 만드나 47 눈부심 15/12/17 7421 3
1736 IT/컴퓨터막귀 입장에서 써보는 5만원 이하 스피커 사용기 21 전크리넥스만써요 15/12/09 11787 2
1693 IT/컴퓨터Amazon All-new Kindle Paperwhite 사용기 14 선비 15/12/03 7558 0
목록

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

댓글