놀라운 기능의 새로운 속성들이 추가되고 있지만 브라우저 지원은 확인해 봐야 합니다.

1. Box-decoration-break

이 CSS 속성은 여러 줄, 열 또는 페이지에서 여러 요소가 나뉘어 질 때 요소의 단편을 렌더링하는 방법을 지정합니다.

https://codepen.io/ananyaneogi/pen/GeRoRO 

2. attr()

attr()을 사용하여 CSS에서 선택된 요소의 값을 검색 할 수 있습니다. 이 방법은 접근성 목적에 도움이 될 수 있습니다.

https://codepen.io/ananyaneogi/pen/gEpeda 

3. backface-visibility

이 CSS 속성은 사용자 방향으로 돌릴 때 요소의 뒷면이 보이는지 여부를 설정합니다. 카드 뒤집기 UI를 생각하십니까?

https://codepen.io/ananyaneogi/pen/Ezmyeb 

4. conic-gradient

그라디언트는 멋진 것입니다. 

선형 그래디언트로 배경을 스타일링 한 적이 있지만 원뿔형 그라디언트를 사용하여 순수한 CSS를 사용하여 원형 차트를 만들 수 있다는 것을 알고 계십니까?

https://codepen.io/ananyaneogi/pen/mYmrMJ 

5. filter

CSS 필터가있을 때 포토샵 필터 효과가 필요한 사용자. 필터 기능은 입력 이미지의 모양에 그래픽 변경 사항을 적용합니다.

blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow 등 우리가 얻을 수 있는 효과는 다음과 같습니다.

https://codepen.io/ananyaneogi/pen/YbVpyG 

드롭 섀도우 필터는 입력 이미지에 그림자를 적용 할 수 있습니다.

https://codepen.io/ananyaneogi/pen/PvmbeR 

6. mix-blend-mode

이 CSS 속성은 요소의 내용이 요소의 배경 또는 부모의 내용과 어떻게 혼합되어야 하는지를 설정합니다.

https://codepen.io/ananyaneogi/pen/rgwNLx 

7. first-letter

first-letter 가상 요소로 드롭을 만들 수 있습니다.

https://codepen.io/ananyaneogi/pen/oRWBBE 

8. shape-outside

이 CSS 속성은 간단한 직사각형 상자가 아닌 복잡한 객체를 중심으로 인접한 인라인 컨텐츠를 배치하도록 사용자 정의하는 방법을 제공합니다.

https://codepen.io/ananyaneogi/pen/ZNKepv 

9. writing-mode

이 CSS 속성은 텍스트 줄이 가로 또는 세로로 배치되는지 여부를 설정합니다. 

우리는 다음 값을 가질 수 있습니다.

• horizontal-tb - 내용은 왼쪽에서 오른쪽으로 수평으로 흐르고 위쪽에서 아래쪽으로 수직으로 흐릅니다.
• vertical-lr - 내용은 왼쪽에서 오른쪽으로 수평으로 흐르고 수직으로 위쪽에서 아래쪽으로 흐릅니다.
• vertical-rl - 내용이 오른쪽에서 왼쪽으로 가로로, 세로로 위에서 아래로 흐릅니다.

https://ananyaneogi.github.io/css-experiments/quote.html 

10. Adding gradient to text

이것은 -webkit-background-clip : text 및 -webkit-text-fill-color : 투명한 CSS 속성의 조합으로 이루어집니다.

https://codepen.io/ananyaneogi/pen/pmPPpY 

11. Smooth scroll snap

scroll-snap-type CSS 속성은 스크롤 지점에 스냅 점이 적용되는 방식을 설정합니다.

https://codepen.io/ananyaneogi/pen/mYmodx