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
지난 22일에 파이어폭스의 새 버전이 나왔습니다. 여전히 버전은 3.6 대이지만, 3.7 에서 도입하려고 했던 플러그인 오류 보호 시스템이 포함되었습니다(크롬 브라우저의 그것과 유사합니다).

오류 보호 기능은 플러그인을 자신만의 프로세스로 분리합니다. 즉, 플러그인이 비정상적으로 종료되거나 멈추더라도 브라우저 전체에 영향을 미치지는 않게 됩니다. 모질라 의하면 브라우저가 죽는 원인의 1/3 이 써드파티 플러그인 때문입니다.

현재는 리눅스와 윈도우즈 버전에만 오류 보호 기능이 포함되어있으며, 맥 사용자들은 올해 말쯤에 출시될 파이어폭스 4까지 기다리셔야 합니다. 버전은 아주 조금 바뀌었는데, 정말 좋은 기능이 포함되었습니다.

from Firefox joins Chrome in plugin crash protection
Posted by 행복한고니 트랙백 2 : 댓글 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

CSS calc()

2010.06.16 08:40 from [IT] Web Tech

CSS에서 상대적인 크기 계산을 위해 자바스크립트를 사용해본 기억이 있을 것입니다. 예를 들어, '절반(50%)에서 5px 뺀 너비' 등과 같이 말이죠. 하지만, 이젠 그럴 필요가 없게 됐습니다.

Paul Roget씨가 CSS calc()에 대해서 설명해주셨습니다. CSS calc()는 아직 버그가 있는 상태입니다.

다음은 간단한 사용예입니다.
[code:css]
/*
* Two divs aligned, split up by a 1em margin
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}
/*
 * Make sure input field won't overlap parent
 */
input {
  padding:2px;
  border:1px solid black;
  display:block;
  width: -moz-calc(100% - 2 * 3px);
}

/*
 * combine different units!
 */

width: -moz-calc(3px + 50%/3 - 3em + 1rem);
이 덕분에 상당히 많은 자바스크립트를 줄일 수 있게 되었습니다. 하지만, Firefox에서만 가능한 방법이라 실무에 적용하기는 다소 어려울 듯 합니다. ^^;

from CSS calc() in the house
Posted by 행복한고니 트랙백 1 : 댓글 2

영화 '아멜리에' 중


IE6는 사라져야 합니다. 우리 모두 그 사실을 알고 있고, 심지어 MS조차 이를 인정했습니다(IE9 팀은 업그레이드를 권장했습니다). 문제는 이게 기술적인 수준의 논의에서만 그친다는 것입니다.

어떤 사람들은 고객들에게 사용 환경을 바꾸지 말고 계속 IE6를 메인 브라우저로 쓰도록 강요합니다. 사용 환경이 바뀌면 수천대의 컴퓨터를 업그레이드 해줘야하고, 새 시스템의 컴퓨터를 좋아하지 않는 고객을 다시 교육 시켜야 하기 때문입니다. 이게 바로  이러한 조직이 IE6 때문에 문제가 생길 수 있는 방법을 찾아야 하는 이유입니다. 

이런 이유에서 저는 IE6 사용자들에게 짜증을 유발할만한 방법을 연구했고, MotionBlur() 필터라는 해답을 얻었습니다. 몇 초마다 한번씩 이 필터를 적용하면 IE6 사용자들은 매우 괴이한 경험을 하게 될 것입니다.

