-
단 두줄짜리 컬럼 그리드 스타일시트
Vladimir Carrer씨는 스타일시트 단 두줄을 설정하는 것으로 다양한 크기의 컬럼을 설정하는 그리드 프레임웍을 소개했습니다. 위 데모는 아래의 간단한 두줄로 이루어진 스타일시트와 최소한의 HTML 코드만으로 만들...
Category: 자료 - 웹개발, Reactions: 2, Views: 107,126, Author: 파이어준
-
CSS3 애니메이션 생성기 - Sencha Animator
Sencha에서 CSS3 애니메이션을 만들어주는 데스크탑용 애플리케이션인 Sencha Animator를 릴리즈했습니다. 플래시의 타임라인을 이용한 애니메이션 생성 인터페이스와 유사한 레이아웃으로 구성되었으며, 간단한 도형...
Category: 자료 - 웹개발, Reactions: 10, Views: 38,703, Author: 파이어준
-
퀴즈: 어떤 광고가 플래시이고 CSS일까요?
위 화면은 sencha.com의 Arne Bech씨가 플래시로 만든 간단한 애니메이션 광고를 CSS3로 재현한 것입니다. 어느쪽이 CSS이고 플래시일까요? 이 것은 animation CSS속성을 지원하는 웹킷 계열 브라우저(사파리, 크롬)에서 정상...
Category: 자료 - 웹개발, Reactions: 21, Views: 23,144, Author: 파이어준
-
디바이스별 미디어 쿼리 정의
데스크탑 브라우저, iPhone, iPad 모바일 브라우저 등에 스타일시트를 구분하기 위한 미디어 쿼리(Media Queries)를 Andy Clarke씨가 정리했습니다. 속성으로 구분하는 방법과 파일로 구분하는 두가지 방법을 모두 포함합니...
Category: 자료 - 웹개발, Reactions: 36, Views: 90,565, Author: 파이어준
-
인포그래픽스 - CSS의 역사
TemplateMonster.com에서 제공하는 CSS 역사 인포그래픽스를 소개합니다. CSS의 역사를 비롯해 CSS1, CSS2의 특징과 브라우저별 CSS3 속성 지원 상황 등을 한눈에 확인할 수 있도록 잘 정리되어 있습니다..
Category: 자료 - 웹개발, Reactions: 6, Views: 25,010, Author: 파이어준
-
HTML input 요소와 CSS3의 만남 - umbrUI
umbrUI는 HTML input 요소에 CSS3를 입혀서 만든 UI 데모입니다. 인터랙티브 디자이너인 Simon씨가 작성한 것으로 위 화면에 보이는 것과 같이 믿기 어려운 결과물들을 보여주고 있습니다. 범위 슬라이더, 체크박스, 라디...
Category: 자료 - 웹개발, Reactions: 15, Views: 37,065, Author: 파이어준
-
WebDevMobile 열린세미나 - CSS3 발표자료 공유
WebDevMobile에서 주관하는 열린세미나에서 금일 발표한 슬라이드입니다. "CSS3의 속성들"을 소개하는 부분의 소스와 예제는 zenelements.com를 참고했으며, "구린 브라우저 사용자에게는 구린 사용 경험을 제공하자"라는...
Category: 자료 - 웹개발, Reactions: 35, Views: 60,179, Author: 파이어준
-
인터넷 익스플로러 6-7-8에서 CSS3사용하기 - PIE
PIE(Progressive Internet Explorer)는 인터넷 익스플로러 6-7-8에서 CSS3의 몇몇 속성들을 인식하고 출력하는 첨부파일(.htc)형식의 라이브러리입니다. 얼마 전에 소개했던 IE-CSS3와 마찬가지로 VML을 이용하며, behavior: url(PIE.ht...
Category: 자료 - 웹개발, Reactions: 21, Views: 114,029, Author: 파이어준
-
순수 CSS3로 만든 페이지 넘기기 효과
CSS를 예술의 경지까지 끌어올린 Román Cortés씨는 순수 CSS만으로 3D 패럴랙스 효과를 만들어 내고 콜라 캔과 찌그러진 콜라 캔을 입체적으로 매핑한 경험이 있습니다. 그는 이제 조금더 실용적인 곳에 CSS 테크닉을 ...
Category: 자료 - 웹개발, Reactions: 30, Views: 72,251, Author: 파이어준
-
이미지를 예쁘게 하는 CSS 보더
Evan Byrne씨는 간단한 CSS 아이디어로 이미지를 더욱 예쁘게 표현하는 보더를 만드는 방법에 대하여 소개했습니다. 이것은 CSS 가짜 요소를 사용하는 방법입니다. <img>요소에는 가짜 요소를 사용할 수 없기 때문...
Category: 자료 - 웹개발, Reactions: 15, Views: 32,700, Author: 파이어준
-
Scripty2 하드웨어 가속 애니메이션 테스트
Scripty2 프로젝트 오너인 Thomas Fuchs씨는 하드웨어 가속을 지원하는 애니메이션 테스트 페이지를 만들고 공개했습니다. 그가 말하는 하드웨어 가속은 맥OS와 iOS에서만 지원되는 CSS transforms을 이용하는 것으로 Effect....
Category: 자료 - 웹개발, Reactions: 7, Views: 41,054, Author: 파이어준
-
순수 CSS만으로 만든 iOS 아이콘들
Louis Harboe씨는 순수 CSS만을 이용하여 iOS의 11개 아이콘들을 만들었습니다. 둥근 모서리, 그림자, 그라디언트, RGBA, 가짜 요소를 응용한 것이라고 합니다. CSS만으로 SVG수준의 리치 스타일링이 가능하다는 것을 보여...
Category: 자료 - 웹개발, Reactions: 11, Views: 34,157, Author: 파이어준
-
스타일 시트를 경량화하는 11가지 팁
Jeff Starr씨는 스타일 시트를 경량화(Micro-Optimization)하는 11가지 팁을 소개했습니다. 이것은 코드 전체를 압축(Minify)하는 것이 아닌, CSS 코드 자체를 효율적으로 작성하거나 배포하는 방법입니다. Tip #1: 색상 값을 ...
Category: 자료 - 웹개발, Reactions: 24, Views: 38,354, Author: 파이어준
-
Hex 코드로 색상 알아 맞추기 게임
당신은 CSS의 Hex 코드를 보고 색상을 유추해 낼 수 있나요? Hex 코드만으로 색상을 구별해 내는 퀴즈 게임이 Ajaxian에 소개되었네요. 난이도를 높일수록 보기가 늘어납니다. 완전 골때리네요. ㅋㅋㅋ.
Category: 자료 - 웹개발, Reactions: 8, Views: 32,202, Author: 파이어준
-
순수 CSS로 만든 애니메이션: 트위터 실패 고래
CSS3를 이용한 개발자들의 미친짓은 끊임없이 계속되는군요. Steve Dennis씨는 순수 CSS만을 이용하여 트위터의 용량 초과 화면인 트위터 실패 고래(?)를 만들어 냈습니다. 거기에 애니메이션까지 추가했군요. border-rad...
Category: 자료 - 웹개발, Reactions: 35, Views: 33,340, Author: 파이어준
-
IE 6-7-8에서 CSS3 사용하기 - IE-CSS3
IE-CSS3는 border-radius, box-shadow, text-shadow 속성을 그대로 이어 받아 htc 스크립트를 이용하여 표현해 줍니다. IE의 VML API를 이용하여 CSS3의 비주얼 효과를 표현하는 방법을 사용하기 때문에 CSS3와 동등한 수준의 결과물...
Category: 자료 - 웹개발, Reactions: 26, Views: 64,897, Author: 파이어준
-
CSS 2.1과 CSS 3의 치트 시트
Smashing Magazine에서 CSS 2.1과 CSS 3의 치트 시트를 만들고 공개했습니다. 이 시트는 CSS 2.1과 CSS 3로 구분되어 작성되었으며 미리보기용 JPEG와 PDF버전으로 제공됩니다. 출력해서 벽에 붙여야 겠군요. CSS 2.1 CSS 3.
Category: 자료 - 웹개발, Reactions: 7, Views: 23,351, Author: 파이어준
-
CSS3 그라디언트 버튼 만들기
Web Designer Wall의 Nick La씨는 div, span, p, a, button, input 등 다양한 HTML 요소에 적용이 가능한 예쁜 그라디언트 버튼을 CSS3를 이용하여 만드는 방법에 대하여 포스팅했습니다. 이미지나 자바스크립트를 사용하지 않았으...
Category: 자료 - 웹개발, Reactions: 6, Views: 40,108, Author: 파이어준
-
Aptana Studio 3 Rails 프리뷰 릴리즈
Aptana Studio 3 Rails는 Aptana 2에서 플러그인으로 지원하던 Ruby on Rails 프로그래밍 환경을 통합하여 독립실행형으로 때낸 것이며, 조금 더 생산적인 웹앱을 개발할 수 있도록 도모하기 위한 목적으로 만들어진 개발도구...
Category: 자료 - 웹개발, Reactions: 3, Views: 38,356, Author: 파이어준
-
Word-Wrap 속성을 이용하여 강제로 줄바꿈하기
동적으로 생산되는 HTML에 CSS를 입히는 과정에서 문자가 자동으로 줄바꿈되지 않는 경험을 한 적이 있나요? 저는 한 때 이러한 현상에 대한 해결방법을 찾지 못해 overflow속성을 이용하여 모양이 흐트러지지 않도록...
Category: 자료 - 웹개발, Reactions: 4, Views: 56,578, Author: 파이어준
-
CSS3로 만든 다양한 말풍선
via Awesome Speech Bubbles With Pure CSS3.
Category: 자료 - 웹개발, Reactions: 18, Views: 27,358, Author: 파이어준
-
CSS3로 만든 윈도7 스타일 스타트 메뉴
Janko Jovanovic씨는 border-radius, background: gradient, box-shadow등의 CSS3 속성을 이용하여 윈도7 스타일 스타트 메뉴를 만들었습니다. 메뉴 전반에 사용된 배경과 마우스 오버시 나타나는 박스에 그라디언트 속성을, 코너에 ...
Category: 자료 - 웹개발, Reactions: 2, Views: 20,211, Author: 파이어준
-
CSS3로 만든 렌즈 플레어 효과
얼마전 CSS만을 이용하여 글꼴을 만들어버린 David Desandro씨가 이번에는 CSS3를 이용하여 위와 같은 텍스트 렌즈 플레어 효과를 만들어 냈습니다. text-shadow 속성을 적절히 사용하면 다양한 효과를 만들어 낼 수 있겠군...
Category: 자료 - 웹개발, Reactions: 3, Views: 14,278, Author: 파이어준
-
CSS3와 HTML5의 주요 브라우저 호환성 목록
FindMeByIP.com에서는 CSS3의 주요 속성과 선택자, HTML5의 요소와 속성 그리고 웹앱을 위한 특징들 등에 대하여 주요한 OS, 브라우저들을 대상으로 지원여부를 한눈에 확인할 수 있는 호환성 테이블을 제공합니다. OS는 ...
Category: 자료 - 웹개발, Reactions: 5, Views: 30,700, Author: 파이어준
-
CSS로 만든 영문 글꼴 - CURTIS CSS TYPEFACE
David Desandro씨는 CSS를 이용하여 CURTIS라는 이름의 글꼴을 만들었습니다. 한 문자를 구성하기 위해 아래와 같은 마크업이 사용되며 서너개의 <span>요소들로 알파벳 문자 하나가 만들어집니다. 그리고 이 글꼴은...
Category: 자료 - 웹개발, Reactions: 6, Views: 26,504, Author: 파이어준
-
CSS3, Please! The Cross-Browser CSS3 Rule Generator
CSS3의 인기는 정말 대단합니다. 표준으로 자리잡기도 전에 벌써부터 크로스-브라우저를 운운하며 여러가지 사용 방법을 소개하는 내용들이 넘쳐나고 있습니다. Paul Irish씨와 Jonathan Neal씨는 CSS3에 추가된 다양한 ...
Category: 자료 - 웹개발, Reactions: 1, Views: 40,019, Author: 파이어준
-
CSS3의 기본적인 사용방법
Web Designer Wall의 Nick La씨는 CSS3를 사용함에 있어서 기본적으로 이해해야 하는 항목들에 대하여 정리하고 새롭게 추가된 text-shadow, box-shadow 그리고 border-radius 속성들에 대한 사용법을 자세히 설명했습니다. RGBA 색상...
Category: 자료 - 웹개발, Reactions: 8, Views: 34,071, Author: 파이어준
-
아이폰용 웹기반 카 네비게이션 시스템 - iRoute
iRoute는 아이폰/아이팟 터치에서 회원가입 없이 누구나 무료로 사용할 수 있는 웹기반 카 네비게이션 시스템입니다. 이 서비스는 약 2주간 밤잠을 설쳐가며 구축한 개인 프로젝트로써 오픈 API를 적극 활용하고 HTM...
Category: 자료 - 웹개발, Reactions: 44, Views: 84,947, Author: 파이어준
-
CSS3로 만든 아름다운 드롭다운 네비게이션
Web Designer Wall의 Nick La씨는 CSS3를 이용하여 위와 같은 아름다운 드롭다운 네비게이션을 구현했습니다. 더불어 CSS3를 지원하지 않는 브라우저에서도 최소한의 모습을 유지하고 정상적으로 동작하도록 만들었습니다...
Category: 자료 - 웹개발, Reactions: 3, Views: 30,891, Author: 파이어준
-
CSS3의 회전 속성을 응용해 만든 시계 2종
Jon Combe씨는 HTML과 자바스크립트 그리고 CSS3의 회전 속성을 이용하여 위 두가지 모양의 시계는 만들었습니다. <canvas>또는 <svg>요소를 이용한 표현 수단으로만 가능했던 많은 것들이 일반 요소(<img>, &l...
Category: 자료 - 웹개발, Reactions: 3, Views: 23,450, Author: 파이어준
-
순수 CSS로 만든 찌그러진 콜라 캔 입체 매핑
순수 CSS만으로 콜라 캔을 입체적으로 매핑하여 사람들을 놀라게 했던 Román Cortés씨는 필(?)을 받으셨는지 더욱 놀라운 결과물들을 만들었습니다. 위 화면에서 스크롤을 오른쪽으로 이동시켜 보세요. 찌그러진 캔...
Category: 자료 - 웹개발, Reactions: 2, Views: 37,276, Author: 파이어준
-
CSS3로 할 수 있는 것들 - CSS3 Click Chart
라운디드 코너, 그림자, 그라디언트, 등의 다채롭고 흥미로운 그래픽 효과를 부여할 수 있는 CSS3는 마법과도 같습니다. Impressive Webs의 Louis Lazaris씨는 CSS3를 이용하여 가능한 예시를 일목요연하게 조회하고 쉽게 응...
Category: 자료 - 웹개발, Reactions: 7, Views: 23,529, Author: 파이어준
-
놀라운 CSS3 애니메이션 데모 47개
Nick La씨가 취합한 CSS3 애니메이션 데모 47개 입니다. 다양한 방법으로 CSS3의 속성을 이용한 자바스크립트 애니메이션 사용법들을 제시합니다. 지금까지 SVG나 Canvas 요소로밖에 표현할 수 없었던 많은 부분을 CSS3로...
Category: 자료 - 웹개발, Reactions: 12, Views: 42,781, Author: 파이어준
-
순수 CSS로 만든 콜라 캔 입체 매핑
Román Cortés씨는 CSS 트릭으로 완전 골때리는 시도를 했습니다. 위 화면에서 스크롤을 오른쪽으로 이동해 보세요. 콜라 캔에 굴러갑니다. 이미지 한장을 영역별로 정교하게 매핑하여 입체적인 느낌을 표현했습니다...
Category: 자료 - 웹개발, Reactions: 7, Views: 37,540, Author: 파이어준
-
순수 CSS로 삼각형(화살표) 생성하기
4년만에 블로그를 대대적으로 성형하고 있습니다. 최근 코멘트 출력부를 과감히 수정했는데 이곳의 스타일을 풍선말과 유사한 느낌을 주기 위해서 화살표 부분을 순수 CSS만으로 작성했습니다. 날로 먹겠거니 생...
Category: 자료 - 웹개발, Reactions: 6, Views: 50,429, Author: 파이어준
-
자바스크립트로 만들어진 코드 편집기 - CodeMirror
CodeMirror는 각종 컴퓨터 프로그램 코드를 웹상에서 쾌적한 환경으로 편집할 수 있도록 구축하는데 도움주는 자바스크립트 라이브러리입니다. 전문 코드 편집기에 상응하는 문법 강조 및 코드 편집기능들을 제공합...
Category: 자료 - 웹개발, Reactions: 1, Views: 40,021, Author: 파이어준
