로 텍스트 그림자 추가 Dreamweaver CS6 : Dreamweaver CS6에서 CSS3 - Dummy

Dreamweaver CS6의 일부 인형 시트

Dreamweaver CS6에서는 CSS3 규칙이 적용된 텍스트 그림자를 추가하여 디자인을 향상시키고 페이지의 깊이를 높일 수 있습니다. 최신 웹 기술. 텍스트 그림자를 추가하면 특히 디자인에 복잡한 배경이 있거나 배경과 텍스트 색상의 대비가 부족한 경우 단어를 더 쉽게 읽을 수 있습니다.

학점: Paul Gual, istockphoto. com

Dreamweaver CS6에는 CSS 스타일 패널의 속성 창을 사용할 때 CSS3 텍스트 그림자가 지원됩니다. 텍스트 그림자가있는 클래스 또는 ID 스타일을 만들 수 있으며 이미지에 사용 된 제목 스타일과 같은 태그 스타일을 정의하여 기존 HTML 요소에 텍스트 그림자를 추가 할 수 있습니다.

텍스트 그림자를 생성하는 CSS3 코드는

h1 {text-shadow: 2px 2px 3px # 000;}

코드의 숫자는 텍스트 그림자가 오른쪽으로 2 픽셀, 3 픽셀 흐림 효과가있는 텍스트 아래의 픽셀 또한 음영은 검은 색으로 만들어지며 약식 16 진수 # 000으로 지정됩니다.

텍스트 그림자 규칙을 만들 때 최대 네 개의 값을 지정할 수 있습니다:

• 수평 및 수직: 처음 두 숫자 값이 필요하며 수평 및 수직 간격 띄우기를 지정합니다. 그림자는 텍스트 아래 (수평)와 텍스트의 오른쪽 (수직)까지 확장됩니다.

• 흐리게 반경: 세 번째 값은 그림자의 흐림 정도를 지정합니다. 흐림 반경을 포함하지 않으면 기본값은 0이며 그림자는 단색으로 나타납니다.

• 색상: 네 번째 값은 그림자의 색상을 지정하며 16 진수 색상 코드 또는 RGBa 색상 코드를 사용하여 정의 할 수 있습니다.

이미지에 표시된대로 CSS 스타일 패널의 아래쪽에있는 속성 패널을 사용하여 텍스트 그림자를 추가 할 수 있습니다. 이렇게하려면 다음 단계를 수행하십시오.

1. CSS 스타일 속성 창의 왼쪽에있는 속성 추가 링크를 클릭하십시오.

2. 드롭 다운 목록에서 CSS3 스타일 규칙 이름, 텍스트 섀도우를 입력하거나 스타일 규칙을 선택하십시오.

   왼쪽에 이름이 나타나면 오른쪽에 작은 화살표가 나타납니다.

3. 텍스트 그림자의 오른쪽에있는 화살표를 클릭하여 선택합니다.

   상자가 나타납니다.

4. X 및 Y 오프셋, 흐림 반경 및 색상을 입력합니다.