Louis HarboeiOS 4 아이콘을 CSS만으로 만들었습니다. 그의 작품을 볼 수 있는 것은 물론, 아이콘을 그리기 위해 사용한 높은 수준의 아이디어를 들어볼 수도 있습니다.
연락처 아이콘에서 사람의 실루엣을 그리기 위해 5개의 도형을 사용했습니다. 머리는 둥근 모서리를 가진 사각형으로, 목은 사각형으로, 몸은 약간 찌그러뜨린 반원으로 표현했습니다. 어깨에서 목으로 이어지는 선을 표현하기 위해 원 두개를 그 위에 겹쳤습니다.
날씨 아이콘에는 해의 뒤편에서 나오는 여러 갈래의 햇살이 있습니다. 햇살은 양 끝단으로 갈수록 투명해지는 그래디언트 배경색이 적용된 긴 사각형으로 표현했습니다. 사각형의 각기 다른 각을 표현하기 위해 -webkit-transform:rotate를 사용했습니다. 같은 효과를 iTunes 아이콘에도 적용했습니다.
iDisk 아이콘의 구름 아이콘을 그리기 위해 둥근 모서리 사각형 위에 두 개의 원을 겹쳐 표현했습니다. 큰 원은 사각형 바로 앞에서 멈추는 그래디언트 배경색을 가지고 있습니다.
달력을 표현하기 위한 전체 소스는 다음과 같습니다.
[code:css]
.calendar {
        background: #9B2424;
}
.calendar .header {
        -webkit-border-top-left-radius: 30px;
        -webkit-border-top-right-radius: 30px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEC4C4), to(#521B1C), color-stop(.92,#da3434),color-stop(.1,#ef9fa5));
        height: 50px;
        width: 176px;
        -webkit-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.4);
}

.calendar p.weekday {
        color: #fff;
        font-weight: bold;
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
        width: 176px;
        line-height: 50px;
        font-size: 25px;
        text-align: center;
}

.calendar p.daynumber {
        color: #000;
        font-weight: bold;
        text-shadow: 0px 1px 0px #fff;
        width: 176px;
        line-height: 126px;
        font-size: 130px;
        text-align: center;
}

.calendar .paper {
        -webkit-border-bottom-left-radius: 30px;
        -webkit-border-bottom-right-radius: 30px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#EDEDED), color-stop(.05,#BFBFBF),color-stop(.2,#E3E3E3));
        height: 126px;
        width: 176px;
}
멋지죠? 이 방법의 장점은 크기를 자유자재로 조절할 수 있다는 것입니다. 벌써 아이폰 4 사용자들 사이에서는 저해상도 아이콘에 대한 불만이 나타나고 있습니다. 심지어 페이스북 앱이라 해도... 텍스트는 정말 훌륭하지만 아이콘은 투박합니다.

이 외에 또 다른 CSS 그래디언트 예제를 소개할까 합니다. 아이콘, 버튼, 진행상태바 등을 CSS로 표현했습니다.

from Made In CSS; iOS icons and more
Posted by 행복한고니 트랙백 1 : 댓글 1
구글의 Chrome and HTML DevRel 팀에서 HTML5에 대한 좋은 자료들을 모아놓은 HTML5Rocks라는 새로운 포탈을 선보였습니다.

현재 이 사이트는 HTML5 자체에 대해 설명하는 여러 자료는 물론, 브라우저 지원확인해볼 수 있는 링크나 스크립트, 오래된라우저를 위한 HTML5 지원 스크립트 등을 포함합니다.

리소스 외에도, 멋진 HTML5 슬라이드 프리젠테이션과 바로 실험해볼 수 있는 코드 놀이터도 있습니다. 슬라이드는 이전에 APIRocks에서 선보였던 것과 동일합니다.

많은 양의 좋은 자료가 한 곳에 모여있습니다. 이제 막 선보인 점을 감안하면, 곧 더 많은 내용이 추가될 것이라 생각합니다.

from HTML5Rocks.com: Google DevRel shares the love
Posted by 행복한고니 트랙백 2 : 댓글 2
돋보기 보는 사람

http://www.flickr.com/photos/andercismo/2349098787/


Jack Prosser가 재밌는 CSS 돋보기를 만들었습니다.
주요 컨셉은 CSS의 radius를 사용해서 동그라미 모양의 뷰 영역을 만드는 것입니다. 이 영역은 현재 페이지와 똑같은 컨텐트를 가진 iframe을 포함합니다. CSS3를 사용해서 iframe 내부의 컨텐트를 2배 확대해서, 작은 컨텐트를 읽기 편하게 만들었습니다. 이 돋보기는 간단한 키보드 조합으로 보이고/감추고 축소/확대를 할 수 있습니다. 앞으로는 구글 크롬이나 Firefox 확장기능을 만들 생각입니다. 확장기능은 iframe을 사용하지 않고, 페이지 컨텐트에 캔버스를 사용할 생각입니다. 물론, 페이지 컨텐트가 업데이트되면 캔버스도 업데이트 될 것입니다.
실제 동작을 보세요:


