CSS3 신기능 적용 시 시각효과에 대한 상세한 해석

목차

• 배경과 테두리 1부

• 배경과 테두리 2부

• 도형

• 시각

• 타이포그래피

• 사용자 경험

• 구조 및 레이아웃

• 전환 및 애니메이션

• 소스 코드 다운로드

1. 단면 그림자

• box-shadow 속성 적용, 형식: h-shadow v-shadow 흐림 확산 색상 삽입 속성 값 소개

• h-sahdow: 가로 그림자의 위치, 음수 값 허용

• v-shadow: 세로 그림자의 위치, 음수 값 허용 허용

• blur: 흐림 거리

• spread: 그림자의 크기, 확장 거리, 음수 가능

• color: 그림자의 색상

• inset/outset: 내부 또는 외부 그림자

• 확장 거리 섀도우는 4면 모두에 유효하며 한쪽에만 적용할 수는 없습니다.

• box-shadow는 여러 값 세트가 동시에 적용되도록 설정을 지원합니다

• 샘플 코드:

.wrap{
  width: 200px;
  height: 120px;
  background: yellowgreen;
  box-shadow: 2px 0px 4px -2px black,
  -2px 0px 4px -2px black;
}

2. 불규칙 투영

• 테두리 반경을 사용하여 모양을 생성하면 투영이 좋지만 의사 요소의 경우 그리고 반투명도가 추가되었습니다. 데코레이션 및 그림자 성능이 매우 좋지 않으며, 다음과 같은 상황에서는 문제가 발생합니다.

• 반투명 이미지, 배경 이미지 또는 테두리 이미지

• 요소가 점선, 점선으로 설정됨 또는 반투명 테두리, 배경 없음(또는 background-clip이 border-box가 아닌 경우)

• 요소 내부의 작은 모서리가 의사 요소를 사용하여 생성됩니다

• 클립 경로로 생성된 모양

• 해결책: svg의 드롭 섀도우를 사용하여

• 샘플 코드:

.wrap{
   width: 200px;
   height: 120px;
   border: 6px dotted yellowgreen;
   --box-shadow: 0px 0px 4px 0px black;
   -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1))        
 }

3.염색체 효과

• 필터 기반으로 구현, 관련 적용 필터 속성의 값,

  그림

• 의 채도, 밝기 및 기타 값을 조정합니다. min-bl을 기반으로 구현됩니다.

  end-mode, 기능: 요소 콘텐츠와 배경 및 다음 요소의 "혼합"을 실현합니다.

• 기본 배경 블렌드 모드 구현, 기능: To 배경색과 배경 이미지, 배경 이미지와 이미지의 혼합 실현

• 세 가지 상황에 대한 샘플 코드:

.wrap1{
            width: 200px;
            height: 120px;
            overflow: hidden;
        }
        .wrap1 > img{
            max-height: 100%;
            max-width: 100%;
            -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg);
        }

        .wrap2{
            width: 200px;
            height: 120px;
            background: hsl(335, 100%, 50%);
            overflow: hidden;
        }
        .wrap2 > img{
            height: 100%;
            width: 100%;
            mix-blend-mode: luminosity;
        }

        .wrap3{
            width: 200px;
            height: 120px;
            background-size: cover;
            background-color: hsl(335, 100%, 50%);
            background-image: url("../img/cat.png"); 
            background-blend-mode: luminosity;
        }

4. 젖빛 유리 효과

주요 구현 원칙: 콘텐츠 의사 요소의 배경은 기본 배경의 이미지와 동일하며 필터:흐림 흐림 필터를 추가합니다. 흐림 효과는 기본 배경에 적용할 수 없으며 요소의 배경에도 적용할 수 없습니다(이렇게 하면 요소 자체가 흐려져 텍스트가 보이지 않게 됩니다).

의사에만 사용할 수 있습니다. -요소 .

코드는 다음과 같습니다.

body{
    background: url("../img/cat.png") no-repeat;
    background-size: cover;
}.wrap{
    position: relative;
    width: 500px;
    margin: 0px auto;
    padding: 10px;
    line-height: 1.5;
    background: hsla(0, 0%, 100%, .3);
    overflow: hidden;
}.wrap::before{
    content: '';
    background: url("../img/cat.png") 0/cover fixed;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

코드 설명:

• 바디와 랩 모두 pseudo-element 적용 동일한 배경 이미지

• wrap의 background-attachment를 고정으로 설정하여 스크롤 시 배경 이미지가 움직이지 않도록

• 랩 의사 요소는

  절대 위치 지정으로 설정되었으며 Z-색인 수준은 배경보다 높습니다.

• 블러를 사용하여 블러 크기 설정 랩 의사 요소

• 너비를 늘리려면 음수 여백 값을 사용하고 상위 요소에 Overflow:hidden을 사용하여 오버플로를 숨겨 흐린 배경을 더욱 사실적으로 만듭니다.

5. 코너 효과

구현 단계

• 먼저 선형 그라데이션을 사용하여 코너를 구현합니다. 자르기 효과

• 그런 다음 선형 그라디넷을 사용하여 삼각형을 생성하고 위치, 너비 및 높이를 설정합니다.

• 코드는 다음과 같습니다.

.wrap{
        background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em,
        linear-gradient(-135deg, transparent 1.4em, #58a 0);
        width: 200px;
        height: 120px;
    }

참고

• 100% 0/2em 배경 요소의 위치와 너비를 지정할 때 2em , 특히 2em 너비와 높이는 배경 요소의 일반적인 너비입니다.

• 두 번째 선형 그래디언트의 1.4em은 그래디언트 축에서 요소의 상단 가장자리까지의 거리를 따라 측정됩니다. 그라디언트 축을 오른쪽 상단으로 가장자리 상단

• 에서 왼쪽 하단까지의 거리가 그라디언트가 왼쪽 하단 모서리에서 시작한다는 의미

위 내용은 CSS3 신기능 적용 시 시각효과에 대한 상세한 해석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!