/* 이 코드는 마우스가 링크 위로 미끄러질 때 그라데이션 효과를 구현합니다*/
{
색상: #007c21;
전환: 색상 .4s 용이성;
}
a:hover { 색상: #00bf32 }CSS3를 사용하면 추가 마크업이나 이미지를 도입하지 않고도 양식 요소, 이미지, 심지어 단락 텍스트를 포함한 대부분의 요소에 대해 둥근 모서리를 만들 수 있습니다.
<!DOCTYPE HTML> <html lang="ko"> <머리> <meta charset="utf-8" /> <title>둥근 모서리</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </head> <본문> <div class="all-corners"></div> <div class="한 모퉁이"></div> <div class="elliptical-corners"></div> <div 클래스="원"></div> </body> </html>
이전 버전의 Android, Mobile Safari 및 Safari 브라우저를 지원하는 데 필요한 공급업체 접두사를 포함하여 CSS 둥근 모서리를 사용한 네 가지 예입니다. .circle 의 경우 요소가 150像素*150像素이므로 75px 사용하면 50% 와 동일한 효과가 나타납니다.
div {
배경: #999;
플로트: 왼쪽;
높이: 150px;
여백: 10px;
너비: 150px;
}
.모든 코너 {
-웹킷-국경-반경: 20px;
테두리 반경: 20px;
}
.한쪽 모퉁이 {
-webkit-border-top-left-radius: 75px;
테두리 상단 왼쪽 반경: 75px;
}
.타원형 모서리 {
-webkit-border-radius: 50px / 20px;
테두리 반경: 50px / 20px;
}
.원 {
-웹킷-경계-반경: 50%;
테두리 반경: 50%;
} div {
배경: #ff9;
테두리: 5px 솔리드 #326795;
플로트: 왼쪽;
높이: 150px;
여백: 10px;
너비: 150px;
}
.example-1 {
/* 왼쪽 상단과 오른쪽 하단 모서리의 반경을 10px로 만들고
오른쪽 상단 및 왼쪽 하단 모서리 20px */
테두리 반경: 10px 20px;
}
.example-2 {
/* 왼쪽 상단 모서리의 반경을 20px로 만들고 다른 모든 모서리는 0으로 만듭니다. */
테두리 반경: 20px 0 0;
}
.example-3 {
/* 왼쪽 상단 모서리의 반경을 10px, 오른쪽 상단 모서리의 반경을 20px로 만듭니다.
오른쪽 하단 모서리 0, 왼쪽 하단 모서리 30px */
테두리 반경: 10px 20px 0 30px;
}-webkit-border-radius: r 입력합니다. 여기서 r 길이(단위 포함)로 표현되는 필렛의 반경입니다. border-radius: r 입력합니다. 여기서 r 필렛의 반경입니다. 1단계와 동일한 값을 사용합니다. 이는 이 속성에 대한 표준 약식 구문입니다.-webkit-border-top-left-radius: r 입력합니다. 여기서 r 왼쪽 위 모서리의 반경이며 길이(단위 포함)로 표시됩니다. 첫 번째 단계에서와 동일한 r 값을 사용하여 border-top-left-radius: r 입력합니다. 이는 이 속성에 대한 표준 긴 형식 구문입니다. 오른쪽 위 모서리를 만들려면 top-right 사용하고, 오른쪽 아래 모서리를 만들려면 bottom-right 사용하고, 왼쪽 아래 모서리를 만들려면 bottom-left 사용하세요.-webkit-border-radius: x/y 입력합니다. 여기서 x 는 수평 방향의 필렛 반경이고, y 수직 방향의 필렛 반경이며 둘 다 길이(단위 포함)로 표시됩니다. . border-radius: x/y 입력하세요. 여기서 x 와 y 첫 번째 단계의 값과 같습니다.-webkit-border-radius: r 입력합니다. 여기서 r 요소의 반경(길이 단위)입니다. 원을 만들려면 짧은 형식의 구문을 사용하세요. 여기서 r 값은 요소 높이 또는 너비의 절반과 같아야 합니다. border-radius: r 입력합니다. 여기서 r은 요소의 반경(길이 단위 포함)이며 첫 번째 단계의 r 과 같습니다. 이는 접두사가 없는 표준 구문입니다. 참고: border-radius 지원하지 않는 이전 브라우저는 사각형 모서리가 있는 요소만 렌더링합니다. border-radius 스타일이 적용되는 요소의 모서리에만 영향을 미치며 하위 요소의 모서리에는 영향을 주지 않습니다. 따라서 하위 요소에 배경이 있는 경우 배경은 하나 이상의 상위 요소 모서리에 나타나 둥근 모서리 스타일에 영향을 줄 수 있습니다. 때때로 요소의 배경(여기서는 하위 요소의 배경이 아님)이 둥근 모서리를 통해 표시됩니다. 이를 방지하려면 요소의 border-radius 선언 뒤에 스타일 규칙을 추가할 수 있습니다: background-clip: padding-box;
텍스트를 표현하기 위해 이미지를 사용하지 않고 text-shadow 사용하여 단락, 제목 및 기타 요소의 텍스트에 동적 그림자 효과를 추가합니다.
text-shadow: . x-offset (가로 오프셋), y-offset (세로 오프셋), blur-radius (흐림 반경), color 각각 나타내는 값을 입력합니다. (처음 3개 값은 길이 단위를 가지며, 쉼표는 없습니다. 4개 값 사이에 구분됨)(예: -2px 3px 7px #999 )text-shadow: . x-offset (가로 오프셋), y-offset (세로 오프셋), blur-radius (흐림 반경), color 값을 각각 입력합니다(처음 세 값은 길이 단위를 가지며 쉼표는 없습니다). 4개 값 사이의 분리. blur-radius 값은 선택 사항입니다. (쉼표)를 입력하세요. 네 가지 속성에 대해 서로 다른 값을 사용하여 2단계를 반복합니다.<!DOCTYPE HTML> <html lang="ko"> <머리> <meta charset="utf-8" /> <title>텍스트 그림자</title> <link rel="stylesheet" href="css/text-shadow.css" /> </head> <본문> <p class="basic">기본 섀도우</p> <p class="basic-negative">기본 섀도우</p> <p class="blur">흐릿한 반경</p> <p class="blur-inversed">흐릿한 반경</p> <p class="multiple">여러 텍스트 그림자</p> </body> </html>
몸 {
배경: #fff;
색상: #222;
글꼴: 100%/1.05 helvetica, 산세리프;
패딩 상단: 20px;
}
피 {
color: #222; /* 거의 검은색 */
글꼴 크기: 4.5em;
글꼴 두께: 굵게;
여백: 0 0 45px;
}
p:마지막 자식 {
여백: 0;
}
.기초적인 {
텍스트 그림자: 3px 3px #aaa;
}
/* 음수 오프셋을 사용합니다. 양수 오프셋과 음수 오프셋도 혼합할 수 있습니다. */
.basic-부정적 {
text-shadow: -4px -2px #ccc; /* #aaa보다 약간 밝은 회색 */
}
.블러 {
텍스트 그림자: 2px 2px 10px 회색;
}
.blur-inversed {
색상: 흰색;
텍스트 그림자: 2px 2px 10px #000; /* 검정 */
}
/* 이 예에는 두 개의 그림자가 있지만 포함할 수 있습니다.
각각을 쉼표로 구분하여 자세히 설명 */
.다수의 {
텍스트 그림자:
2px 2px 흰색,
6px 6px rgba(50,50,50,.25);
} 이 클래스는 여러 가지 text-shadow 효과를 보여줍니다. 첫 번째, 두 번째 및 다섯 번째는 모두 흐림 반경 값을 생략합니다. .multiple 클래스는 각 속성 세트를 쉼표로 구분하여 단일 요소에 여러 그림자 스타일을 추가할 수 있음을 알려줍니다. 이렇게 하면 여러 그림자 스타일을 결합하여 특별하고 흥미로운 효과를 만들 수 있습니다.
즉, text-shadow: none; 입력합니다. 이 속성은 입력할 필요가 없으며 제조업체 접두사를 사용합니다.
text-shadow 속성은 길이 단위가 있는 x-offset , 길이 단위가 있는 y-offset , 길이 단위가 있는 선택적 blur-radius 및 color 값의 네 가지 값을 허용합니다. blur-radius 지정하지 않으면 해당 값은 0으로 간주됩니다. x-offset 및 y-offset 값은 양수 또는 음수일 수 있습니다. 즉, 1px 와 -1px 가 모두 유효함을 의미합니다. blur-radius 값은 양의 정수여야 합니다. 세 가지 값은 모두 0이 될 수 있습니다. text-shadow 의 구문은 테두리 및 배경 속성의 구문과 유사하지만 테두리 및 배경과 같은 4개의 별도 속성 값을 지정할 수는 없습니다. text-shadow 지정하지 않으면 초기값 none 사용합니다.
요소의 텍스트에 그림자를 추가하려면 text-shadow 속성을 사용하고, 요소 자체에 그림자를 추가하려면 box-shadow 속성을 사용하세요. 기본 속성 세트는 동일하지만 box-shadow inset 키워드 속성과 spread 속성(그림자를 확장하거나 축소하는 데 사용됨)이라는 두 가지 선택적 속성을 사용할 수도 있습니다.
box-shadow 속성은 길이 단위가 있는 x-offset 및 y-offset , 길이 단위가 있는 선택적 blur-radius , 선택적 inset 키워드, 길이 단위가 있는 선택적 spread 값, color 값 등 6가지 값을 허용합니다. blur-radius 및 spread 값을 지정하지 않으면 0으로 설정됩니다.
<!DOCTYPE HTML> <html lang="ko"> <머리> <meta charset="utf-8" /> <title>박스 섀도우</title> <link rel="stylesheet" href="css/box-shadow.css" /> </head> <본문> <div 클래스="그림자"> <p>흐릿한 그림자</p> </div> <div 클래스="그림자-음수"> <p>음수 오프셋과 흐림 효과가 있는 그림자</p> </div> <div 클래스="그림자 확산"> <p>흐림과 퍼짐이 적용된 그림자</p> </div> <div 클래스="shadow-offsets-0"> <p>오프셋 0, 흐림 및 확산이 있는 그림자</p> </div> <div 클래스="삽입-그림자"> <p>그림자 삽입</p> </div> <div 클래스="다중"> <p>여러 그림자</p> </div> <div class="shadow-negative-spread"> <p>흐림 및 네거티브 스프레드가 적용된 그림자</p> </div> </body> </html>
몸 {
배경: #000;
색상: #fff;
}
h1 {
글꼴 모음: 산세리프;
글꼴 크기: 2.25em;
줄 높이: 1.1;
텍스트 정렬: 중앙;
}
/* 참고: 사이트를 구성할 때 일반적으로 이미지를 하위 폴더("img"라고 함)에 배치했기 때문에 배경 이미지 URL은 책에 표시된 예와 다릅니다. 또한, 이러한 상황에서 배경 이미지 URL을 구성하는 방법을 알아보는 것이 도움이 될 것이라고 생각했습니다. URL은 이미지를 표시하는 HTML 페이지가 아닌 스타일 시트와 관련된 것입니다. */
.밤하늘 {
background-color: 네이비 /* 대체 색상 */
배경 이미지:
URL(../img/ufo.png),
URL(../img/stars.png),
URL(../img/stars.png),
URL(../img/sky.png);
배경 위치:
50% 102%,
100% -150px,
0 -150픽셀,
50% 100%;
배경 반복:
반복하지 않음,
반복하지 않음,
반복하지 않음,
반복-x;
높이: 300px;
margin: 25px auto 0; /* 책과 약간 다름 */
패딩 상단: 36px;
너비: 75%;
} 위 프로그램은 하나 이상의 그림자를 추가하기 위해 box-shadow 사용하는 효과를 보여주는 데 사용됩니다. 처음 5개 클래스는 각각 서로 다른 음영 스타일을 적용합니다. 마지막 클래스는 두 개의 그림자를 적용합니다(더 많이 적용할 수 있음). box-shadow 이해하지 못하는 브라우저는 단순히 이러한 CSS 스타일 규칙을 무시하고 그림자 없이 페이지를 렌더링합니다.
-webkit-box-shadow: 를 입력합니다. x-offset , y-offset , blur-radius , spread 및 color 각각 나타내는 값을 입력합니다(처음 4개 값은 길이 단위를 가짐)(예: 2px 2px 5px #333 ). box-shadow: 입력하고 2단계를 반복합니다.-webkit-box-shadow: 를 입력합니다. x-offset , y-offset , blur-radius , spread 및 color 각각 나타내는 값을 입력합니다(처음 4개 값은 길이 단위를 가짐)(예: 2px 2px 5px #333 ). 콜론 뒤에 inset 입력한 후 공백을 입력합니다(두 번째 단계 앞에 inset 과 공백을 입력할 수도 있음). box-shadow: 입력하고 2단계와 3단계를 반복합니다.-webkit-box-shadow: 를 입력합니다. x-offset , y-offset , blur-radius , spread 및 color 각각 나타내는 값을 입력합니다(처음 4개 값은 길이 단위를 가짐)(예: 2px 2px 5px #333 ). 필요한 경우 inset 키워드를 포함합니다. 쉼표를 입력하세요. 각 속성에 대해 서로 다른 값을 사용하여 2단계를 반복합니다. box-shadow: 입력하고 2~4단계를 반복합니다.-webkit-box-shadow: none; 입력하세요. box-shadow: none; 참고: x-offset , y-offset 및 spread 값은 양수 또는 음수일 수 있습니다. blur-radius 값은 양의 정수여야 합니다. 세 가지 값은 모두 0일 수 있습니다. inset 키워드를 사용하면 요소 내부에 그림자를 배치할 수 있습니다.
거의 모든 요소에 여러 배경을 적용할 수 있습니다.
<!DOCTYPE HTML> <html lang="ko"> <머리> <meta charset="utf-8" /> <title>다양한 배경</title> <link rel="stylesheet" href="css/multiple-Backgrounds.css" /> </head> <본문> <div 클래스="밤하늘"> <h1>밤하늘에...</h1> </div> </body> </html>
...
.밤하늘 {
background-color: 네이비 /* 대체 색상 */
배경 이미지:
URL(../img/ufo.png),
URL(../img/stars.png),
URL(../img/stars.png),
URL(../img/sky.png);
배경 위치:
50% 102%,
100% -150px,
0 -150픽셀,
50% 100%;
배경 반복:
반복하지 않음,
반복하지 않음,
반복하지 않음,
반복-x;
높이: 300px;
margin: 25px auto 0; /* 책과 약간 다름 */
패딩 상단: 36px;
너비: 75%;
}단일 요소에 여러 배경 이미지 적용(공급업체 접두어를 사용할 필요 없음)
background-color: b 입력합니다. 여기서 b는 요소에 적용할 대체 배경색입니다. background-image: u 입력합니다. 여기서 u 절대 또는 상대 경로(쉼표로 구분)로 참조되는 url 목록입니다. 여러 배경을 지원하는 브라우저의 경우 이미지가 계층화되고 서로 겹칩니다. 목록의 첫 번째 항목은 쉼표로 구분됩니다. . ) background-position: p , 여기서 p 는 x-offset 과 y-offset 의 쌍(양수 또는 음수일 수 있음, 길이 단위 또는 center top 과 같은 키워드 포함) 세트, 쉼표로 구분 . 두 번째 단계에서 지정된 각 url 에는 x-offset 및 y-offset 세트가 있어야 합니다. background-repeat: r 입력합니다. 여기서 r 쉼표로 구분된 repeat-x , repeat-y 또는 no-repeat 값이며, 두 번째 단계에서 지정된 각 url 에 대한 값입니다.여러 배경 이미지의 경우 쉼표를 사용하여 각 배경 매개변수 세트를 구분하는 표준 짧은 형식 구문을 사용할 수 있습니다. 이 표현의 장점은 개발자가 이전 브라우저에 대한 대체 배경색이나 이미지를 지정할 수 있다는 것입니다.
.밤하늘 {
/* 색상과 이미지를 모두 사용한 대체 */
배경: 해군 URL(../img/ufo.png) 반복 없음 중앙 하단;
/* 지원 브라우저용 */
배경:
url(../img/ufo.png) 반복 없음 50% 102%,
url(../img/stars.png) 반복 없음 100% -150px,
url(../img/stars.png) 반복 없음 0 -150px,
url(../img/sky.png) 반복-x 50% 100%;
높이: 300px;
여백: 25px 자동 0;
패딩 상단: 36px;
너비: 75%;
}<!DOCTYPE HTML> <html lang="ko"> <머리> <meta charset="utf-8" /> <title>그라데이션 배경</title> <link rel="stylesheet" href="css/gradients.css" /> </head> <본문> <div class="vertical-down"><p>기본값</p></div> <div class="vertical-up"><p>맨 위로</p></div> <div class="horizontal-rt"><p>오른쪽으로</p></div> <div class="horizontal-lt"><p>왼쪽으로</p></div> <div class="angle-bot-rt"><p><br />오른쪽 하단</p></div> <div class="angle-bot-lt"><p><br />왼쪽 하단</p></div> <div class="angle-top-rt"><p>오른쪽 상단으로</p></div> <div class="angle-top-lt"><p>왼쪽 상단으로</p></div> <div class="angle-120deg"><p>120deg</p></div> <div class="angle-290deg"><p>290deg</p></div> <섹션 클래스="방사형"> <div class="radial-center"><p>기본값</p></div> <div class="radial-top"><p>상단</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p><br />왼쪽 하단</p></div>에서 70% 90% <div class="radial-various-1"><p>다양한 1</p></div> <div class="radial-various-2"><p>다양한 2</p></div> </섹션> <section class="color-stops"> <div class="color-stops-1"><p>노란색 10%, 녹색</p></div> <div class="color-stops-2"><p>오른쪽 상단, 노란색, <br>녹색 70%, <br>파란색</p></div> </섹션> </body> </html>
몸 {
padding: 1.25em; /* 20px/16px, 즉 양쪽에 20px */
글꼴 크기: 100%;
}
div {
플로트: 왼쪽;
높이: 150px;
여백: 10px;
너비: 150px;
}
피 {
색상: #fff;
글꼴: 굵은체 1.25em/1 sans-serif /* 20px/16px */
패딩 상단: 1.65em; /* 33px/16px */
텍스트 정렬: 중앙;
}
/* 참고: 아래 그라데이션은 표준 CSS3 구문에 있습니다. 이를 지원하는 브라우저는 Chrome 26+, Firefox 16+, IE 10+ 및 Opera 12.10+입니다. 그라데이션 효과가 있지만 공급업체 접두사 코드도 포함되어 있어 그라데이션이 여러 이전 브라우저에서 작동합니다. "대체" 주석이 있는 배경은 브라우저에 표시되는 색상입니다. 그래디언트 구문을 지원하지 않는 배경 이미지를 대체 수단으로 사용할 수도 있습니다(자체적으로 또는 색상과 함께). 예: background: red url(gradient-image.jpg) no-repeat; . */
/* 선형 그래디언트
----------------------------- */
/* :::: 수직의 :::: */
.수직 아래로 {
배경: 은색 /* 대체 */
/* 기본 그라데이션이므로 색상 앞에 "아래로"를 지정할 필요가 없습니다 */
배경: 선형 그라데이션(실버, 블랙);
}
.수직 위로 {
배경:은색;
배경: 선형 그라데이션(상단으로, 은색, 검정색);
}
/* :::: 수평의 :::: */
.horizontal-rt {
배경: 은색 /* 대체 */
배경: 선형 그라데이션(오른쪽, 은색, 검정색);
}
.horizontal-lt {
배경: 은색 /* 대체 */
배경: 선형 그라데이션(왼쪽, 은색, 검정색);
}
/* :::: 대각선 각도 :::: */
/* 참고: 377페이지의 그림에는 대체 색상으로 아쿠아가 표시되어 있지만 이를 변경했습니다.
흰색 텍스트가 남색 배경에서 읽기 쉽기 때문에 아래에서는 남색으로 표시됩니다. */
.angle-bot-rt {
배경: 네이비 /* 대체 */
배경: 선형 그라데이션(오른쪽 하단, 아쿠아, 네이비);
}
.angle-bot-lt {
배경: 네이비 /* 대체 */
배경: 선형 그라데이션(왼쪽 하단, 아쿠아, 네이비);
}
.angle-top-rt {
배경: 네이비 /* 대체 */
배경: 선형 그라데이션(오른쪽 상단, 아쿠아, 네이비);
}
.angle-top-lt {
배경: 네이비 /* 대체 */
배경: 선형 그라데이션(왼쪽 상단, 아쿠아, 네이비);
}
/* :::: 도를 통한 각도 :::: */
.angle-120deg {
배경: 네이비 /* 대체 */
배경: 선형 그라데이션(120도, 아쿠아, 네이비);
}
.angle-290deg {
배경: 네이비 /* 대체 */
배경: 선형 그라데이션(290deg, 아쿠아, 네이비);
}
/* 방사형 그래디언트
----------------------------- */
/* :::: 방사형 :::: */
.방사형 p {
텍스트 그림자: 0 0 3px #000;
}
.radial-center {
배경: 빨간색; /* 대체 */
배경: 방사형 그라데이션(노란색, 빨간색) /* 기본값 */
}
.radial-top {
배경: 빨간색; /* 대체 */
배경: 방사형 그라데이션(상단, 노란색, 빨간색);
}
.방사형-크기-1 {
배경: 빨간색; /* 대체 */
배경: 방사형 그라데이션(100px 50px, 노란색, 빨간색);
}
.방사형-크기-2 {
배경: 빨간색; /* 대체 */
배경: 방사형 그라데이션(왼쪽 하단이 70% 90%, 노란색, 빨간색);
}
.radial-다양한-1 {
배경: 빨간색; /* 대체 */
배경: 방사형 그라데이션(가장 가까운 쪽 70px 60px, 노란색, 라임, 빨간색);
}
.radial-다양한-2 {
배경: 빨간색; /* 대체 */
배경: 방사형 그라데이션(65% 70%에서 30px 30px, 노란색, 라임, 빨간색);
}
/* 색상 중지가 있는 선형 그라데이션
----------------------------- */
.color-stops div {
여백 하단: 30px;
}
.color-stops p {
패딩 상단: 25px;
텍스트 그림자: 0 0 3px #000;
}
.color-stops-2 p {
글꼴 크기: 18px;
줄 높이: 1.05;
}
.color-stops-1 {
배경: 녹색; /* 대체 */
배경: 선형 그라데이션(노란색 10%, 녹색);
}
.color-stops-2 {
배경: 녹색; /* 대체 */
배경: 선형 그라데이션(오른쪽 상단, 노란색, 녹색 70%, 파란색);
} background: color 또는 background-color: color 입력하세요. 여기서 color 16진수, RGB 값 또는 기타 지원되는 색상 이름일 수 있습니다. IE8 및 이전 버전에서는 지원하지 않으므로 RGBA, HSL 또는 HSLA 값을 대체 배경색으로 사용하지 않는 것이 가장 좋습니다(IE를 지원할 계획이 없더라도 걱정하지 마세요).
background: linear-gradient( . 그라데이션 방향을 위에서 아래(기본 방향)로 지정하려면 이 단계를 건너뛸 수 있습니다. 입력 방향 뒤에 쉼표를 추가하면 방향은 to top , to right 참조합니다. , to bottom right , to top right 등. 또는 입력 방향 뒤에 쉼표를 추가합니다. 여기서 방향은 각도 값을 나타냅니다(예: 45deg , 107deg 등) 나중에 언급되는 "지정된 색상"에 따라 그라데이션 색상을 정의합니다 );background: radial-gradient( . 그라디언트의 모양을 지정합니다. 크기를 지정하려면 세 번째 단계에서 지정한 크기를 기준으로 직접 결정하면 됩니다. 그렇지 않으면 circle 또는 ellipse 입력합니다. 그라디언트의 크기를 지정합니다. 그래디언트 크기를 자동으로 지정된 값으로 지정하려면(기본값은 가장 먼 모서리), 그렇지 않으면 그래디언트의 너비와 높이를 나타내는 길이 값(예: 200px 또는 7em )을 입력합니다. 너비와 높이를 나타내는 값 쌍( 390px 175px 또는 60% 85% ) 하나의 값만 사용하는 경우 값은 백분율이 될 수 없으며, closest-side , farthest-side , closest-corner 또는 farthest-corner 입력할 수 없습니다. 이러한 키워드는 그라디언트가 중심을 기준으로 얼마나 늘어날 수 있는지를 나타냅니다. 그라디언트를 at right 의 at top 에서 시작하려면 이 단계를 건너뛸 수 있습니다. at bottom left , at top right 등을 사용하여 그라디언트 중심 위치 값을 나타냅니다. 또는 at 200px 43px 같이 at 30% 40% at 시작하는 그라디언트 중심 위치를 나타내는 좌표 쌍을 입력합니다. at 30% 40% , at 50% -10px 등 그라디언트 색상을 정의합니다 ); opacity 속성을 사용하여 요소의 투명도를 수정합니다. 방법은 opacity: x 입력하는 것입니다. 여기서 x 요소의 불투명도(소수점 두 자리, 단위 없음)를 나타냅니다.
opacity 의 기본값은 1(완전히 불투명함)이고, 범위는 0~1 입니다.
opacity 속성과 :hover 의사 속성을 사용하면 흥미롭고 실용적인 효과를 얻을 수 있습니다. 예를 들어 img { opacity: .75; } 기본적으로 이미지의 불투명도를 75%로 설정할 수 img:hover { opacity: 1; } 사용자가 요소에 마우스를 올리면 요소가 불투명해지게 할 수 있습니다. 이 효과는 축소판을 전체 크기 버전에 연결할 때 자주 나타납니다. 방문객에게 공중부양은 이미지의 움직임을 향상시킵니다.
opacity 속성과 RGBA 또는 HSLA를 사용하여 설정된 투명 배경색은 혼동되기 쉬운 두 가지 개념입니다. opacity 전체 요소(내용 포함)에 영향을 미치는 반면, background-color: rgba(128,0,64,.6); 이러한 설정은 배경의 투명도에만 영향을 미칩니다.
:before 및 :after 의사 요소를 사용하는 것은 페이지에 놀라운 디자인 효과를 추가하는 좋은 방법입니다. 이는 소위 생성된 콘텐츠를 생성하기 위해 content 속성과 결합될 수 있습니다. 생성된 콘텐츠는 HTML이 아닌 CSS를 통해 생성된 콘텐츠를 말합니다.
... <p>이 지역은 빌라에서 가장 고요한 공간 중 하나입니다. 플라타너스나무와 월계수 나무가 제공하는 그늘과 두 개의 조각 분수에서 쏟아지는 물의 세레나데를 즐기면서 저는 <a; href="victoria.html" class="more">자세히 알아보기</a></p> ...
/* 생성된 콘텐츠 */
.more:이후 {
콘텐츠: " "";
} 위의 코드를 통해 class="more" 인 요소 뒤에 이중 화살표를 표시할 수 있습니다. 나중에 변경해야 하는 경우 많은 수의 HTML 페이지를 변경하지 않고 .more 클래스만 수정하면 됩니다.
텍스트는 브라우저에 빠르게 표시되지만 이미지로 인해 페이지 로딩 속도가 느려지는 경향이 있습니다. 이 문제를 해결하려면 여러 이미지를 단일 배경 이미지( sprite )로 결합한 다음 background-position 속성을 사용하여 CSS를 통해 표시되는 이미지 부분을 제어할 수 있습니다.
.문서 리 {
여백 상단: .45em;
}
/* HTML의 각 링크에는 이 클래스가 있습니다 */
.아이콘 {
디스플레이: 인라인 블록;
줄 높이: 1.1;
글꼴 크기: .875em;
min-height: 16px; /* 전혀 잘리지 않도록 아이콘 높이로 설정 */
왼쪽 패딩: 23px;
패딩 상단: 2px;
/* HTML에서 class="icon"인 요소를 기준으로 아이콘 위치를 절대적으로 지정할 수 있습니다. */
위치: 상대;
}
.icon:이전 {
배경 이미지: url(../img/sprite.png);
콘텐츠: " ";
디스플레이: 블록;
높이: 16px /* 아이콘 높이 */
left: 0; /* 기본값. 아이콘을 다른 위치에 표시하려면 이를 변경하세요. */
위치: 절대;
너비: 16px; /* 아이콘 너비 */
top: 0; /* 기본값. 아이콘을 다른 위치에 표시하려면 이를 변경하세요. */
}
/* .xls로 끝나는 문서 파일 이름에 대한 스프라이트 이미지의 위치 이동 */
a[href$=".xls"]:이전 {
배경 위치: -17px 0;
}
/* .docx로 끝나는 문서 파일 이름에 대한 스프라이트 이미지의 위치 이동 */
a[href$=".docx"]:이전 {
배경 위치: -34px 0;
} sprite 원하는 수의 요소에 적용될 수 있습니다. 위의 예에서는 원하는 효과를 얻으려면 .icon:before 사용하세요. 이런 방식으로 sprite content: " "; display: block; 으로 설정하면 아이콘 크기에 맞게 높이와 너비를 설정할 수 있습니다. 이 세 가지 속성이 없으면 이미지가 표시되지 않습니다. background-position 사용하면 해당 위치에 올바른 아이콘을 넣을 수 있습니다.
CSS3를 사용하여 스타일 효과를 향상시키는 방법에 대한 기사를 마치겠습니다. CSS3 스타일 효과 향상에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 아래의 관련 기사를 계속 찾아보세요. com!