from MagnifyMa : A CSS magnifying glass
Posted by 행복한고니 트랙백 2 : 댓글 1

Greg Murray씨가 HTML5 Fish Tank라는 재밌는 예제 프로그램 베타판을 작성했습니다. 이 프로그램은 사용자가 자신만의 물고기를 만들고, 만든 물고기를 어항에 놓을 수 있는 프로그램입니다.
또한, 이 프로그램에는 저수준(low level)의 Canvas와 CSS3 전이/변형 효과가 사용되었습니다.
[code:js]
<div id="1275463173677" class="fish" style="-webkit-transition-duration: 3369ms; -webkit-transform-origin-x: 508px; -webkit-transform-origin-y: 485px; -webkit-transform: rotateY(0deg) translate(508px, 485px); ">
    <div style="position: absolute; margin-top: 27px; margin-left: 70px; "><canvas width="30" height="44" style="width: 30px; height: 66px; "></canvas></div>
    <div style="position: absolute; margin-top: 25px; margin-left: 2px; "><canvas width="71" height="71" style="width: 71.5px; height: 71.5px; "></canvas></div>
    <div style="position: absolute; margin-top: 40px; margin-left: 19px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
    <div style="position: absolute; margin-top: 59px; margin-left: 4px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
    <div style="position: absolute; margin-top: 45px; margin-left: 40px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
    <div style="position: absolute; margin-top: 19px; margin-left: 26px; "><canvas width="33" height="33" style="width: 33px; height: 33px; "></canvas></div>
    <div style="position: absolute; margin-top: 81px; margin-left: 40px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
</div>
물고기의 애니메이션은 다음과 같이 작성되었습니다.
[code:js] function goFish( target) {         if ( !target.lastPoint) {             target.lastPoint = target.currentPoint;         }         if ( target.timer ) {             clearTimeout(  target.timer );         }         target.currentPoint = getRandomPoint();         target.style.webkitTransitionDuration = target.currentPoint.d;         target.style.webkitTransformOrigin = target.currentPoint .x + " " + target.currentPoint.y;         var _scale = "";         if ( target.lastPoint.x> target.currentPoint.x ) {             _scale = "rotateY(-180deg)";         } else {              _scale = "rotateY(0deg)";         }          target.style.webkitTransform =  _scale + " translate(" + target.currentPoint.x + "px, " + target.currentPoint.y + "px)";         target.lastPoint = target.currentPoint;         target.timer = setTimeout( function () {             console.log( "saved the day" );             goFish( target);         },  ( target.currentPoint.d + 2000 ) ); }

from Build a Fish Tank with Canvas and CSS3
Posted by 행복한고니 트랙백 2 : 댓글 2
Chris Vanrensburg: “최근의 위치 변경 애니메이션의 연장선 상에서, 저는 객체의 크기가 변함에 따라 곡선이 어떻게 적용되는지 보고 싶었습니다. 예상대로 너비와 높이 CSS 스타일 속성에 여러가지 곡선을 적용해보는 것은 꽤 재미있는 효과를 만들어냈습니다.”
웹 2.0 진영에서는 둥근 모서리가 사랑받고 있습니다. 그런데 애니메이션이라니요! 이 애니메이션은 Chris의 최근 실험에서 확인할 수 있습니다. 클릭해서 데모와 부드러운 효과를 살펴보세요.


from Round Corners. Moving.
Posted by 행복한고니 트랙백 1 : 댓글 0
현재의 웹은 어떻게 흘러가고 있을까요? 존 얼솝(John Allsopp)씨가 웹 개발 현황 2010 최신 설문조사 결과와 함께 돌아왔습니다.
이 어마한 양의 데이터는 직접 받아볼 수 있으며, 전체 보고서는 PDF로 볼 수 있습니다.

