CSS3 새로운 기능 적용의 시각 효과-CSS 튜토리얼-php.cn

CSS3 새로운 기능 적용의 시각 효과

高洛峰

풀어 주다： 2017-02-25 15:15:02

원래의

1353명이 탐색했습니다.

이 글에서는 단면 그림자, 불규칙 투영, 염색체 효과, 젖빛 유리 효과, 모서리 효과 등 CSS3의 새로운 기능에 대한 시각 효과를 소개합니다.

1 , 단면 그림자

1. box-shadow 속성 적용, 형식: h-shadow v-shadow 흐림 확산 색상 삽입 속성 값 소개 h-sahdow: 위치 수평 그림자, 음수 값 허용

①v-shadow: 수직 그림자의 위치, 음수 값 허용

②blur: 흐림 거리

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

④color: 그림자의 색상

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

2. 그림자의 확장 거리 그림자는 네 면 모두에 유효하며 한쪽에만 적용할 수는 없습니다.

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

샘플 코드:

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

로그인 후 복사

CSS3 새로운 기능 적용의 시각 효과

2. 불규칙한 투영

1. border-radius로 생성된 형상을 이용하면 투영은 좋지만 의사요소와 반투명 장식이 추가되어 그림자 성능이 매우 좋지 않으며 다음과 같은 상황에서 문제가 발생합니다.

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

② 요소는 점선, 점선 또는 반투명 테두리를 설정하지만 배경이 없습니다(또는 배경 클립이 테두리가 아님- 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))
        }

로그인 후 복사

CSS3 새로운 기능 적용의 시각 효과

1. 필터 구현에 따라 필터 속성의 해당 값을 적용하여 이미지의 채도, 밝기 및 기타 값을 조정합니다

2. 최소 블렌드 모드 구현에서 역할은 요소 콘텐츠와 배경을 구현하는 것이며 다음 요소는 "혼합"됩니다

3. 기본 배경 블렌드 모드 구현, 기능: 혼합을 구현합니다. 배경색 및 배경 이미지, 배경 이미지 및 이미지

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

.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;
        }

로그인 후 복사

CSS3 새로운 기능 적용의 시각 효과

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: &#39;&#39;;
    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;
}

로그인 후 복사

CSS3 새로운 기능 적용의 시각 효과

코드 설명: 1. 둘 다 동일하게 적용됩니다. body 및 Wrap 의사 요소 배경 이미지

2. Wrap의 배경 첨부는 고정으로 설정되어 스크롤 시 배경 이미지가 움직이지 않습니다.

3. 랩의 요소는 절대 위치로 설정되어 있고 z-인덱스 레벨은 배경보다 더 높습니다

4. 블러를 사용하여 랩 의사 요소의 블러 크기를 설정합니다

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

5. 코너 효과

구현 단계

1. 먼저 선형 그라데이션을 사용하여 코너 자르기 효과를 얻은 다음 선형을 사용합니다. -gradinet를 사용하여 삼각형을 생성하고 위치, 너비 및 높이를 설정합니다.

코드는 다음과 같습니다.

.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;
    }

로그인 후 복사

CSS3 새로운 기능 적용의 시각 효과