웹솔루션개발 25년 노하우! 해피CGI의 모든것

해당 아이콘을 클릭하면 에니메이션 효과와 함께 위와 같이 변경됩니다. 이미지가 아닌 소스형태라서 css로 쉽게 변경이 가능합니다. css hover 효과 클릭시 css js

스크롤시 별다른 스크립트없이 css만으로 최상단으로 이동이되는 효과입니다. scroll-snap-type와 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type scroll-snap-align을 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align 이용하여 스냅을 이용하여 스크롤시 지정한 포인트로 바로 이동할 수 있습니다. 아래의 링크에서 예제를 확인하실 수 있습니다. https://codepen.io/serranoarevalo/pen/xxdYBxZ 네이버 또는 구글에서 Css Scrollsnap으로 검색해보시면 다양한 자료를 확인하실 수 있습니다 ^^

클릭시 아래처럼 선택된 카드가 확장됩니다. css로 쉽게 가로사이즈 변경이 가능합니다. 마우스 드래그 또는 클릭으로 슽라이드 이동이 가능합니다.

CSS로만 이루어진 셀렉트 박스입니다. 자료는 해당 데모사이트에서 하단의 export 버튼을 눌러 다운 받으실 수 있습니다. 사용자 데모도 https://codepen.io/aron-tw/pen/MeMKON 에서 확인하실 수 있습니다^^

아래와 같이 에니메이션 효과가 있습니다. css로 구현이 되어 있어 디자인 변경이 용이 합니다. 년도 텍스트 및 수평바 그래프 에니메이션 효과도 css로 쉽게 수정이 가능합니다.

아래와 같이 에니메이션 효과가 있습니다. css와 svg로 구현되어 있어 쉽게 크기 및 디자인 수정이 가능합니다. 에니메이션 효과도 css를 이용하여 변경이 가능합니다. 해당사이트 또는 첨부파일을 다운로드 받아 소스를 확인할 수 있습니다.

햄버거 메뉴 클릭시 아이콘이 병경됩니다. 햄버거 메뉴 클릭시 전체메뉴 영역이 에니메이션 효과와 함께 오픈됩니다. 자세한 소스확인은 첨부파일 다운로드 또는 해당 사이트에서 확인이 가능합니다.

세로 스크롤 형태의 테이블입니다. 상단의 타이틀이 고정된채로 내용을 보여주는 형식입니다. 데모 사이트로 이동하신 후 하단의 export버튼을 눌러 자료를 다운 받으실 수 있습니다.^^

CSS 로 이런 패턴도 생성 가능한지는 이 사이트를 방문하고 처음 알았습니다. 여러 수학적 계산식을 CSS 에서 사용할수도 있네요. 여러 샘플의 코드를 참고하여 패턴을 만들어 보는것도 좋을것 같습니다.

브라우저에서 다양한 모양의 CSS 그라디언트를 만들 수 있습니다. 원하는 모양을 만든 후 위의 Get CSS 누르면 코드를 복사 할수 있습니다.