나는 최근 드리블 샷에서 유리 모르피즘으로 알려진 멋진 효과를 발견했습니다. 첫 번째 생각은 SVG-ing에 시간을 낭비하지 않고 아이콘에 이모티콘을 사용하면 몇 분 안에 빨리 재현 할 수 있다는 것입니다.
나는 그“몇 분”에 대해 더 잘못 할 수 없었습니다. 결국 그들은이 가려움증을 긁어내는 날이되었습니다!
그러한 효과를 CSS하는 방법에 대한 리소스가 있지만 오버레이가 직사각형이거나 경계가있는 직사각형 인 매우 간단한 경우를 가정합니다. 그러나이 아이콘이 이모티콘이든 적절한 SVG이든 아이콘과 같은 불규칙한 모양에 대한 유리 모르피스 효과를 얻는 것은 예상보다 훨씬 복잡하기 때문에 프로세스, 트랩과 함께 배운 것들을 공유 할 가치가 있다고 생각했습니다. 그리고 내가 여전히 이해하지 못하는 것들.
짧은 대답 : SVG는 너무 많은 시간이 걸리기 때문입니다. 긴 대답 : 이미지 편집기에 그려진 예술적 감각이 부족하기 때문에, 나는 종종 온라인에서 원래 크기의 10% 미만으로 온라인으로 찾은 기성산 SVG를 압축 할 수있을 정도로 구문에 익숙합니다. 그래서 인터넷에서 찾을 수있는 것처럼 사용할 수는 없습니다. 코드를 매우 깨끗하고 컴팩트하게 만들기 위해 코드를 다시 만들어야합니다. 그리고 이것은 시간이 걸립니다. 세부 사항이 작동하기 때문에 많은 시간.
그리고 내가 원하는 것이 아이콘으로 메뉴 개념을 신속하게 코딩하는 것입니다. 나는 이모티콘을 사용하여 테마와 일치시키기 위해 필터를 적용하고 그게 IT입니다! 이 액체 탭 바 상호 작용 데모에 대해 내가 한 일입니다. 그 아이콘은 모두 이모티콘입니다! 부드러운 계곡 효과는 마스크 합성 기술을 사용합니다.
좋아, 그래서 이것은 우리의 출발점이 될 것입니다 : 아이콘에 이모티콘을 사용하십시오.
나의 첫 번째 생각은 내비게이션 링크의 두 개의 의사 (이모티콘 컨텐츠 포함)를 쌓아서 약간 오프셋하고 바닥을 변환으로 회전시켜 부분적으로 겹치도록하는 것이 었습니다. 그런 다음 1보다 작은 불투명도 값을 가진 상단 1 개의 반 트랜스 파렌트를 만들고 배경 필터를 설정합니다 : blur ()는 충분해야합니다.
이제 소개를 읽은 후 계획대로 진행되지는 않았지만 코드에서 어떻게 보이는지, 어떤 문제가 있는지 살펴 보겠습니다.
우리는 다음 퍼그로 Nav bar를 생성합니다.
- 데이터하자 = {
- 홈 : {ico : '?', Hue : 200},
- 노트 : {ico : '? ️', hue : 260},
- 활동 : {ico : '?', Hue : 320},
- 발견 : {ico : '?', Hue : 30}
-};
- e = Object.entries (데이터);
- n = e.length를하자;
Nav
- for (i = 0; i> n; i)
a (href = ' #'data-ico = e [i] [1] .ico style =`-hue : $ {e [i] [1] .hue} deg`) #{e [i] [0]}아래의 HTML로 컴파일하는 것은 다음과 같습니다.
<avi> <a href="'#'data-ico" :> home </a> <a href="'#'data-ico" :> 노트 </a> <a href="'#'data-ico" style="'-Hue" :> 활동 </a> <a href="'#'data-ico" :> iscovery </a> </avi>
우리는 레이아웃으로 시작하여 요소 그리드 항목을 만듭니다. 중간에 NAV를 배치하고, 링크를 명시적인 폭을 제공하고, 각 링크에 대한 의사를 상단 셀에 넣고 (링크 텍스트 내용을 하단 셀에 밀어 넣음) 링크 텍스트와 의사를 중간에 정렬합니다.
Body, Nav, A {디스플레이 : 그리드; }
몸 {
여백 : 0;
높이 : 100VH;
}
Nav {
그리드-아우토 플로우 : 컬럼;
장소 자체 : 센터;
패딩 : .75EM 0 .375EM;
}
A {
너비 : 5em;
텍스트 정렬 : 센터;
& :: 이전, & :: 이후 {
그리드 영역 : 1/ 1;
내용 : att (data-ico);
}
}이모티콘의 모양은 Demos View를 사용하는 브라우저에 따라 다를 것입니다.
우리는 읽을 수있는 글꼴을 선택하고, 크기를 높이고, 아이콘을 더 크게 만들고, 배경을 설정하고, 각 링크에 대해 더 좋은 색상을 설정합니다 (각 스타일 속성의 -HUE 사용자 정의 속성에 따라).
몸 {
/ * 이전과 동일 */
배경 : #333;
}
Nav {
/ * 이전과 동일 */
배경 : #fff;
글꼴 : 클램프 (.625EM, 5VW, 1.25EM)/ 1.25 UBUNTU, SANS-SERIF;
}
A {
/ * 이전과 동일 */
색상 : HSL (var (-Hue), 100%, 50%);
텍스트 결정 : 없음;
& :: 이전, & :: 이후 {
/ * 이전과 동일 */
글꼴 크기 : 2.5EM;
}
}링크 의사로 생성 된 두 이모티콘 레이어를 차별화하기 때문에 상황이 흥미로워지기 시작합니다. 우리는 pseudo 전에 약간 움직이고 회전하고, 세피아 (1) 필터로 흑백으로 만들고 오른쪽 색조로 가져 가서 대비 () - Lea Verou의 Oldie이지만 Goldie 기술을 올리십시오. 우리는 또한 필터를 적용합니다 : grayscale (1)은 :: pseudo 후에는 반대 방향으로 만들고, 그렇지 않으면, 우리는 그것을 통해 다른 의사를 볼 수 없기 때문입니다.
A {
/ * 이전과 동일 */
&::전에 {
변환:
번역 (.375em, -.25em)
회전 (22.5deg);
필터:
세피아 (1)
Hue-Rotate (calc (var (-hue) -50deg))
포화 (3);
}
&::후에 {
불투명도 : .5;
필터 : 그레이 스케일 (1);
}
}지금까지 너무 좋아… 그래서 뭐? 내가 이것을 코딩하려는 아이디어를 얻었을 때 어리석게 생각한 다음 단계는 배경 필터 : Blur (5px)를 상단 (:: after) 레이어에 설정하는 것과 관련이 있습니다.
Firefox는 여전히 gfx.webrender.all 및 layout.css.backdrop-filter.enabled 플래그가 true : backdrop-filter 속성이 작동하기 위해 config가 필요합니다.
슬프게도, 결과는 내가 기대했던 것과 같지 않습니다. 우리는 전체 상단 아이콘 경계 상자의 크기를 오버레이 할 수 있지만 하단 아이콘은 실제로 흐려지지 않습니다.
그러나 나는 배경 필터를 가지고 놀았을 것이라고 확신합니다.
글쎄, 당신이 무언가가 작동하지 않는지 전혀 모른다면, 당신이 할 수있는 일은 또 다른 작업 예제를 취하고, 원하는 결과를 얻으려고 조정을 시작하고 그것이 어디에서 깨지는 지 확인하십시오!
그래서 나의 오래된 작업 데모의 단순화 된 버전을 보자. HTML은 섹션의 기사 일뿐입니다. CSS에서는 먼저 약간의 차원을 설정 한 다음 섹션에서 이미지 배경을 설정하고 기사에 반대 기간을 설정합니다. 마지막으로, 우리는 기사에 배경 필터 속성을 설정했습니다.
섹션 {배경 : URL (Cake.jpg) 50%/ Cover; }
기사 {
마진 : 25Vmin;
높이 : 40VH;
배경 : HSLA (0, 0%, 97%, .25);
배경 필터 : 블러 (5px);
}이것은 작동하지만 우리는 두 층이 서로 중첩되어있는 것을 원하지 않습니다. 우리는 그들이 형제 자매가되기를 원합니다. 따라서 두 층 모두 기사 형제 자매를 만들고 부분적으로 겹치게하고 유리 모르피즘 효과가 여전히 작동하는지 확인합시다.
<article class="'base'"> </article>
기사 {너비 : 66%; 높이 : 40VH; }
.Base {배경 : URL (Cake.jpg) 50%/ Cover; }
.회색 {
마진 : -50% 0 33%;
배경 : HSLA (0, 0%, 97%, .25);
배경 필터 : 블러 (5px);
}크롬에서는 여전히 모든 것이 괜찮아 보이며 대부분의 경우 Firefox도 있습니다. Firefox의 가장자리 주위에 Blur ()가 처리되는 방식은 우리가 원하는 것이 아니라 어색한 것처럼 보입니다. 그리고 사양의 몇 가지 이미지를 기반으로 Firefox 결과도 잘못되었다고 생각합니까?
나는 우리의 두 레이어가 견고한 배경에 앉아있는 경우 (이 경우에 흰색)가 하단 레이어 (.Base)에 오프셋이없는 박스 샤이 도우, 블러가없는 박스 섀도우, 상단 레이어에 적용되는 배경 필터에 사용하는 블러 반경의 두 배인 스프레드 반경을 제공하는 것입니다. 물론,이 수정은 우리의 특별한 경우에 작동하는 것 같습니다.
두 개의 레이어가 고정되지 않은 이미지 배경이있는 요소에 앉으면 상황이 훨씬 더 털이 발생합니다 (즉, Firefox 문제를 해결하기 위해 레이어링 된 배경 접근법을 사용할 수 있습니다). 그러나 여기서는 그렇지 않습니다.
그래도 다음 단계로 넘어 갑시다. 우리는 우리의 두 층이 두 개의 정사각형 상자가되기를 원하지 않습니다. 우리는 이모티콘이되기를 원합니다. 즉, 우리는 hsla () 배경을 사용하여 상단 1에 대한 반 배양 성을 보장 할 수 없다는 것을 의미합니다. 불투명도를 사용해야합니다.
.회색 {
/ * 이전과 동일 */
불투명도 : .25;
배경 : HSL (0, 0%, 97%);
}우리가 문제를 찾은 것 같습니다! 어떤 이유로, 불투명도를 사용하여 최상층 반 배양 장치를 만들면 크롬과 파이어 폭스 모두에서 배경 필터 효과가 나옵니다. 그게 버그인가요? 그게 무슨 일이 일어날까요?
MDN은 배경 필터 페이지의 첫 번째 단락에서 다음과 같이 말합니다.
요소 뒤에있는 모든 것에 적용되므로 요소 나 배경을 적어도 부분적으로 투명하게 만드는 효과를 확인해야합니다.
위의 문장을 이해하지 못하면 Chrome과 Firefox에서 비록 불투명도가 효과를 깨뜨리지 않아야한다고 제안합니다.
사양은 어떻습니까? 글쎄, 사양은 많은 삽화 나 대화식 데모가없는 거대한 텍스트 벽으로, 스 unk 크의 향기를 스니핑하는 것처럼 매력적으로 읽는 언어로 작성되었습니다. 여기에는이 부분이 포함되어 있는데, 나는 느낌이 관련 될 수 있지만, 무엇을 말하는지 이해하는 것이 확실하지 않습니다. 우리가 배경 필터가있는 상단 요소에 설정된 불투명도가 그 아래 형제에도 적용됩니다. 그것이 의도 된 결과라면 실제로는 일어나지 않습니다.
요소 B의 일부 부분이 반 투과성이 아닌 한 배경 필터의 효과는 보이지 않습니다. 또한 요소 B에 적용되는 불투명도는 필터링 된 배경 이미지에도 적용됩니다.
사양이 말할 수있는 것은 사실이 남아 있습니다. 불투명 속성과 함께 최상층의 반 배양 장치를 만들면 크롬과 파이어 폭스에서 유리 모르피 효과가 나옵니다. 이모티콘 세미 트랜스 펜트를 만드는 다른 방법이 있습니까? 글쎄, 우리는 필터를 시도 할 수 있습니다 : 불투명 ()!
이 시점에서, 나는 아마도이 대안이 작동하는지 아닌지를보고해야하지만, 현실은 ... 나는 전혀 모른다! 나는이 단계에서 며칠을 보냈고 그 동안 수많은 시간에 수많은 시간을 점검해야한다. 나는 또한 트위터에서 물었고 혼합 답변을 얻었습니다. 당신이 도울 수 없지만 할로윈 유령이 코드가 잊혀지지 않고 겁을주지 않는지 궁금해하는 순간 중 하나입니다. 영원히!
모든 희망이 사라진 것처럼 보이지만 한 가지만 더 시도해 봅시다 : 사각형을 텍스트로 교체하고, 상단은 색상이있는 반대 방향입니다 : hsla (). 우리는 시원한 이모티콘 유리 모르피즘 효과를 얻지 못할 수도 있지만, 아마도 평범한 텍스트에 대한 결과를 얻을 수 있습니다.
그래서 우리는 기사 요소에 텍스트 내용을 추가하고, 명시 적 크기를 줄이고, 글꼴 크기를 강화하고, 부분적으로 중첩을 제공하는 마진을 조정하고, 가장 중요한 것은 마지막 작업 버전의 배경 선언을 색상의 색상으로 바꾸는 것입니다. 접근성의 이유로, 우리는 또한 바닥에 aria-hidden = 'true'를 설정했습니다.
<article class="'base'aria-hidden"> lion? </article> lion?
기사 {font : 900 21VW/ 1 필기체; }
.Base {색상 : #ff7a18; }
.회색 {
여백 : -.75EM 0 0.5EM;
색상 : HSLA (0, 0%, 50%, .25);
배경 필터 : 블러 (5px);
}여기에 주목해야 할 몇 가지가 있습니다.
먼저, 하위 저렴한 알파를 사용하여 색상 속성을 값으로 설정하면 크롬과 파이어 폭스에서 평범한 텍스트가 아니라 이모티콘 세미 트란 스피어가됩니다 ! 이것은 내가 전에 전혀 몰랐으며 다른 채널이 어떤 식 으로든 이모티콘에 영향을 미치지 않는다는 점을 감안할 때 나는 절대적으로 마음에 드는 것을 발견합니다.
둘째, Chrome과 Firefox는 오렌지 텍스트와 이모티콘의 전체 영역을 흐리게하고 있으며, 이는 실제 텍스트 아래의 내용을 흐리게하는 대신 상단 세미 환경 회색 레이어의 경계 상자 아래에서 발견됩니다. Firefox에서는 어색한 날카로운 가장자리 효과로 인해 상황이 더 나빠 보입니다.
상자 흐림이 우리가 원하는 것이 아니지만, 나는 도움이 될 수 없지만 사양이 다음을 말하기 때문에 의미가 있다고 생각합니다.
[…] 전체 필터링 된 배경 이미지를 볼 수있는 "투명한"요소를 만들려면 "배경색 : 투명"을 사용할 수 있습니다.
따라서 상단 레이어가 텍스트가 아닌 또 다른 비 교방형 모양 일 때 어떤 일이 발생하는지 확인하기 위해 테스트 해 보겠습니다.
Chrome과 Firefox 모두에서, 상단 층의 전체 상자 아래의 영역은 배경으로 모양이 얻어 질 때 흐려집니다. 그러나 Chrome은 클립 경로와 마스크 모양을 존중하지만 Firefox는 그렇지 않습니다. 그리고이 경우 크롬 결과가 나에게 더 합리적이지만, 나는 어떤 정확한지 알지 못합니다.
이 결과와 트위터 제안은 블러가 텍스트 가장자리를 존중하는 방법을 물었을 때 얻은 트위터 제안서가 아니라 크롬의 다음 단계로 이어졌습니다. 상단 레이어 (.grey)의 텍스트에 클리핑 된 마스크를 적용합니다. 이 솔루션은 두 가지 이유로 Firefox에서 작동하지 않습니다. 하나, 텍스트는 슬프게도 WebKit 브라우저에서만 작동하는 비표준 마스크 클립 값이며 위의 테스트에서 볼 수 있듯이 마스킹은 Firefox의 마스크에서 생성 된 모양으로 흐림 영역을 제한하지 않습니다.
/ * 이전과 동일 */
.회색 {
/ * 이전과 동일 */
-webkit 마스크 : 선형 그레이드 (빨간색, 빨간색) 텍스트; / * WebKit 브라우저에서만 작동 */
}좋아, 이것은 실제로 우리가 원하는 것 같아서 올바른 방향으로 향하고 있다고 말할 수 있습니다! 그러나 여기서 우리는 바닥 층에 오렌지 하트 이모티콘을 사용했고 상단 세미 환경 층에는 검은 심장 이모티콘을 사용했습니다. 다른 일반 이모티콘에는 흑백 버전이 없으므로 다음 아이디어는 처음에 두 레이어를 동일하게 만들고 상단 1 개의 Semitransparent를 만들고 필터를 사용하는 것이 었습니다. Grayscale (1).
기사 {
색상 : HSLA (25, 100%, 55%, var (-a, 1));
글꼴 : 900 21VW/ 1.25 필기체;
}
.회색 {
--a : .25;
여백 : -1em 0 .5EM;
필터 : 그레이 스케일 (1);
배경 필터 : 블러 (5px);
-webkit 마스크 : 선형 그레이드 (빨간색, 빨간색) 텍스트;
}글쎄, 그것은 우리가 최상위 레이어에 원하는 영향을 미쳤습니다. 불행히도, 이상한 이유로, 그것은 또한 층의 흐릿한 영역에도 영향을 미쳤던 것 같습니다. 이 순간은 다른 레이어를 추가한다는 아이디어를 얻기 전에 랩탑을 창 밖으로 내놓는 것을 간단히 고려해야합니다.
우리는 우리가 지금까지 가지고있는 것처럼, 그 위의 다른 두 가지에서 약간 상쇄되는 것처럼 기본 레이어를 가지고 있습니다. 중간 층은 배경 필터가 적용되는 "유령"(투명)입니다. 마지막으로, 상단은 세미 환경이며 그레이 스케일 (1) 필터를 얻습니다.
바디 {디스플레이 : 그리드; }
기사 {
그리드 영역 : 1/ 1;
장소 자체 : 센터;
패딩 : .25EM;
색상 : HSLA (25, 100%, 55%, var (-a, 1));
글꼴 : 900 21VW/ 1.25 Pacifico, Z003, Segoe Script, Comic Sans MS, Cursive;
}
.Base {마진 : -.5em 0 -.5em; }
.midl {
--a : 0;
배경 필터 : 블러 (5px);
-webkit 마스크 : 선형 그레이드 (빨간색, 빨간색) 텍스트;
}
.Grey {필터 : Grayscale (1) 불투명 (.25)}이제 우리는 어딘가에 도착합니다! 기본 층을 흑백으로 만드십시오!
/ * 이전과 동일 */
.Base {
여백 : -.5em 0 -.5em;
필터 : Sepia (1) Hue-Rotate (165deg) 대비 (1.5);
}좋아, 이것은 우리가 원하는 효과입니다!
Chrome 솔루션을 코딩하는 동안 Firefox가 Element () 함수를 지원하는 유일한 브라우저이므로 Firefox에서 동일한 결과를 꺼낼 수 있다고 생각합니다. 이 기능을 사용하면 요소를 가져 와서 다른 요소의 배경으로 사용할 수 있습니다.
아이디어는 .base 및 .grey 레이어가 Chrome 버전에서와 동일한 스타일을 갖는 반면, 중간 레이어는 (요소 () 함수를 통해)가 흐릿한 버전의 레이어 버전을 갖는다는 것입니다.
일을 더 쉽게하기 위해, 우리는이 흐릿한 버전과 중간 계층으로 시작합니다.
<article id="'blur'aria-hidden"> lion? </article> <article class="'midl'"> lion? </article>
우리는 흐릿한 버전을 절대적으로 배치하고 (아직도 시야에 보관하고) 단색으로 만들고 흐리게 한 다음 .midl의 배경으로 사용합니다.
#Blur {
위치 : 절대;
상단 : 2em; 오른쪽 : 0;
여백 : -.5em 0 -.5em;
필터 : Sepia (1) Hue-Rotate (165deg) 대비 (1.5) 블러 (5px);
}
.midl {
--a : .5;
배경 : -moz -element (#blur);
}또한 .midl 요소 Semitransparent의 텍스트를 만들어 배경을 볼 수 있습니다. 우리는 결국 그것을 완전히 투명하게 만들 것이지만, 지금은 여전히 배경에 비해 그 위치를보고 싶어합니다.
우리는 한 가지 문제를 즉시 알 수 있습니다. 마진은 실제 #blur 요소를 상쇄하기 위해 작동하지만 배경으로 위치를 이동시키는 데 아무런 영향을 미치지 않습니다. 그러한 효과를 얻으려면 변환 속성을 사용해야합니다. 이것은 또한 회전이나 다른 변환을 원한다면 우리가 도움이 될 수 있습니다. 마진을 변환 (-9deg)으로 바꾸는 곳에서 볼 수 있으므로 아래에서 볼 수 있습니다.
좋아,하지만 우리는 여전히 번역을 고수하고 있습니다.
#Blur {
/ * 이전과 동일 */
변환 : 번역 ( -. 25EM, -.25EM); / * 대체 여백 */
}여기서 주목해야 할 것은 중간 계층의 패딩 박스의 한계를 벗어나면서 약간 흐릿한 배경이 잘린다는 것입니다. 어쨌든 우리의 다음 움직임은 배경을 텍스트 영역에 클립하는 것이기 때문에이 단계에서는 중요하지 않지만. 기업 레이어가 번역되기 때문에 그 공간을 갖는 것이 좋습니다.
따라서, 우리는이 시점에서 우리가 .midl 요소의 텍스트를 설정함에 따라이 시점에서도 시각적으로 차이가 없더라도 패딩을 조금씩 올릴 것입니다.
기사 {
/ * 이전과 동일 */
패딩 : .5EM;
}
#Blur {
위치 : 절대;
하단 : 100VH;
변환 : 번역 ( -. 25EM, -.25EM);
필터 : Sepia (1) Hue-Rotate (165deg) 대비 (1.5) 블러 (5px);
}
.midl {
--a : .1;
배경 : -moz -element (#blur);
배경 클립 : 텍스트;
}또한 텍스트를 통해 배경에서 더 나은보기를 원하기 때문에 #Blur 요소를 시야에서 옮기고 .midl 요소 색상의 알파를 더 줄였습니다. 우리는 그것을 완전히 투명하게 만들지는 않지만 지금도 여전히 눈에 잘 띄지 않으므로 어떤 영역을 덮고 있는지 알 수 있습니다.
다음 단계는 크롬 케이스에서와 거의 동일한 스타일의 .Base 요소를 추가하여 마진을 변환으로 대체하는 것입니다.
<article id="'blur'aria-hidden"> lion? </article> <article class="'base'aria-hidden"> lion? </article> <article class="'midl'"> lion? </article>
#Blur {
위치 : 절대;
하단 : 100VH;
변환 : 번역 ( -. 25EM, -.25EM);
필터 : Sepia (1) Hue-Rotate (165deg) 대비 (1.5) 블러 (5px);
}
.Base {
변환 : 번역 ( -. 25EM, -.25EM);
필터 : Sepia (1) Hue-Rotate (165deg) 대비 (1.5);
}이러한 스타일의 일부가 일반적이므로, 복제를 피하고 우리가 쓰는 코드의 양을 줄이기 위해 흐릿한 요소 #Blur에 .base 클래스를 추가 할 수도 있습니다.
<article id="'blur'class"> lion? </article> <article class="'base'aria-hidden"> lion? </article> <article class="'midl'"> lion? </article>
#Blur {
---- : 5px;
위치 : 절대;
하단 : 100VH;
}
.Base {
변환 : 번역 ( -. 25EM, -.25EM);
필터 : Sepia (1) Hue-Rotate (165deg) 대비 (1.5) Blur (var (-r, 0));
}여기에는 다른 문제가 있습니다. .base 층에는 변환이 있으므로 이제 DOM 순서에도 불구하고 .MIDL 레이어 위에 있습니다. 가장 간단한 수정? .midl 요소에 z-index : 2를 추가하십시오!
우리는 여전히 약간 더 미묘한 문제가 있습니다. .Base 요소는 우리가 .midl 요소에 설정 한 흐릿한 배경의 반대 방향 부분 아래에서 여전히 볼 수 있습니다. 우리는 아래에 .base 층 텍스트의 날카로운 모서리를보고 싶지 않지만, 흐릿한 픽셀은 가장자리에 가까운 픽셀이 세미 환경이되기 때문입니다.
텍스트 계층의 부모에 어떤 종류의 배경이 있는지에 따라, 이것은 약간 또는 많은 노력으로 해결할 수있는 문제입니다.
우리가 탄탄한 배경 만 있으면 .midl 요소의 배경색을 동일한 값으로 설정하여 문제가 해결됩니다. 다행스럽게도 이것은 우리의 경우가되므로 다른 시나리오에 대해 논의하지 않을 것입니다. 어쩌면 다른 기사에서.
.midl {
/ * 이전과 동일 */
배경 : -moz -element (#blur) #fff;
배경 클립 : 텍스트;
}우리는 Firefox에서 좋은 결과에 가까워지고 있습니다! 남은 것은 Chrome 버전에서와 똑같은 스타일의 상단 .grey 레이어를 추가하는 것입니다!
.Grey {필터 : GrayScale (1) 불투명 (.25); }슬프게도, 이렇게하는 것은 우리가 원하는 결과를 얻지 못합니다. 이것은 우리가 중간 층 텍스트를 완전히 투명하게 만들면 (알파를 제로화하여 -a : 0) 배경 (단단한 흰색 위에 흐릿한 요소 #blur를 사용하는 것) 만 볼 수 있도록 텍스트 영역에 클리핑하는 것입니다.
문제는 우리가 .grey 레이어를 볼 수 없다는 것입니다! z-index : 2를 설정하기 때문에, 중간 층 .midl은 이제 dom 순서에도 불구하고 최상위 레이어 (.grey One)가 될 것입니다. 수정? .grey 레이어에서 z-index : 3을 설정하십시오!
.회색 {
Z- 인덱스 : 3;
필터 : 그레이 스케일 (1) 불투명 (.25);
}나는 층 후 Z- 인덱스 층을 제공하는 것을 좋아하지는 않지만, 노력이 적고 효과가 있습니다! 이제 멋진 Firefox 솔루션이 있습니다.
더 많은 것이 있기 때문에 Firefox 코드로 시작합니다.
<article id="'blur'class"> lion? </article> <article class="'base'aria-hidden"> lion? </article> <article class="'midl'aria-hidden"> lion? </article> lion?
바디 {디스플레이 : 그리드; }
기사 {
그리드 영역 : 1/ 1;
장소 자체 : 센터;
패딩 : .5EM;
색상 : HSLA (25, 100%, 55%, var (-a, 1));
글꼴 : 900 21VW/ 1.25 필기체;
}
#Blur {
---- : 5px;
위치 : 절대;
하단 : 100VH;
}
.Base {
변환 : 번역 ( -. 25EM, -.25EM);
필터 : Sepia (1) Hue-Rotate (165deg) 대비 (1.5) Blur (var (-r, 0));
}
.midl {
--a : 0;
z- 인덱스 : 2;
배경 : -moz -element (#blur) #fff;
배경 클립 : 텍스트;
}
.회색 {
Z- 인덱스 : 3;
필터 : 그레이 스케일 (1) 불투명 (.25);
}추가 Z-Index 선언은 크롬의 결과에 영향을 미치지 않으며 #blur 요소가 없습니다. Chrome에서 작동하기 위해 이것이 누락 된 유일한 것은 배경 필터와 .midl 요소의 마스크 선언입니다.
배경 필터 : 블러 (5px); -webkit 마스크 : 선형 그레이드 (빨간색, 빨간색) 텍스트;
우리는 배경 필터가 Firefox에 적용되기를 원하지 않기 때문에 크롬에 배경을 적용하기를 원하지 않기 때문에 @supports를 사용합니다.
$ r : 5px;
/ * 이전과 동일 */
#Blur {
/ * 이전과 동일 */
---- #{$ r};
}
.midl {
--a : 0;
z- 인덱스 : 2;
/ * Firefox에 적용되지 않도록 @Supports 내부를 재설정해야합니다 */
배경 필터 : Blur ($ r);
/ * Firefox의 잘못된 값, 어쨌든 적용되지 않으면 재설정 할 필요가 없습니다 */
-webkit 마스크 : 선형 그레이드 (빨간색, 빨간색) 텍스트;
@Supports (배경 : -Moz -Element (#Blur)) { / * Firefox의 경우 * /
배경 : -moz -element (#blur) #fff;
배경 클립 : 텍스트;
배경 필터 : 없음;
}
}이것은 우리에게 크로스 브라우저 솔루션을 제공합니다!
두 브라우저에서는 결과가 동일하지 않지만 여전히 비슷하고 나에게 충분합니다.
슬프게도, 그것은 불가능합니다.
먼저, Firefox 솔루션은 하나 (ID에 의해 참조)를 다른 요소의 배경으로 사용하기 때문에 적어도 두 개의 요소를 갖추어야합니다.
둘째, 나머지 3 개의 층 (어쨌든 크롬 솔루션에 필요한 유일한 층)에 대한 첫 번째 생각은 그 중 하나가 실제 요소이고 다른 두 층은 실제 요소 일 수 있다는 것입니다.이 경우에는 그렇게 간단하지 않습니다.
크롬 솔루션의 경우 각 층은 최소한 하나의 속성을 가지고 있으며, 이는 또한 모든 어린이와 가질 수있는 의사에 돌이킬 수 없을 정도로 영향을 미치지 않습니다. .Base 및 .grey 레이어의 경우 필터 속성입니다. 중간 층의 경우 마스크 속성입니다.
따라서 모든 요소를 갖는 것은 예쁘지는 않지만, 유리 모르피즘 효과가 이모티콘에서도 작동하기를 원한다면 더 나은 솔루션이없는 것처럼 보입니다.
우리가 평범한 텍스트 (그림에 이모티콘이 없음)에 대한 유리 운동 효과 만 원한다면 크롬 솔루션에는 하나만 필요한 두 가지 요소로 만 달성 할 수 있습니다. 다른 하나는 Firefox에서만 필요한 #Blur 요소입니다.
혈액 <article class="'text'aria-hidden"> </article>
우리는 .text 요소의 두 유사를 사용하여 기본 레이어 (:: 이전)와 다른 두 층의 조합 (:: 이후)을 만듭니다. 여기서 우리를 도와주는 것은 그림에서 이모티콘을 사용하면 필터가 필요하지 않지만 Grayscale (1)이 필요하지 않지만 대신 색 값의 채도 구성 요소를 제어 할 수 있습니다.
이 두 의사는 다른 하나의 상단에 쌓여 있으며, 하단 (:: 이전)은 같은 양으로 오프셋되고 #Blur 요소와 동일한 색상을 갖습니다. 이 색상 값은 포화와 알파를 모두 제어하는 데 도움이되는 깃발 인 -f에 따라 다릅니다. #Blur 요소와 :: pseudo (---- : 1)의 경우, 포화는 100%이고 알파는 1입니다. pseudo (--f : 0) 이후 :: 이후의 경우 포화는 0%이고 알파는 .25입니다.
$ r : 5px;
%텍스트 {// #Blur 및 둘 다 .text pseudos에서 사용
--f : 1;
그리드 영역 : 1/ 1; // Pseudos를 스택으로, 절대적으로 배치 된 #base에 대해 무시합니다
패딩 : .5EM;
색상 : HSLA (345, calc (var (-f)*100%), 55%, calc (.25 .75*var (-f)));
내용 : attr (data-text);
}
기사 {font : 900 21VW/ 1.25 필기체}
#Blur {
위치 : 절대;
하단 : 100VH;
필터 : 블러 ($ r);
}
#Blur, .text :: 이전 {
변환 : 번역 ( -. 125em, -.125em);
@extend %텍스트;
}
.텍스트 {
디스플레이 : 그리드;
&::후에 {
--f : 0;
@extend %텍스트;
z- 인덱스 : 2;
배경 필터 : Blur ($ r);
-webkit 마스크 : 선형 그레이드 (빨간색, 빨간색) 텍스트;
@Supports (배경 : -Moz -Element (#Blur)) {
배경 : -moz -element (#blur) #fff;
배경 클립 : 텍스트;
배경 필터 : 없음;
}
}
}좋은 소식은 우리가 링크 아이콘에 유리 운동 효과 만있는 특정 사용 사례 (텍스트를 포함한 전체 링크가 아님)가 실제로 조금 단순화합니다.
우리는 다음 퍼그를 사용하여 구조를 생성합니다.
- 데이터하자 = {
- 홈 : {ico : '?', Hue : 200},
- 노트 : {ico : '? ️', hue : 260},
- 활동 : {ico : '?', Hue : 320},
- 발견 : {ico : '?', Hue : 30}
-};
- e = Object.entries (데이터);
- n = e.length를하자;
Nav
- for (i = 0; i <n i e .ico a.item : .hue deg span.icon.tint span.icon.midl span.icon.grey><p> 아래의 HTML 구조를 생성합니다.</p>
<pre rel="HTML" data-line=""> <avi>
<a class="'항목'href" :>
<span class="'아이콘" tint>? </span>
<span class="'아이콘" tint>? </span>
<span class="'icon" midl :>? </span>
<span class="'icon" grey>? </span>
집
</a>
</avi>우리는 아마도 그 범위의 일부를 의사로 대체 할 수 있지만, 이와 같이 더 일관되고 쉽다고 생각합니다. 그래서 스팬 샌드위치입니다!
알아야 할 매우 중요한 것은 각 항목에 대해 다른 흐릿한 아이콘 레이어를 가지고 있다는 것입니다 (각 항목에는 자체 아이콘이 있기 때문에). 이 방법으로 데이터 객체에서 항목을 추가하거나 제거 할 경우 CSS 파일을 변경하지 않아도됩니다 (따라서 메뉴 항목 수를 변경).
우리는 처음 CSS-ED를 할 때 거의 동일한 레이아웃과 예열 스타일을 가지고 있습니다. 유일한 차이점은 이제 우리는 아이템 그리드의 상단 셀에 의사가 없다는 것입니다. 우리는 스팬이 있습니다.
기간 {
그리드 영역 : 1/ 1; / * 모든 이모티콘을 서로 쌓아 올리십시오 */
글꼴 크기 : 4EM; / * 범프 업 이모티콘 크기 */
}이모티콘 아이콘 레이어 자체의 경우, 우리는 약간 일찍 얻은 크로스 브라우저 버전에서 많은 변경을 할 필요가 없습니다.
먼저, 우리는 스팬 대신 링크 의사를 사용할 때 처음 선택한 변환 및 필터 체인을 사용합니다. 우리는 또한 색상이 필요하지 않습니다 : hsla ()는 더 이상 스팬 레이어에 대한 선언이 필요하지 않습니다. 여기에 이모티콘 만 있다는 점을 감안할 때 중요한 알파 채널 일뿐입니다. .base 및 .grey 레이어에 대해 보존 된 기본값은 1입니다. 따라서 Alpha, -a, 채널 문제만이 .midl 레이어에서 0으로 변경하는 색상 값을 설정하는 대신 색상을 직접 설정합니다. 또한 스타일 속성에서 배경 이미지를 이미 설정 했으므로 Firefox 케이스의 .midl 요소에서 배경색을 설정하면됩니다. 이로 인해 솔루션의 다음과 같은 적응이 발생합니다.
.Base { / * 모노 이모티콘 버전 * /
변환 : 번역 (.375EM, -.25EM) 회전 (22.5deg);
필터 : Sepia (1) Hue-Rotate (var (-Hue)) 포화 (3) 블러 (var (-r, 0));
}
.midl { / * 중간, 투명 이모티콘 버전 * /
색상 : 투명; / * 보이지 않습니다 */
배경 필터 : 블러 (5px);
-webkit 마스크 : 선형 그레이드 (빨간색 0) 텍스트;
@Supports (배경 : -Moz -Element (#B)) {
배경색 : #fff;
배경 클립 : 텍스트;
배경 필터 : 없음;
}
}그리고 그게 다야 - 우리는이 NAV 막대에 좋은 아이콘 유리 모르피즘 효과가 있습니다!
돌봐야 할 것이 하나 더 있습니다. 우리는 항상이 효과를 원하지 않습니다. 만 : 호버 또는 초점 상태. 따라서, 우리는 정상 상태에서 0 인 -HL, 1에 1 깃발을 사용하고, 1에서. 이것은 이전 기사에서 자세히 설명한 기술입니다.
$ t : .3S;
A {
/ * 이전과 동일 */
-HL : 0;
색상 : HSL (var (-Hue), calc (var (-hl)*100%), 65%);
전환 : 색상 $ t;
& : hover, & : focus {-hl : 1; }
}
.Base {
변환:
번역 (calc (var (-hl)*. 375em), calc (var (-hl)*-. 25em))
회전 (calc (var (-hl)*22.5deg));
불투명도 : var (-HL);
전환 : transform $ t, 불투명도 $ t;
}결과는 아이콘이 호버링되거나 집중 될 때 아래의 대화식 데모에서 볼 수 있습니다.
나는 CSS 이모티콘 버전을 작동시키는 데 필요한 결국이 질문을 당연히이 질문을했다. 평범한 SVG 방식이 스팬 샌드위치보다 더 의미가 없으며 더 간단하지 않습니까? 글쎄, 그것은 더 의미가 있지만, 특히 우리는 모든 것에 대한 이모티콘이 없기 때문에 슬프게도 코드가 작지 않으며 더 간단하지 않습니다.
그러나 우리는 다른 기사에서 그것에 대한 자세한 내용을 보게 될 것입니다!
위 내용은 CSS의 Icon Glass -Morphism 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
