본문 바로가기

CSS60

[Greensock] GreenSock ScrollTrigger 플러그인 Greensock에 유용한 플러그인이 있어 소개합니다. 새로운 플러그인의 요점은 페이지가 특정 위치로 스크롤 될 때와 특정 요소가 뷰포트에있을 때 애니메이션을 트리거하는 것입니다. 구성 할 수있는 모든 것은 다음과 같습니다. 수년 동안 많은 스크롤 위치 라이브러리가 있었지만 Greensock은 API와 성능을 바로 잡는 요령을 가지고 있습니다. 원하는 것은 애니메이션을 트리거하는 것이기 때문에 이제 Greensock을 사용하여 확인할 수 있습니다. 코드펜에서 바로 연결해서도 사용할 수 있습니다. See the Pen GSAP ScrollTrigger - Demo by Noel Delgado (@noeldelgado) on CodePen. See the Pen ScrollTrigger: SVG Text M.. 2021. 1. 30.
flex-wrap의 wrap과 wrap-reverse의 차이 2021. 1. 30.
아무도 말하지 않는 6가지 CSS 속성 1. all Bootstrap과 같은 CSS 프레임워크를 사용한 적이 있습니까? 그렇다면 일부 요소를 원하는대로 재정의하고 싶을 때가 있었을 것입니다. 가장 일반적인 방법은 CSS의 !important 속성을 사용하여 현재 속성을 강조하고 다른 모든 설정과 규칙을 무시하는 것입니다. .header{ color: blue !important; font-size: 14px !important; } all에는 initial, inherit, unset과 같은 3가지 속성이 포함되어있습니다. .header{ all:initial; color: blue; font-size: 14px; } 물론 ie 지원범위들을 생각하면 inherit이라던지 auto로 사용할 수 있는 속성이 있다면 그것으로 대체하는 것이 가장 좋.. 2021. 1. 30.
[CSS] 가상 스크롤바에 대하여.. 스크롤바는 웹사이트에서 몇가지의 특징을 가지고 있습니다. 첫째, 스크롤바는 사용성과 접근성의 요소입니다. 둘째, 경험의 법칙 : 영역이 스크롤되면 스크롤바가 표시되어야합니다. 하지만 웹은 큰 공간이고 저는 트릭을 좋아하기 때문에 호버링할 때만 공개하는 아이디어를 다룰 것입니다. macOS 자체도 기본적으로 스크롤바를 숨겨서 상황에 따라 상호 작용할 때 표시합니다. iOS에서도 동일하므로 혼란스러운 상황이 발생합니다. 여기에 기본적으로 스크롤바를 숨기고 요소를 가리킬 때만 표시하는 방법이 있습니다. macOS 설정에 관계없이 Chrome, Firefox 및 Safari에서 작동합니다. 트릭은 마스크가 스크롤바를 덮는다는 것입니다! 따라서 스크롤바 (여기서는 17px가 덮을 것이라고 추측하고 있습니다)와 높.. 2021. 1. 23.