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


목록
번호 제목 이름 날짜 조회 추천
1970 방송/연예2015년 케이팝 유튜브 M/V 조회수 순위 4 Leeka 16/01/07 4691 0
1969 정치더불어민주당 새 로고 공개 / 김한길 안철수 신당 입당 21 Toby 16/01/07 5412 0
1968 창작[ 조각글 10주차] 시(詩) 2 레이드 16/01/07 3188 1
1967 일상/생각"내가 너에대해서 아는게 뭐가있냐?" 28 쉬군 16/01/07 4686 0
1966 음악Varèse - Ionisation 3 새의선물 16/01/07 3644 0
1965 기타JTBC 신년 토론 2016 한국사회를 말한다 - 유시민 최후 발언 4 김치찌개 16/01/07 4641 0
1964 IT/컴퓨터LG.. 15인치 980g.. 의 그램 공개 13 Leeka 16/01/06 6221 0
1963 정치엄마부대 대표의 경력 22 Toby 16/01/06 6099 0
1962 문화/예술바우터 하멜(Wouter Hamel) 내한공연 후기 9 Top 16/01/06 5349 0
1961 IT/컴퓨터CSS로 글씨에 불을 질러보자 10 Toby 16/01/06 10556 5
1960 IT/컴퓨터추수감사절 미국 쇼핑 기기 분석 10 Leeka 16/01/06 4727 0
1959 정치北 "첫 수소탄 실험 완전 성공"(속보) 19 NightBAya 16/01/06 4730 0
1958 기타2016년 스타트! 장기 묘수풀이 <28> (댓글에 해답있음) 6 위솝 16/01/06 5182 0
1956 의료/건강강약중강약 팟캐스트 지난 주 결방 및 금주부터 변화... 21 damianhwang 16/01/06 5447 0
1955 기타[불판] 최근 뉴스&이슈가 모이는 홍차넷 신문 <2> 41 위솝 16/01/06 6664 0
1954 기타젠더와 명칭 33 눈부심 16/01/06 5936 4
1953 음악Lucio Dalla - Ayrton 2 새의선물 16/01/06 3912 0
1952 음악I Pooh - Parsifal 2 새의선물 16/01/06 4156 0
1951 도서/문학오이디푸스와 페르스발 14 Moira 16/01/06 8697 4
1950 IT/컴퓨터2015년 스마트워치 시장 결과 1 Leeka 16/01/05 4526 0
1949 경제2015년 자동차 관련 이슈 11 수박이두통에게보린 16/01/05 6420 0
1948 일상/생각현실적인 긍정적 사고 5 Obsobs 16/01/05 4682 1
1947 기타추천 - 마리텔 안정환 선수 방송 10 까페레인 16/01/05 6755 0
1946 음악Vanessa Carlton - White Houses 2 새의선물 16/01/05 4077 0
1945 창작[10주차] 나미 2 *alchemist* 16/01/04 5087 1
목록

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

댓글