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


목록
번호 제목 이름 날짜 조회 추천
1341 음악Cristian Vogel - Gigantic Tautological Machinery, 들뢰즈를 추모하며... 4 새의선물 15/10/25 9566 1
1961 IT/컴퓨터CSS로 글씨에 불을 질러보자 10 Toby 16/01/06 10496 5
1882 IT/컴퓨터CSS로 삼각형을 그려보자 18 Toby 15/12/29 26393 6
1503 도서/문학D.H 로렌스로 읽어보는 실존의 여성과 나 29 뤼야 15/11/09 11926 1
12089 방송/연예D.P 감상평 11 일상생활가능 21/09/18 4015 8
12029 일상/생각d.p.를 보고 떠오른 추억들 9 J_Square 21/08/30 3687 3
7068 음악Dar Williams - February o happy dagger 18/02/08 3632 1
940 음악Dar Williams - When I Was a Boy 4 새의선물 15/09/07 3964 0
6598 영화DC영화는 기획의 문제라고 생각합니다. 10 한신 17/11/16 4953 4
7899 음악Defqwop - Heart Afire (feat. Strix) 놀보 18/07/21 3285 0
8489 영화DIVIDE WE FALL - 7월 22일. 3 Cascade 18/11/08 4748 0
4055 음악Divine Comedy - A Lady of a Certain Age 2 새의선물 16/11/02 3638 1
6009 음악Dixieland - 재즈의 탄생 14 Erzenico 17/07/26 3593 8
615 기타DNA를 사용해서 범인을 검거한 최초의 사례... 10 Neandertal 15/07/18 8844 0
2877 정치Do WOMAD dream of electric amazones? 18 당근매니아 16/05/24 7263 7
7632 일상/생각Don't force me 6 No.42 18/06/07 4374 4
3055 일상/생각DR-S5 7 성의준 16/06/17 3258 1
746 음악Dr. Dre 15년만에 신곡 발표 6 까페레인 15/08/08 4584 0
4157 의료/건강Dr. Feel Good 과 직업윤리 15 Beer Inside 16/11/15 5987 4
11019 스포츠Draftkings(DKNG), 스포츠의 의미를 뒤흔드는가? 1 존보글 20/10/03 4558 3
10068 게임DRX 도란이 징계받은 문제의 경기 (추정영상) 3 Darker-circle 19/12/10 4584 0
6805 게임Dutch Frontline(스포가 포함되있을수도 있습니다.) 2 1hour10minuteidw 17/12/21 3994 0
4876 게임EA 오리진 가입시 오리진 엑세스 7일 무료라고 합니다. 1 저퀴 17/02/15 4505 0
9918 게임EA와 밸브가 파트너십을 체결했습니다. 1 저퀴 19/10/30 3933 1
4018 꿀팁/강좌Ebay GSP (글로벌 쉬핑 프로그램) 이용후기 4 SCV 16/10/27 190921 3
목록

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

댓글