정보실

웹학교

정보실

css GIF의 덜 알려진 CSS 속성

본문

많은 개발자들이 무겁고 복잡한 JS를 요구하기 때문에 일부 효과를 구현하는 것을 두려워하지만 CSS는 간단하고 가볍습니다. 

웹 사이트에서 효과의 측면에서 다양한 웹 사이트를 만들 수 있고 미래에 새로운 트렌드를 만들 수 있기 때문에 내가 찾은 멋진 CSS 소품을 수집했습니다.


https://medium.com/@PavelLaptev/lesser-known-css-properties-in-gifs-966a143497ba 


이러한 속성 중 다수는 "새"또는 ​​"새로"와 거리가 멀지만 여전히 많은 브라우저에서 지원되지 않으며 초안으로 존재하지만 여전히 존재합니다. 그들을 보자 👻


* .Gif는 오래된 형식이라는 것을 알고 있습니다. 가능한 빨리 이 형식을 잊어야 하지만 매체와 같은 대규모 게시자가 왜 그런지 모르겠습니다. 여전히 이해하지 못하며 WebM 및 mp4와 같은 대체 형식을 사용할 수 없습니다.


1*YAzrFeTDv0yflF2SaOVkyA.gif 


element() 


이 함수를 사용하면“background”속성을 통해 모든 하위 요소가 포함 된 DOM 노드를 다른 요소로 복제 할 수 있습니다. 모든 작업은 원래 요소와 복제 요소 모두에 반영됩니다. 이 기능을 사용하면 놀라운 효과를 만들 수 있습니다.


Vincent De Oliveira의 element()에 대한 자세한 기사

http://iamvdo.me/en/blog/css-element-function


그것은 적어도 나에게는 새로운 것 같지만 실제로는 아닙니다.이 기사는 3 살이고 그 기능은 7 살입니다.


https://developer.mozilla.org/en-US/docs/Web/CSS/element


1*Cmt453_mM9c0xhNaLCZljA.png 


1*__6LyrWBW4uNHEtDnZcoOg.gif 


Conic gradients 


우리는 플래그와 Safari가 없는 Chrome에 이미 있습니다 (그러나 기술 미리보기 만).


이 속성을 사용하면 다음과 같은 멋진 것들을 만들 수 있습니다.

1*R3yEwgIjVpT-U0sLEsX8LQ.png 


1*3r0JZITO7lJM9_jS_yPpKw.gif 


Motion Path 


저에게는 다른 JS 라이브러리를 사용했기 때문에 매우 중요한 기능입니다. 

그러나 이제 JS는 재생, 일시 중지 등과 같은 애니메이션을 제어하기 위해 최소한의 수준으로 CSS 애니메이션으로 할 수 있는 다른 모든 것을 할 수 있습니다.


https://css-tricks.com/almanac/properties/o/offset-path/

https://www.w3.org/TR/2017/WD-motion-1-20170711/


1*lbgFek97lfUHDQ-CLbP2pg.png 


1*hZ4UKB9xpFnoDQSUIkA4rg.gif 


Scroll Snap 


대부분의 브라우저에서 이미 사용할 수 있는 또 다른 멋진 기능입니다. 얼마 전까지 만해도 JS 라이브러리를 사용하여 스크롤을 스냅해야 했지만 지원 및 안정적인 작업 측면에서 안전하지 않았습니다.


https://css-tricks.com/practical-css-scroll-snapping/

https://www.w3.org/TR/2018/CR-css-scroll-snap-1-20180814/


1*iCNo8UMcvFoXkzwOtbuHWA.png 


1*NJJM1gm50w8cxygWZJchyA.gif 


Counter style 


이 기능을 사용하면 카운터 (글 머리 기호) 스타일을 변경할 수 있습니다. 기호, 접미사 및 카운터 동작 알고리즘을 변경하십시오. 현재 Firefox 만이 규칙을 지원합니다.


고유 한 글 머리 기호를 만들고 싶다면 해킹 전에 :after/:before hack 를 사용할 수 있고 카운트 사용에 따라 대체 글 머리 기호 또는 글 머리 기호를 만들려면 : nth-child ()


https://www.quackit.com/css/at-rules/css_counter-style_at-rule.cfm

https://mdn.github.io/css-examples/counter-style-demo/

https://www.w3.org/TR/2017/CR-css-counter-styles-3-20171214/


1*mg8YgH-JkEKeUKT4MK9BLg.png 


1*b-9GR5oNieVk0YT3gnFIPw.gif 


CSS rhythmic styles 


책 디자이너가 이미 오랫동안 사용해온 또 다른 기능이지만 웹 디자이너는 이를 제거해야 합니다. 프런트 엔드에는 세로 리듬을 관리하는 도구가 없기 때문입니다. 이 CSS 규칙은 첫 번째 삼킬 수 있습니다. 세로 리듬으로 인해 텍스트가 더 좋아 보입니다. 우리는 이미 그리드와 열을 사용하며 리듬 스타일이 그에 더해집니다.


불행히도 이 규칙은 기본 초안과 실험 상태입니다.


https://prateekjadhwani.github.io/2017/07/13/C-S-S-Rhythmic-Sizing.html

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height-step

https://www.w3.org/TR/2017/WD-css-rhythm-1-20170302/


이 속성은 매우 드물기 때문에 canIuse에서 브라우저 호환성을 찾지 못했지만 여기서는 developer.moxilla.org에 있습니다.

1*l4xeZH5Yt75MEZkUupKFWQ.png 


1*WqSgNm4EFnkABH9vk6tnQw.gif 


Round display 


라운드 디스플레이를 감지 할 수 있는 새로운 @media 기능은 이미 예를 들어 시계와 같은 웨어러블 기기가 이 기능을 필요로 한다고 짐작했습니다.


일반적으로 이 기능은 원형 디스플레이뿐 아니라 디스플레이 모양에 관한 것입니다.


이 미디어 기능은 다른 CSS 소품과 혼합하여 라운드 표시를 위해 웹 사이트 레이아웃을 조정할 수 있습니다.

https://www.w3.org/TR/2016/WD-css-round-display-1-20161222/


불행히도 브라우저 호환성은 없습니다.이 기능은 지금까지는 초안 일 뿐입니다.





페이지 정보

조회 69회 ]  작성일19-12-18 11:49
GIF

웹학교