Rev. 2.73

Web Designer Wall의 Nick La씨는 CSS3를 사용함에 있어서 기본적으로 이해해야 하는 항목들에 대하여 정리하고 새롭게 추가된 text-shadow, box-shadow 그리고 border-radius 속성들에 대한 사용법을 자세히 설명했습니다.

RGBA

색상 값으로 RGB 컬러와 투명도를 의미하는 A를 입력할 수 있습니다. (0 = 투명, 1 = 불투명)

rgba.gif

RBGA는 색상을 필요로 하는 모든 CSS 속성들 즉, 글꼴, 보더, 배경, 그림자 색상 등에 적용될 수 있습니다.

rgba2.gif

Text Shadow

텍스트에 그림자가 비치는 효과는 x-offset, y-offset, blur, 그리고 색상 순으로 구성됩니다.

text-shadow.gif

x-offset에 입력된 값 만큼 그림자가 왼쪽에 위치하고 y-offset에 위치한 값 만큼 그림자가 아래에 위치합니다. 그림자 색상에도 RGBA 값을 사용할 수있다는 사실을 잊지 마세요.

text-shadow-example2.gif

또 다른 방법으로는 쉼표(,)로 구분하여 여러개의 그림자를 지정할 수도 있습니다. 다음 예제는 글씨가 움푹 패인듯한 효과를 만들어 낸 것입니다.(1px 상단 및 하단 1px)

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

text-shadow-example3.gif

Border Radius

보더의 둥글기는 기존의 padding 또는 margin 속성의 사용법과 유사합니다. (예: border-radius: 20px) 이 속성은 브라우저 마다 설정하는 방법이 다릅니다. webkit 앤진을 사용하는 사파리, 크롬 브라우저에서는 "-webkit-"을 속성의 이름 앞에 작성해야하고 파이어폭스는 "-moz-"를 작성해야 합니다.(최근 크롬과 오페라 브라우저에서는 더이상 "-webkit-"같은 구분자를 사용하지 않아도 인식하기 시작했습니다.)

border-radius.gif

각 모서리마다 다른 값을 지정할 수도 있습니다. 이 방법은 브라우저마다 속성 이름이 통일되지 않았기 때문에 추천하지 않습니다.

border-radius-corners.gif

Box Shadow

상자에도 그림자 효과를 부여할 수 있습니다. "x-offset, y-offset, blur, 색상" 순으로 텍스트 그림자 속성을 지정하는 방법과 동일합니다.

box-shadow.gif

다시 말하지만, 한개의 요소에 한개 이상의 그림자 효과를 적용할 수 있습니다. 다음 예제는 3가지 그림자 효과를 하나의 요소 선언한 것입니다.

box-shadow2.gif

조금 아쉽지만 background 속성의 그라디언트 사용방법이 누락되었군요. 이것도 대박인데...

Comments

jQuery, MooTools, YUI 등과 같은 자바스크립트와 스타일시트 라이브러리 리소스를 CDN(Content Delivery Network)으로 사용할 수 있도록 하는 서비스입니다. Andrew Davey씨는 이러한 파일 주소를 한곳에 취합하여 일괄적으로 정보를 제공하는 cdncatalog.com을 오픈했습니다. 멋지군요!

JavaScript APIs

jQuery v1.4.2
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
jQuery UI v1.7.2
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js
Also check out the css themes for jQuery UI.
jQuery Validate v1.6
http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js
Extras: additional-methods.js
ASP.NET Ajax Start.js beta 0911
http://ajax.microsoft.com/ajax/beta/0911/Start.js
Prototype v1.6.1.0
http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js
script.aculo.us v1.8.3
http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js
MooTools v1.2.4
http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js
Dojo v1.4.1
http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js
http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js
SWFObject v2.2
http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js
Yahoo! User Interface Library (YUI) v2.8.0r4
http://yui.yahooapis.com/2.8.0r4/build/yuiloader/yuiloader-min.js
http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/yuiloader/yuiloader-min.js
Also, you'll want to use the very awesome YUI 2: Dependency Configurator.
Yahoo! User Interface Library (YUI) v3.0.0
http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js
Ext Core v3.1.0
http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js
Chrome Frame v1.0.2
http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js

CSS Resources

YUI CSS Reset v2.8.0r4
http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css
jQuery UI Themes
base, black-tie, blitzer, cupertino, dot-luv, excite-bike, hot-sneaks, humanity, mint-choc, redmond, smoothness, south-street, start, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader

뻘. 개인 프로젝트를 진행하느라 포스팅이 뜸했습니다. 오랜만에 불타올랐네요. 일단락 되었으므로 다시 블로그에 정진하도록 하겠습니다.

Comments