보고서에서 주목할만한 부분을 간추려봤습니다.
  • 소수의 응답자만이 인터넷 익스플로러를 일상적으로 사용하지만, 사이트를 테스트할 때는 IE8을 가장 많이 사용했습니다.
  •  구글 크롬이 극적으로 성장해 개발자들이 사용하는 브라우저 3위로 자리잡았습니다. 20%인 사파리를 17%로 바짝 추격하고 있습니다.
  • 파이어폭스가 여전히 1위 자리를 지키고 있지만, 응답자들의 브라우저는 3.5와 3.6으로 나누어졌습니다.
  • 파이어폭스 3.6은 설문조사를 실시하기 1주일 전에 출시되었습니다.
  • 절반 이상의 응답자들이 맥 OS X를 주 운영체제로 사용했습니다.
  • 응답자들의 1/3 정도(16%)가 모바일 사파리를 사용하는 반면, 안드로이드는 4%에 그쳤습니다.
  • jQuery의 독주는 더 강화되었습니다. 80%에 가까운 응답자들이 라이브러리로 jQuery를 사용했습니다. 작년에는 63% 였습니다.
  • Cappuccino나 SproutCore와 같은 데스크톱스러운 응용프로그램 프레임워크들이 개발자들에게 조금씩 퍼지고 있는 것처럼 보입니다. 데스크톱스러운 응용프로그램의 시대가 아직 오지 않은 것일 수도 있고, 개발자들이 데스크톱 흉내를 낸 웹 응용프로그램을 만들고 싶어하지 않는 것일 수도 있습니다.
웹 기술 쪽에서의 화두는 역시 HTML5, CSS3, 웹폰트 등이었습니다.
  • 다수의 응답자들(45%)이 CSS3나 실험적인 CSS를 사용했습니다. 사용하지 않는 비율은 44%입니다. 이는 작년에 비해 극적으로 증가한 수치입니다(작년에는 22%가 CSS3 사용, 70%가 사용하지 않음).
  • 바로 전 설문조사에서는 4%의 응답자만이 @font-face를 사용한 웹 폰트를 적용했었는데, 이번 조사에서는 23%로 증가했습니다.
  • 응답자의 30%가 HTML5를 사용하는데, 바로 전 설문조사에서는 10%이하였습니다.
재밌는 결과네요. 데이터에서 또 다른 트렌드를 알 수 있나요?

from The State of Web Development 2010 - Web Directions
Posted by 행복한고니 트랙백 1 : 댓글 2
HTML5와 CSS3에는 흥미로운 새 기능들이 많이 포함되어 있습니다. 안타깝지만, 이런 매력있는 기능들은 Firefox, Safari/Webkit, Opera 등의 일부 브라우저에만 구현되어있습니다. 이 글에서 여러분이 HTML5 & CSS3에 대한 팁과 통찰을 얻었으면 합니다. 시작합니다!

새로운 구조적 요소
HTML5에서는 새로운 구조적 요소가 추가되었습니다. 이런 요소들은 데이터를 보다 좋고, 간결하고, 명료한 방식으로 마크업할 수 있도록 도와줍니다. 검색 엔진은 header, nav, footer 등과 같은 요소를 인식함으로써 웹 페이지의 어느 부분이 컨텐트인지 보다 정밀하게 알 수 있습니다.

Webkit의 transform 속성
객체는 크기를 조절할 수 있고, 회전하거나 비틀 수도 있으며, 변형될 수 있습니다. 이 속성은 사용자와 상호 작용하는 객체에 애니메이션을 추가할 수 있도록 합니다. 사용자에게 인상을 심어줄 수도 있고, 슬라이드와 같은 제품에 사용할 수도 있을 것입니다.

새로운 CSS3 속성
CSS3에는 모서리 둥글게 다듬기(Border-radius), 여러개의 배경(Multiple Background), 텍스트 그림자(Text-shadow)와 박스 그림자(Box-shadow)와 같은 멋진 속성이 포함되어 있습니다.

Border-radius를 사용하면 패널이나 탭 모서리에 둥근 효과를 줄 수 있습니다. 이 속성은 상자의 꼭지점을 각각 나타내는 4개의 개별적인 값을 포함합니다.

Multiple Background는 하나의 요소에 여러 개의 이미지 배경을 사용할 수 있는 기능입니다. 이 기능을 사용하려면 배경 이미지들을 쉼표로 분리하면 됩니다.

Text-shadowBox-shadow는 지정한 이미지나 h1 요소 등에 그림자를 추가합니다. 이 기능 덕분에 포토샵의 필요성이 많이 줄었습니다.

CSS3의 border-radius, text-shadow, box-shadow를 사용하면 작은 버튼을 손쉽게 만들 수 있습니다. 예제는 링크를 참고하세요.

글자 크기의 픽셀
글자 크기에 em이나 % 단위 대신 픽셀(px) 단위를 사용하세요. 모든 주요 브라우저들이 HTML5와 CSS3의 구현을 완벽하게 끝내면 우리 모두는 텍스트 크기를 조절하는 대신 페이지 전체를 확대하거나 축소하게 될 것입니다.

드래그 & 드롭
장바구니에 상품을 던져 넣는 일은 멋지죠. HTML5는 드래그(drag)와 드롭(drop) 이벤트를 지원합니다. 이 기능은 최근에 Gmail에 추가되었습니다.

