전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

서버 2020-01-03 00:14:41 독서 시간: null

1 개요

1.1 소개

CSS와 관련된 하나 개 이상의 이미지를 속성 사용 (배경 - 혼합 모드는 혼합 - 혼합 모드, 또는 필터) 많은 특별한 화상 모니터에 실현 될 수를, 영상 디스플레이 20 종류의 총을 포함한다.

이 효과 목록

2.1 연필 드로잉 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

专门建立的学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.pencil-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (filter: invert(1)) and (background-blend-mode: difference) {
        background-image: $url, $url;
        background-blend-mode: difference;
        background-position:
            calc(50% - 1px) calc(50% - 1px),
            calc(50% + 1px) calc(50% + 1px);
        filter: brightness(2) invert(1) grayscale(1);
        box-shadow: inset 0 0 0 1px black;
    }
}

2.2 수채화 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.watercolor-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
        position: relative;
        overflow: hidden;
        &:before, &:after {
            display: block;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
        }
        &:before {
            background-image: $url, $url;
            background-blend-mode: difference;
            background-position:
                calc(50% - 1px) calc(50% - 1px),
                calc(50% + 1px) calc(50% + 1px);
            filter: brightness(2) invert(1) grayscale(1);
            box-shadow: inset 0 0 0 1px black;
        }
        &:after {
            background-image: $url;
            background-position: center;
            mix-blend-mode: multiply;
            filter: brightness(1.3) blur(2px) contrast(2);
        }
    }
}

2.3 엠 보스

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.emboss-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
        background-image: $url, $url, $url;
        background-blend-mode: difference, screen;
        background-position:
            calc(50% - 1px) calc(50% - 1px),
            calc(50% + 1px) calc(50% + 1px),
            center;
        filter: brightness(2) invert(1) grayscale(1);
    }
}

리드 효과 2.4 컬러

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.colored-pencil-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (filter: invert(1)) and (mix-blend-mode: color) {
        position: relative;
        &:before,
        &:after {
            display: block;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            box-shadow: inset 0 0 0 1px black;
        }
        &:before {
            background-image: $url, $url;
            background-blend-mode: difference;
            background-position:
                calc(50% - 1px) calc(50% - 1px),
                calc(50% + 1px) calc(50% + 1px);
            filter: brightness(2) invert(1) grayscale(1);
        }
        &:after {
            background: inherit;
            mix-blend-mode: color;
        }
    }
}

2.5 효과 칠판

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.chalkboard-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (filter: grayscale(1)) and (background-blend-mode: difference) {
        background-image: $url, $url;
        background-blend-mode: difference;
        background-position:
            calc(50% - 1px) calc(50% - 1px),
            calc(50% + 1px) calc(50% + 1px);
        filter: brightness(1.5) grayscale(1);
    }
}

2.6 컬러 칠판 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.colored-chalkboard-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
        background-image: $url, $url, $url;
        background-size: cover;
        background-position:
            calc(50% - 1px) calc(50% - 1px),
            calc(50% + 1px) calc(50% + 1px),
            center;
        background-blend-mode: color, difference;
        filter: brightness(2);
    }
}

2.7 에어 브러쉬 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.airbrush-effect {
  $url : url(photo.jpg);
  background-image: $url;
    background-size: cover;
    background-position: center;
  @supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
        position: relative;
        overflow: hidden;
        &:after {
            display: block;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: inherit;
            filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
            mix-blend-mode: multiply;
        }
    }
}

2.8 화려한 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.hallucination-effect {
  $url : url(photo.jpg);
  $offset : 5px;
  background-image: $url;
  background-size: cover;
  background-position: center;
  @supports (mix-blend-mode: multiply) {
    position: relative;
    overflow: hidden;
    background-color: magenta;
    background-blend-mode: screen;
    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      mix-blend-mode: multiply;
      transform: scale(1.05);
    }
    &:before {
      background-color: yellow;
      background-blend-mode: screen;
      transform-origin: top left;
    }
    &:after {
      background-color: cyan;
      background-blend-mode: screen;
      transform-origin: bottom right;
    }
  }
}

2.9 플란넬 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

专门建立的学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.flannel-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (background-blend-mode: overlay) {
        background-image: $url, $url, $url;
      background-position: center;
      background-size: 100%, 100000% 100%, 100% 100000%;
      background-blend-mode: overlay;
    }
}

2.10 낮은 잉크 량

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.low-ink-x-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (background-blend-mode: screen, overlay) {
        background-image:     $url, $url, $url;
        background-size: 100% 100%, 10000% 100%;
        background-blend-mode: screen, overlay;
    }
}

