Latest web development tutorials

CSS3 텍스트 효과

CSS3 텍스트 효과

CSS3 텍스트는 여러 가지 새로운 기능이 포함되어 있습니다.

이 장에서는 다음과 같은 텍스트 속성을 배울 것입니다 :

  • 텍스트 그림자
  • 상자 그림자
  • 텍스트 오버플로
  • 워드 랩
  • 워드 휴식

브라우저 지원

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

텍스트 그림자 CSS3

CSS3에서 텍스트 그림자 속성은 그림자를 텍스트에 적용됩니다.

텍스트 그림자 효과!

당신은 수평 그림자, 수직 그림자, 색상, 거리 흐림과 그림자를 지정합니다 :

OperaSafariChromeFirefoxInternet Explorer

예

제목에 그림자를 추가 :

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

»시도

CSS3 상자 그림자 속성

CSS3에서 CSS3 상자 그림자 속성 상자 그림자 적용

예

사업부 {
상자 그림자 : 10px 10px;
}

»시도

이어서, 그림자 색상을 추가

예

사업부 {
상자 그림자 : 10px 10px 회색;
}

»시도

다음으로, 흐림 효과에 그림자를 추가

예

사업부 {
상자 그림자 : 10px 10px 5px 회색;
}

»시도

또한 의사 요소 후 :: befor를 :: 두 그림자 효과를 추가 할 수 있습니다

예

# Boxshadow {
위치 : 상대;
B 황소 그림자 : 1 픽셀 2 픽셀의 4 픽셀의 RGBA (0, 0, 0, 0.5);
펜실바니아 설정된 뒤 : 10px;
혈중 알코올 농도는 kground : 흰색;
}
#boxshadow의 IMG {
폭 : 100 %;
국경 : 1 픽셀 고체 # 8a4419;
테두리 스타일 : 삽입;
}
#B oxshadow :: 후 {
내용 : '';
위치 : 절대;
Z- 인덱스 : -1; 이미지 * 뒤에 / * 숨기기 그림자 /
상자 그림자 : 0 15 픽셀 20 픽셀 RGBA (0, 0, 0, 0.3);
폭 : 70 %;
왼쪽에 15 %, 나머지 30 %의 * / * 반 /
높이 : 100 픽셀;
바닥 : 0;
}

»시도

특별한 경우는 그림자 카드의 효과의 사용이다

예

div.card {
폭 : 250 픽셀;
상자 그림자 : 0 4 픽셀 8px RGBA 0 (0, 0, 0, 0.2), 0 6 픽셀 20 픽셀 RGBA 0 (0, 0, 0, 0.19);
텍스트 정렬 : 센터;
}
}

텍스트 카드 >> 그림 카드 >>

CSS3 텍스트 오버플로 속성

CSS3 텍스트 오버 플로우 속성은 사용자가 오버 플로우 콘텐츠를 표시하는 방법을 지정합니다

예

p.test1 {
공백 : 파라미터 nowrap;
폭 : 200 픽셀;
국경 : 1 픽셀 고체 # 000000;
오버 플로우 : 숨겨진;
텍스트 오버 플로우 : 클립;
}

p.test2 {
공백 : 파라미터 nowrap;
폭 : 200 픽셀;
국경 : 1 픽셀 고체 # 000000;
오버 플로우 : 숨겨진;
텍스트 오버 플로우 : 줄임표;
}

»시도

CSS3의 줄 바꿈

단어가 너무 긴 경우 외부로 연장되는 영역에 맞게 :

CSS3의 속성은 필수 텍스트 배치를 포장 할 수 있습니다 -이 단어의 중간에 분할을 의미하는 경우에도 :

다음과 같이 CSS 코드는 다음과 같습니다

OperaSafariChromeFirefoxInternet Explorer

예

긴 텍스트 줄 바꿈을 할 수 있습니다 :

p {word-wrap:break-word;}

»시도

CSS3 말씀 속보

CSS3 말씀 속보 줄 바꿈 규칙을 지정하는 속성 :

다음과 같이 CSS 코드는 다음과 같습니다

예

p.test1 {
워드 브레이크 : 유지 - 모든;
}

p.test2 {
워드 브레이크 : 브레이크의 모든;
}

»시도

새로운 텍스트 속성

재산 기술 CSS
매달려 - 구두점 규정 문장 부호 문자는 프레임 외부에 위치. 3
구두점 트림 구두점 문자 치기의 규정 여부. 3
텍스트 정렬 - 마지막 줄 바꿈을 강제로 줄 직전에 마지막 줄을 정렬하거나하는 방법을 설정. 3
텍스트 강조 텍스트 태그 및 키 태그 전경 응용 프로그램의 주요 요소입니다. 3
텍스트 정당화 경우 텍스트 정렬이 사용 "정당화"로 설정되어있는 소정의 위치 정렬 방법. 3
텍스트 개요 문자의 윤곽의 사양. 3
텍스트 오버플로 텍스트가 포함 된 요소를 오버 플로우하는 경우 충당 부채는 일이 일어날 때. 3
텍스트 그림자 텍스트에 그림자를 추가합니다. 3
텍스트 랩 규칙 랩 텍스트의 규정을 준수해야합니다. 3
워드 휴식 비 줄 바꿈 규칙의 규정 CJK 텍스트입니다. 3
워드 랩 그것은 긴 나누어 불가분의 단어가 다음 줄로 줄 바꿈 허용한다. 3