Web Forms 2.0
폼은 웹 전반에 걸쳐 사용되고 있습니다. 블로그에 댓글을 쓸 때, 사용자 계정으로 로그인할 때, 아니면 온라인으로 책을 구입할 때에 우리는 폼을 사용합니다. 현재는 자바스크립트를 사용해서 폼에 입력한 값을 검증하지만, HTML5에서 지원하는 required나 email과 같은 추가 속성이 앞으로는 그 역할을 대신할 것입니다. 이들 속성을 사용하면 사용자의 이름과 메일이 형식에 맞는지 체크해주고, 값을 입력했는지 확인해줍니다. 

리소스


TAG CSS3, html5
Posted by 행복한고니 트랙백 1 : 댓글 0
Michael Ventnor씨가 HTML5에 정의된 체크박스와 라디오버튼의 미정 상태[각주:1]를 구현하고 이에 대한 글을 작성하셨습니다:
웹 개발을 해보셨다면, 체크박스와 라디오 버튼은 선택했거나 혹은 선택하지 않은 두 가지의 상태가 있다는 것을 아실 것입니다. 하지만, 체크박스의 경우 두 가지 상태 중간의 미정 상태를 사용하고 싶을 수도 있습니다. 예를 들면, 모든 체크박스가 하나의 상태(선택됐거나 선택되지 않은 것 중 하나)를 가질 때, 그를 표현할 수 있는 마스터 체크박스의 경우가 있습니다(아래 그림 참고). HTML5의 "미정 상태" DOM 속성을 구현한 덕분에 이 기능은 Trunk (Firefox 3.2) 에서 사용할 수 있습니다. 다음 코드면 충분하죠.
[code:js]
document.getElementById(”check1").indeterminate = true;
아래 그림을 보시면 애매하게 선택된 체크박스를 확인할 수 있습니다(첫번째 그룹의 "CheckAll" 체크박스). CSS3의 :indeterminate 수도 클래스(pseudoclass)는 아직 지원하지 않습니다.

from document.getElementById(”check1″).indeterminate = true; Now shipping in Firefox Trunk
  1. 영어로는 indeterminate로, 체크박스를 여러번 클릭하면 나타나는 선택한 것도 아니고 선택하지 않은 것도 아닌 상태를 뜻합니다. 우리말로는 정확한 번역이 없어 "정해지지 않았다"는 뜻으로 "미정(未定) 상태"라 번역했습니다. [본문으로]
Posted by 행복한고니 트랙백 0 : 댓글 0
Wired의 Michael Calore 씨가 IE 팀이 참석한 "전문가에게 묻습니다" 웹 채팅에 대한 글을 작성하셨습니다.

주요 사항은 이렇습니다.
  • IE8은 CSS 2.1에 대한 완전한 전체 스펙 지원을 목표로 하고 있습니다.
  • IE8에서 가능한 CSS3는 쓰기 모드뿐입니다(세로 쓰기 지원을 위한 것입니다). IE는 이 기능을 5.x 버전때부터 지원해왔으며, 앞으로도 계속 지원할 것입니다.
  • IE8은 CSS의 border-radius을 지원하지 않습니다. 이 속성은 이미지를 사용하지 않고 경계선 모서리를 둥글게 만들 때 사용합니다. Microsoft의 Chris Wilson씨는 border-raduis가 "꽤 높은 순위로 배정되어있다"라고 했지만, IE8이 릴리스 된 후에나 진행될 듯 합니다.
  • IE9에 대한 공식적인 로드맵은 없습니다만, 네이티브 SVG 지원에 대한 가능성이 있습니다.
  • 새로운 자바스크립트 엔진도 나타날 것 같습니다. 사용자들은 이렇게 요구했습니다. "다른 브라우저들처럼 이제는 자바스크립트 컴파일에 대해서 고려해주세요. 사파리는 SquirrelFish를 도입했고 지난 주 SquirrelFish의 반응 V8에 육박하고 있죠. Mozilla는 ScreamingMonkey에 대한 작업을 시작했고요. IE9도 새 자바스크립트 엔진을 가지게 되나요?". 그에 대한 대답은 이렇습니다. "우리는 IE8과 그 이후 버전부터 자바스크립트 성능을 개선하는 일에 매우 집중하고 있습니다. 이 노력에 대한 뛰어난 앞으로의 결과물을 기대하고 있습니다."
SVG가 지원된다면 멋지겠네요. 제발 캔버스 지원이 되면 좋겠습니다. 부탁합니다, 크리스씨. 그 일을 돕기 위해 제가 Ajaxian에 뭐라고 쓰면 될까요? ;)

from What is coming up with IE8 and 9?
Posted by 행복한고니 트랙백 0 : 댓글 0