Dreamweaver에서 드롭 및 텍스트 그림자 추가 방법 -

Dreamweaver에서 디자인을 향상시키고 이미지, 태그 및 기타 요소에 그림자를 추가하여 페이지의 깊이를 높일 수 있습니다. 텍스트 그림자를 추가하면 단어를 쉽게 읽을 수 있습니다. 특히 디자인에 복잡한 배경이 있거나 전경색과 배경색에 대비가 부족한 경우가 있습니다.

크레딧: iStockphoto의 사진. com

Dreamweaver CC는 새로운 CSS Designer 패널에서 CSS3 드롭 그림자와 텍스트 그림자를 더 잘 지원하고 통합합니다.

텍스트 그림자가있는 클래스 또는 ID 스타일을 만들 수 있으며 여기에 표시된 제목 1 스타일과 같은 태그 스타일을 정의하여 기존 HTML 요소에 텍스트 그림자를 추가 할 수 있습니다. 해당 텍스트 그림자를 만드는 CSS3 코드는

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

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

수평

• 및 수직 : 처음 두 개의 숫자 값이 필요하며 가로를 지정하십시오 세로 오프셋 - 드롭 섀도우가 텍스트 아래로 ( 세로 ) 텍스트의 오른쪽 (가로)까지 연장되는 거리입니다. blur radius

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

  color

• : 네 번째 값은 그림자의 색상을 지정하며 16 진수 색상 코드 또는 RGBa 색상 코드를 사용하여 정의 할 수 있습니다. 색상 옵션에 RGBa 색상을 선택하면 투명도를 추가 할 수 있으므로 그림자 모양을보다 잘 제어 할 수 있습니다.

CSS Designer 패널의 아래쪽에있는 속성 패널을 사용하여 텍스트 그림자를 추가 할 수 있습니다. 이렇게하려면 다음 단계를 따르십시오.

CSS Designer Properties 패널의 Text-Shadow 섹션까지 아래로 스크롤하십시오.

1. H-shadow (수평) 및 V-shadow (수직) 필드를 사용하여 표시 할 그림자의 크기를 입력하십시오.

2. 흐림 필드에 크기를 입력하여 텍스트 그림자에 대해 원하는 흐리게 보기를 추가합니다.

3. 색상 영역을 클릭하고 텍스트 그림자에서 사용할 색상을 선택하십시오.