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


목록
번호 제목 이름 날짜 조회 추천
7068 음악Dar Williams - February o happy dagger 18/02/08 3637 1
12029 일상/생각d.p.를 보고 떠오른 추억들 9 J_Square 21/08/30 3699 3
12089 방송/연예D.P 감상평 11 일상생활가능 21/09/18 4020 8
1503 도서/문학D.H 로렌스로 읽어보는 실존의 여성과 나 29 뤼야 15/11/09 11926 1
1882 IT/컴퓨터CSS로 삼각형을 그려보자 18 Toby 15/12/29 26399 6
1961 IT/컴퓨터CSS로 글씨에 불을 질러보자 10 Toby 16/01/06 10499 5
1341 음악Cristian Vogel - Gigantic Tautological Machinery, 들뢰즈를 추모하며... 4 새의선물 15/10/25 9568 1
11588 의료/건강COVID-19 백신 접종 18 세상의빛 21/04/17 4663 17
6548 음악Cool Jazz - 그대여, 그 쿨몽둥이는 내려놓아요. 4 Erzenico 17/11/07 3746 7
5970 일상/생각Contax S2_카메라 수리했습니다. 7 CONTAXS2 17/07/18 4429 2
10568 음악Colorful Han river 3 롤백 20/05/09 4784 2
8474 음악Coldplay - Everglow 5 마음만은열여덟 18/11/06 4220 3
165 기타CNN의 35년.youtube 3 삼성그룹 15/06/01 7607 0
10257 의료/건강CNN에 비친 코로나바이러스를 둘러싼 미중 갈등 파트 2 10 Zel 20/02/03 5961 3
2984 방송/연예CJ E&M, 지상파 광고매출 처음으로 추월 5 Leeka 16/06/09 4081 0
10803 음악Chopin, 야상곡 15번 F단조, 작품번호 55번 1악장 다키스트서클 20/07/22 3898 2
1302 음악child in time... 5 새의선물 15/10/21 7346 1
989 음악Chava Alberstein - End of Holiday 4 새의선물 15/09/14 3158 1
13697 일상/생각ChatGPT와 구글의 Bard 8 은머리 23/04/01 2108 5
13708 IT/컴퓨터chatgpt를 이용해서 노션 AI 처럼 써보기 큐리스 23/04/03 2419 0
13659 일상/생각chatgpt로 인해 인간은 경험을 잃어버릴지도 모르겠습니다. 7 큐리스 23/03/23 2337 5
13552 일상/생각chatgpt는 어쩌면 종교인들에게도 영향을 미칠것 같습니다. 9 큐리스 23/02/08 2649 0
13568 IT/컴퓨터ChatGPT 에게 만년필을 묻다 10 SCV 23/02/15 2403 4
13516 일상/생각chatgpt 생각보다 넘 웃겨요 ㅋㅋㅋ 4 큐리스 23/01/27 2251 0
13681 IT/컴퓨터chatgpt 때문에 웹소설을 안보게 되었어요. 4 큐리스 23/03/28 2281 1
목록

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

댓글