如果灵活应用CSS各种滤镜的特点并加以组合,我们可以得到许多意想不到的效果。这是一些效果示范,供各位参考。 |
다양한 CSS 필터의 특성을 유연하게 적용하고 결합하면 예상치 못한 효과를 많이 얻을 수 있습니다. 다음은 참고할 수 있는 몇 가지 효과 데모입니다. |
E 흐름 디자인
|
블러 필터로 생성된 효과의 코드는 다음과 같습니다.
|
|
드롭섀도 필터로 생성된 효과의 코드는 다음과 같습니다.
| 필터: dropshadow(color=#B4BBCF,offx=6,offy=6, positive=1)
|
|
E 플로우 디자인
글로우 필터로 생성된 효과의 코드는 다음과 같습니다.
필터: 글로우(색상=#B4BBCF,강도=5) |
|
E 플로우 디자인
이 효과는 그림자와 알파라는 두 가지 필터를 사용합니다. 코드는 다음과 같습니다.
필터: 알파(불투명도=100, 마감도=0, 스타일=1)
그림자(색상=#8C96B5,방향=135)
|
E 플로우 디자인
이 효과는 또한 두 개의 필터 마스크와 그림자를 사용합니다. 코드는 다음과 같습니다.
필터: 마스크(색상=#E1E4EC)
그림자(color=#8C96B5,방향=135)크로마(color=#E1E4EC)
참고: 마스크 색상은 웹 페이지의 배경 색상과 일치해야 하며 글꼴 색상은 그림자에 따라 결정됩니다.
|
위의 효과가 음 텍스트인 경우 이 효과는 양 텍스트로 간주되어야 합니다. 마스크와 드롭섀도를 구현하려면 두 개의 필터를 사용하십시오. 마스크의 색상은 웹 페이지의 배경 색상과 일치해야 합니다. 크로마를 쌍으로 사용하면 동일한 효과를 얻을 수 있습니다. 코드는 다음과 같습니다:
필터: 마스크(색상=#E1E4EC)
드롭섀도(색상=#B4BBCF,offx=-3,offy=-3,긍정적=1)
크로마(color=#E1E4EC)"
|
|
E-flow 디자인
|
글로우 필터를 사용하면 글꼴 색상을 배경색으로 설정한 다음 글로우 필터의 강도 값을 1 또는 2로 설정하여 속이 빈 문자를 만들 수 있습니다. 이 효과의 코드는 다음과 같습니다.
필터: 글로우(색상=#8C96B5,강도=2)
그림자(색상=#B4BBCF,방향=135)
|
|
배경이 그림인 경우 만족스러운 효과를 얻으려면 마스크와 크로마를 함께 사용해야 합니다. 이렇게 하면 글꼴이 투명하게 느껴지고 배경이 비쳐보이게 됩니다.
위에 나열된 이전 효과의 코드는 다음과 같습니다.
필터: 마스크(색상=#E1E4EC)
그림자(색상=#B4BBCF,방향=135)
크로마(color=#E1E4EC)
참고: 글꼴 색상은 그림자에 따라 결정됩니다. 마스크 색상과 채도 색상은 동일해야 하며 색상은 임의로 지정됩니다.
중간에 있는 코드는 다음과 같습니다.
필터: 글로우(강도=1)
마스크(색상=#B4BBCF)
크로마(color=#B4BBCF)
참고: 마스크 색상과 크로마 색상은 동일하며, 이 색상에 따라 글꼴 색상이 결정됩니다.
후자의 코드는 다음과 같습니다.
필터: 마스크(색상=#E1E4EC)
드롭섀도(색상=#B4BBCF,offx=-3,offy=-3,긍정적=1)
크로마(color=#E1E4EC)
참고: 마스크와 크로마의 색상은 동일하며 색상은 그림자에 따라 결정됩니다.
| |
|
|
| |
|
|
|