[ Open Case ] Dan Cederholm / CSS3 FOR WEB DESIGNERS / 정리

이제보니 제프리 젤드만 씨 가 .... 목차는 아래

정리하는 목적은 공부! 입니다 ㅎㅎ

챕터 1. USING CSS TODAY

css 개념에 대해 설명합니다.
제프리 젤드만이 글 " To Hell With Bad Browsers " 나쁜 브라우저 ㅎㅎ( 글보기 )

개인적으로 원서 보면서 하는것이라 올리지는 못하겠네요 죄송합니다. 소스위주로 ㅎㅎ

 

border-radius
 

Rounds the corners of an element with a specified radius
value. Supported in Safari 3+, Chrome 3+, Firefox 1+, Opera
10.5+, and IE9 Beta. Example:
 

.foo {
border-radius: 10px;
}​​​​​​

text-shadow
 

A CSS2 property (dropped in 2.1 then reintroduced in CSS3)

that adds a shadow to hypertext, with options for the direction,

amount of blur, and color of the shadow. Supported in

Safari 1.1+, Chrome 2+, Firefox 3.1+, and Opera 9.5+. Example:
 

p {

text-shadow: 1px 1px 2px #999;

}

box-shadow

Adds a shadow to an element. Identical syntax to textshadow.

Supported in Safari 3+, Chrome 3+, Firefox 3.5+,

Opera 10.5+, and IE9 Beta. Example:

.foo {

box-shadow: 1px 1px 2px #999;

}

Multiple background images

CSS3 adds the ability to apply multiple background images on

an element (separated with commas), as opposed to just one

as defined in CSS2.1. Supported in Safari 1.3+, Chrome 2+,

Firefox 3.6+, Opera 10.5+, and IE9 Beta. Example:
 

body {

background: url(image1.png) no-repeat top left,

url(image2.png) repeat-x bottom left,

url(image3.png) repeat-y top right;

}

opacity

Defines how opaque an element is. A value of 1 means completely

opaque, while a value of 0 means fully transparent.

Supported in Safari 1.2+, Chrome 1+, Firefox 1.5+, Opera 9+,

and IE9 Beta. Example:
 

.foo {

opacity: 0.5; /* .foo will be 50% transparent */

}

RGBA

Not a CSS property, but rather a new color model introduced

in CSS3, adding the ability to specify a level of opacity along

with an RGB color value. Supported in Safari 3.2+, Chrome 3+,

Firefox 3+, Opera 10+, and IE9 Beta. Example:

9

.foo {

color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */

}

There are also other portions of the CSS3 spec that might be  usable today, but are out of the scope of this book (and might warrant a book entirely on their own):

1. Media Queries (http://www.w3.org/TR/CSS3-mediaqueries/)

2. Multi-Column Layout (http://www.w3.org/TR/CSS3-multicol/)

3. Web Fonts (http://www.w3.org/TR/CSS3-webfonts/)

 
VENDOR-SPECIFIC PREFIXES 


























 

element

Font
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-decoration
text-align
text-indent
text-transform
white-space
word-spacing
color
Background
bg-attachment
bg-color
bg-image
bg-position
bg-repeat
Box
width
height
border-top
border-right
border-bottom
border-left
margin
padding
max-height
min-height
max-width
min-width
outline-color
outline-style
outline-width
Positioning
position
top
bottom
right
left
float
display
clear
z-index
List
list-style-image
list-style-type
list-style-position
Table
vertical-align
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Effects
text-shadow
-webkit-box-shadow
border-radius
Other
overflow
cursor
visibility