CSS3의 특징과 사용 방법

“Push Your Web Design Into The Future With CSS3”

Agenda:

CSS3의 특징
CSS3로 인한 작업 환경의 변화
CSS3의 속성들
CSS3를 이용한 미친 작업들

CSS3의 특징

“Features”

CSS3는 CSS2에 비해 조금 더 화려해 졌을 뿐이다.

source : Web Designer Wall 2010 . N.Design Studio

CSS3로 인한 작업 환경의 변화

“Progressive Enhancement‎”

디자이너 vs 퍼블리셔

source : Apple's HTML5 Showcase

Designers:

CSS3의 속성들에 대한 이해
웹사이트 성능 향상 인지

Publishers:

CSS3의 속성들에 대한 사용방법 숙지
그래픽 디자인 유지 보수

CSS3의 속성들

“Properties”

CSS3 Properties:

RGB & RGBA
Font Face
Text Shadow
Box Shadow
Border Radius
Gradients
Multiple Images
Transform
Transition
Animation

RGB & RGBA

div.L1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.L2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.L3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.L4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.L5 { background:rgba(153, 134, 117, 1.0); height:20px; }

The above RGBA example is set in another layer containing a background texture

Font Face

@font-face {
  font-family: SketchRockwell;
  src: url(‘SketchRockwell.ttf’);
}
.my_CSS3_class {
  font-family: SketchRockwell;
  font-size: 3.2em;
}

HELLO CSS 3 WORLD!

CSS3 can render type using several font formats: “truetype” (ttf), “opentype” (otf), “embedded-opentype” (eot) and “scalable-vector-graphic” (svg,svgz).

Text Shadow

.my_CSS3_class {
  text-shadow: 2px 2px 7px #111;
  font-size: 3.2em;
  color: #f5f5f5;
}

HELLO CSS3 WORLD!

the CSS is written text-shadow: x-axis, y-axis, cast length / feathering, colour as usual;

Box Shadow

#my_CSS3_id {
  border: 5px solid #c4c8cc;
  -moz-box-shadow: 5px 5px 7px #888;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: 5px 5px 7px #888;
  -webkit-border-bottom-right-radius: 15px;
}

This effect can also be applied to images…

Border Radius

#my_CSS3_id {
  border: 5px solid #c4c8cc;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
}

This is a panel set with a 5 pixel standard border and a 15 pixel border radius.

This is a panel set with a 5 pixel standard border and a 15 pixel border radius on two individual corners.

Gradients

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
}

linear gradient and radial gradient

Multiple Images

#my_CSS3_id {
  background:
    url(image_1.extention) top left no-repeat,
    url(image_2.extention) bottom left no-repeat,
    url(image_3.extention) bottom right no-repeat;
}

This panel uses three seperate images in its background.

Transform

.my_CSS3_class {
  -moz-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
}
.my_CSS3_class {
  -moz-transform: skew(-25deg);
  -webkit-transform: skew(-25deg);
}
.my_CSS3_class {
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
}

rotate

skew

scale

Transition

a.polaroid {
  width: 150px;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  z-index: 2;
  -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
  -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
  box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  transform: rotate(10deg);
  -webkit-transition: all 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
  z-index: 999;
  border-color: #6A6A6A;
  -webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
  -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
  box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
  -webkit-transform: rotate(0deg) scale(1.05);
  -moz-transform: rotate(0deg) scale(1.05);
  transform: rotate(0deg) scale(1.05);
}

Frown on my face

Animation

@-webkit-keyframes pulse {
 0% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}
.pulsedbox {
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
}

Frown on my face

CSS3 Properties:

RGB & RGBA
Font Face
Text Shadow
Box Shadow
Border Radius
Gradients
Multiple Images
Transform
Transition
Animation

CSS3를 이용한 미친 작업들

“WTF?!”

source : Pure CSS3 Page Flip Effect

source : Pure CSS Twitter 'Fail Whale'

source : Curtis CSS Typeface

source : Pure CSS3 AT-AT Walker

source : iOS Icons made in Pure CSS

CSS3는 지원되면 좋고 지원되지 않아도 무방한 것이다.

감사합니다.

http://html5.firejune.com/css3.html