소스 코드는 다음과 같습니다. 홈페이지에서 다운로드 할 수도 있습니다.
[code:js]
if(document.all && !window.XMLHttpRequest){
var x = 1,when=0,str,dir,fil;
function amelie(){
  if(x % 2 === 0){
    str = 0; dir = 0;
    when = Math.floor( Math.random() * 10000 ) + 2000;
    setTimeout( 'amelie()', when );
  } else {
    str = Math.floor( Math.random() * 2 ) + 2;
    dir = Math.floor( Math.random() * 360 );
    setTimeout( 'amelie()', 500 );
  }
  var fil = "progid:DXImageTransform.Microsoft.MotionBlur(strength="+ 
            str + ",direction=" + dir + ",enabled='true')";
  document.body.style.filter = fil;
  x++;
}
setTimeout('amelie()',1000);
}
이 코드를 사이트에 적용하면 IE6 사용자들이 불평할 것입니다. 그 때가 바로 우리의 계획을 실행할 때입니다.
  1. amelie()를 웹 사이트에 적용합니다.
  2. 사용자들이 불평하면 우리 코드는 괜찮으며 아무 문제없다고 합니다. (필요하다면 빌드 테스트 로그라도 보여주세요)
  3. 전문가를 포섭해 "소프트웨어 피로"의 개념에 대해 말하게 합니다. '소프트웨어 피로'란 소프트웨어도 기계와 마찬가지로 시간이 지남에 따라 기능이 약화되며 가끔 에러를 일으킬 때도 있다는 순도 100%의 거짓말입니다. 소프트웨어의 일부가 톱니바퀴처럼 조금씩 소모된다는 것이죠. 이 방식은 의외로 잘 먹힙니다. 저는 사람들에게 컴퓨터를 끈 후에는 리부팅하기전에 '모든 칩이 메모리에서 해제되려면' 15분 정도 기다려야 한다고 말하곤 했습니다.  
  4. IE6의 소프트웨어 피로때문에 그래픽 카드와 호환성의 문제가 있다는 루머를 퍼트립니다. 호환성 문제때문에 자잘한 화면 표시 문제가 나타난다고 하는 겁니다. 
  5. 이제 IE6 자체에 안정성 문제가 있는 것으로 만들었습니다. 안정성 문제 때문에 기업에서는 기술적인 문제로 환경을 바꿔야 할 때보다 더 빨리 움직일 것입니다.
너무 진지하게 보지는 마세요 :)

from amelie() - a devious plan to get rid of IE6
Posted by 행복한고니 트랙백 3 : 댓글 0
Thomas Frank 씨가 배열과 객체에 SQL과 유사한 문법의 질의를 하고, 데이터를 추출할 수 있는 SQLike 스크립트를 작성했습니다.
질의는 다음과 같이 할 수 있습니다.
[code:js]
SQLike.q(
    {
        Select: ['firstName','|count|','firstName','|sum|','salary','|min|','salary','|max|','salary','|avg|','salary'],
        From: dataArray,
        GroupBy: ['firstName'],
        Having: function(){return this.count_firstName>1},
        OrderBy: ['sum_salary','|desc|']
   }
)
결과는 다음과 같이 반환됩니다.
[code:js]
[{"firstName":"Stuart", "count_firstName":3, "sum_salary":180000, "min_salary":41000, "max_salary":90000, "avg_salary":60000}, {"firstName":"Vicki", "count_firstName":2, "sum_salary":163000, "min_salary":79000, "max_salary":84000, "avg_salary":81500}]
이 모든 과정은 메모리 상에서 일어나기 때문에 웹 서비스로서 비슷한 기능을 제공하는 YQL과는 조금 다릅니다.
SQL 질의를 할 수 있는 다른 방법으로는 Chris Pietschmann씨가 작성한 LINQ to JavaScript가 있습니다.
[code:js]
var myList = [
  {FirstName:"Chris",LastName:"Pearson"},
  {FirstName:"Kate",LastName:"Johnson"},
  {FirstName:"Josh",LastName:"Sutherland"},
  {FirstName:"John",LastName:"Ronald"},
  {FirstName:"Steve",LastName:"Pinkerton"}
];
var exampleArray = JSLINQ(myList)
                   .Where(function(item){ return item.FirstName == "Chris"; })
                   .OrderBy(function(item) { return item.FirstName; })
                   .Select(function(item){ return item.FirstName; });
개인적으로는 LINQ의 문법이 더 마음에 듭니다. 여러분은 어떠세요?

from Two JS solutions to run SQL-like statements on Arrays and Objects
Posted by 행복한고니 트랙백 2 : 댓글 0

Sergey Chernyshev씨와 그의 팀이 작성한 Show SlowYSlow와 Page Speed를 사용해 페이지 속도를 모니터링합니다.
Show Slow는 YSlow와 Page Speed를 여러분의 사이트에 사용하고, 매일 통계를 수집합니다. 여러분이 할 일은 가만히 앉아서 그래프를 보는 것뿐입니다!
지금 Alexa 상위 100개 사이트의 점수를 볼 수 있습니다.

매우 좋은 유틸리티입니다. 한번 써보세요~

from ShowSlow monitors your YSlow and Google Page Speed scores
Posted by 행복한고니 트랙백 1 : 댓글 0

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