1. Text Inset

Photoshop등을 이용해 Text가 들어간 (de-bossed, textpress, inset) 효과를 주었던걸

CSS3의 Text Shadow 효과를 응용해서 흉내낼 수 있다.

I’m Inset Text

위의 그림과 같은 효과를 내기 위해서는 2개의 Text Shadow를 사용해야 한다.

Text위로 Text보다 어두운 색의 Text Shadow를 추가하고,

Text밑에 Text보다 밝은 색의 Text Shadow를 추가하면 위와 같은 효과가 나온다.

실제 사용한 코드는 아래와 같다.

2. Text Stroke

Text에 Outline을 추가하는 CSS.

Webkit Browser들은 -webkit-text-stroke를 이용해서 쉽게 Text에 Outline을 추가할 수 있고,

그 외의 Browser들은 TextShadow를 좌/우/위/아래 4방향으로 주어서 Outline 효과를 흉내낼 수 있다.

I’m Outlined Text

실제 사용한 코드는 아래와 같다

3. Text를 Drag할 때 배경색 설정

::selection이라는 CSS Pseudo Class를 이용해서 Text 또는 영역을 Drag할 때 배경색을 변경 할 수 있다.

Mozilla 계열만 vendor prefix를 사용해서 -moz-selection로 적용한다.

Drag ME!

4. 대문자 변환, 소문자 변환, Capitalize

CSS의 text-transform 속성을 이용하면 Text를 대문자/소문자/Capitalize를 쉽게 할 수 있다.

I’m Uppercase

I’m lowercase

I’m capitalize