2.11 효과 수직 잉크 부족

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.low-ink-y-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (background-blend-mode: screen, overlay) {
        background-image:     $url, $url, $url;
        background-size: 100% 100%, 100% 1000%;
        background-blend-mode: screen, overlay;
    }
}

2.12 콜라주 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.collage-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (background-blend-mode: overlay) {
        background-image: $url, $url, $url, $url, $url, $url;
        background-size: 200%, 80%, 60%, 50%, 40%, 100%;
        background-position: 50%, 80%, 30%, 0;
        background-blend-mode: overlay;
        background-repeat: no-repeat;
    }
}

2.13 모자이크 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.mosaic-effect {
    $url : url(photo.jpg);
    background-image: $url, $url;
    background-size: cover, 5% 5%;
    background-position: center;
  background-blend-mode: overlay;
}

2.14 액자 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.photo-border-effect {
  $url : url(photo.jpg);
  background-image: $url, $url;
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}

2.15 적외선 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.infrared-effect {
  $url : url(photo.jpg);
  background-image: $url;
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}

2.16 나이트 비전

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.night-vision-effect {
  $url : url(photo.jpg);
  $line-width: 5px;
  background-image:
    $url , radial-gradient(
      #0F0,
      #000
    ),
    repeating-linear-gradient(
      transparent 0,
      rgba(0,0,0,0.1) $line-width/2,
      transparent $line-width
    );
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}

2.17 워홀 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.warhol-effect {
  $url : url(photo.jpg);
  background-image: $url;
    background-size: cover;
    background-position: center;
  @supports (background-blend-mode: color) {
        background-image:
        linear-gradient(
          #14EBFF 0,
          #14EBFF 50%,
          #FFFF70 50%,
          #FFFF70 100%
        ),
        linear-gradient(
          #FF85DA 0,
          #FF85DA 50%,
          #AAA 50%,
          #AAA 100%
        ),
        $url;
        background-size: 50% 100%, 50% 100%, 50% 50%;
      background-position: top left, top right;
      background-repeat: no-repeat, no-repeat, repeat;
      background-blend-mode: color;
    }
}

2.18 색상 보정 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.selective-color-effect {
  $url : url(photo.jpg);
  background-image: $url;
  background-size: cover;
  background-position: center;
  @supports (filter: brightness(3)) and (mix-blend-mode: color) {
    position: relative;
    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      background-color: red;
      background-blend-mode: screen;
      mix-blend-mode: color;
      filter: brightness(3);
    }
  }
}

2.19 가로 미러 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

专门建立的学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.mirror-x-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (transform: scaleX(-1)) {
        position: relative;
        &:before, &:after {
            display: block;
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            background: inherit;
        }
        &:before {
            left: 0;
            right: 50%;
            transform: scaleX(-1);
        }
        &:after {
            left: 50%;
            right: 0;
        }
    }
}

2.20 세로 미러 효과

샘플 효과

전투에 웹 프런트 엔드를 얻기 : CSS 속성은 새로운 특수 사진 디스플레이를 달성하기 위해

SCSS 코드

.mirror-y-effect {
    $url : url(photo.jpg);
    background-image: $url;
    background-size: cover;
    background-position: center;
    @supports (transform: scaleY(-1)) {
        position: relative;
        &:before, &:after {
            display: block;
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            background: inherit;
        }
        &:before {
            top: 0;
            bottom: 50%;
            transform: scaleY(-1);
        }
        &:after {
            top: 50%;
            bottom: 0;
        }
    }
}

추천

출처blog.51cto.com/14592820/2463909
추천
행
OAuth 2.0 扩展协议之 PKCE
JAVA 동시 시스템 1.4 스레드 풀
셋째 주(6.12-6.19) 학습 계획
레이저 프린지 중심 추출 - 회색조 중심 방법 파이썬
python: GEDI HDF5 파일 가져오기, 파일 메타데이터 읽기, SDS 메타데이터 및 Beam 하위 집합 읽기
지도 제작은 로봇에서 매핑 및 위치 지정을 실행합니다.
파이썬은 어떻게 반복 요소의 세트를 결정하는 변수, 해시를 설정
또한 경기에서 캡처해야 내다 여러 조건 그룹과 정규식
JS 동적 동작 CSS의 중앙 방법을 이용하여
C# actual combat: Realize enterprise certificate identification and data extraction practice based on Tencent OCR technology
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com