CSS3에 관한 소문을 많이 들어보셨을 텐데요. 그런데 오늘날 우리가 실제로 사용할 수 있는 CSS3 기술은 무엇일까요? 이 기사에서는 일부 주요 브라우저(예: Firefox, Chrome, Safari, Opera 브라우저)에서 잘 작동하는 몇 가지 독특한 CSS3 기술을 보여 드리겠습니다. 이러한 효과는 지원되지 않는 브라우저(예: Internet Explorer)에서 렌더링 성능을 저하시킵니다. 제안된 CSS3 스타일 중 다수는 브라우저별 선언을 사용하여 즉시 사용할 수 있습니다..jpg)
브라우저별 선언이 무엇인지 모르는 경우 커널 공급자와 관련된 CSS 스타일 속성 앞에 있는 특정 접두사라는 점만 기억하면 됩니다. CSS3은 아직 완전히 지원되지 않기 때문에 이러한 특정 선언을 사용해야 합니다. 구체적인 형태는 다음과 같습니다.
* Mozilla/Firefox/Gecko 브라우저 접두사: -moz-
* Webkit(Safari/Chrome) 브라우저 접두어: -webkit-(참고: 일부 Wbkit 접두어는 Safari에서만 사용할 수 있으며 Chrome에서는 지원되지 않습니다.)
보시다시피, 이러한 선언을 사용할 때의 한 가지 단점은 Firefox, Safari 및 Chrome에서 CSS3 효과를 얻으려면 위의 접두사를 모두 사용해야 한다는 것입니다. 당연히 Internet Explorer는 CSS3를 지원하지 않으므로 다른 주요 브라우저처럼 특정 접두사 선언이 없습니다.
좋아요, 이쯤 되면 바로 시도해 보겠습니다. 참고: 이러한 접두사를 제외한 스타일 선언은 W3 표준의 실제 사양 제안입니다.
이 페이지에 대한 데모(예) 설명
이 페이지에는 모든 예제가 있습니다. 예제의 효과를 정상적으로 볼 수 없거나 일부만 볼 수 있다면 사용 중인 브라우저가 이러한 CSS3 효과를 지원하지 않는다는 의미입니다.
그림자 효과
그림자 효과는 여러 매개변수 값을 허용합니다. 첫 번째는 그림자의 색상으로, 4개의 다른 길이(길이) 값도 허용합니다. 처음 두 개의 길이 값은 X(가로) 오프셋과 Y(세로) 오프셋입니다. 다음 매개변수는 퍼지 정도를 반영하는 값입니다. 네 번째이자 마지막 값은 흐림의 확산을 정의하는 데 사용됩니다.
상자 그림자: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;
.gif)
그림자 효과 시연
그라데이션 효과
CSS3 그래디언트 스타일은 처음에는 혼란스러울 수 있습니다. 특히 -moz와 -webkit 그래디언트의 차이점이 그렇습니다. -moz에서는 먼저 그라데이션 방향을 정의한 다음 시작 색상과 끝 색상을 정의해야 합니다. -webkit의 그라데이션은 조금 더 복잡합니다. 먼저 그라데이션 유형을 정의한 다음 다음 두 값은 방향을 정의하고 마지막 두 값은 시작 색상과 끝 색상을 정의합니다. 그라데이션의.
-moz-선형-그라디언트(-90deg,#1aa6de,#022147);
-webkit-gradient(선형, 왼쪽 위, 왼쪽 아래, from(#1aa6de), to(#022147));
.gif)
그라데이션 효과 시연
RGBA 색상 모드
RGBA의 실제 색상 정의는 빨간색 값, 녹색 값, 파란색 값 및 투명도의 네 가지 매개변수 값을 허용합니다. 색상의 16진수 값(#)을 사용하지 않습니다. RGB 모드에서 색상을 설정합니다. 여기서 투명도는 색상의 투명 효과를 설정할 수 있습니다. 투명도 범위는 0에서 1까지이며, 0은 완전히 불투명하고 1은 완전히 투명합니다. 다음 데모 예제의 투명도는 모두 0.5이고 요소의 투명도는 50%이며 rgba에는 특정 브라우저 접두사 선언이 필요하지 않습니다.
배경색: rgba(0, 54, 105, .5);
.gif)
HSL 색상 모드(색조 H, 채도 S, 밝기 L)
RGBA 외에도 CSS3은 HSL 색상 모드도 지원합니다. 이는 색상과 톤을 선택하는 데 있어 많은 자유를 줍니다. HSL 색상 모델에서 H는 색상, S는 채도, L은 밝기를 나타냅니다. 색조는 색상환의 각도 값이고 채도와 밝기는 색상의 백분율 값입니다.
배경색: hsl(209,41.2%, 20.6%);
.gif)
HSL 데모 예
테두리 색상
이 CSS 스타일을 사용하려면 border-top, border-right, border-bottom 및 border-left를 각각 정의해야 다음 효과를 얻을 수 있습니다. 8픽셀의 테두리가 정의되어 있고 테두리가 8가지 색상으로 정의되어 있음을 알 수 있습니다. 이는 테두리의 색상 수가 테두리의 픽셀 너비 값과 일치해야 하기 때문입니다.
테두리: 8px 솔리드 #000;
-moz-테두리-하단-색상: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-테두리-상단 색상: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-경계-왼쪽-색상: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-경계-오른쪽-색상: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
.gif)
테두리 색상 데모
텍스트 선택 색상 설정
텍스트 선택 색상 정의는 매우 흥미로운 새로운 기능입니다. CSS 팁에서 이 내용을 처음 봤을 때 매우 사려 깊다는 생각이 들었습니다. ::selection 의사 요소 쌍을 사용하면 사용자가 텍스트 요소를 선택할 때 색상과 배경을 변경할 수 있습니다. 의견을 묻는다면 매우 아름답다고 생각합니다. ::selection은 현재 CSS3 초안에서 제거되었지만 나중에 추가할 수 있기를 바랍니다.
::selection {배경: #3C0; /* Safari */color: #90C;}::-moz-selection {배경: #3C0; /* Firefox */color: #90C;}
.gif)
텍스트 선택 색상 데모
흉한 모습
변환 스타일을 사용하면 마우스 오버 시 요소가 더 크게 표시되도록 할 수 있습니다. Scale 값을 1보다 큰 값으로 설정하면 요소가 축소됩니다. 반대로 값이 1보다 작으면 요소의 크기가 줄어듭니다. Scale 외에도 다양한 변형이 가능합니다. Firefox 개발자 페이지를 방문하여 그들이 무엇을 달성할 수 있는지 확인할 수 있습니다.
-moz-변환: scale(1.15);-webkit-transform: scale(1.15);
.gif)
변형 효과 시연
다중 열 레이아웃
이 새로운 다중 열 레이아웃 스타일을 사용하면 텍스트에 "신문" 레이아웃 효과를 줄 수 있습니다. CSS2의 구현 방법과 비교하면 CSS3에서는 이러한 유형의 효과를 얻는 것이 훨씬 간단합니다. 아래에서는 새에게 필요한 기둥 수는 물론 분리 규칙 유형과 기둥 사이의 간격이 얼마나 커야 하는지를 지정합니다. 사용하기 쉽습니다. 그렇죠?
-moz-column-count:3;-moz-column-rule: 단색 1px 검정색;-moz-column-gap: 20px;
.gif)
요약
나만큼 CSS3의 이러한 기능에 흥미가 있기를 바랍니다. 이는 웹 디자이너와 개발자에게 더 많은 권한을 부여하고 여러 측면을 단순화합니다. 이제 모든 브라우저가 이를 지원할 때까지 기다리기만 하면 됩니다. 물론, 내가 여기서 보여주는 지식은 새로운 CSS3 기능의 빙산의 일각에 불과합니다. 더 많은 정보, 팁, 도움을 원하시면 다음 웹사이트를 방문해 보시기 바랍니다.