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

css만을 이용한 효과로 텍스트에 마우스를 올리면 텍스트 왼쪽에서부터 배경이 채워지고 마우스 아웃시 텍스트 왼쪽에서부터 배경이 사라집니다.

카드형태의 레이아웃이며 클릭시 숨겨진 글부분이나타나고 나머지 카드는 뒤로 멀어지는 듯한 효과가 나타나 원근감을 줍니다.

jquery 및 css를 이용한 버튼 레이어입니다. jquery만 사용하는것이 아닌 .click 및 toggleClass를 이용하여 css3와 함께 버튼을 누르면 다른 버튼의 모양이 나오는 디자인입니다. 압축파일내에 이미지 및 css파일 그리고 index.html 파일내에 jquery도 확인하실 수 있습니다.

svg 소스를 이용한 배경 소스를 쉽게 확인 할 수 있습니다. 다양한 배경소스가 있습니다. 배경스타일을 선택하면 사이트에 적용이 되어 미리 확인이 가능합니다. 사이트 우측에서 해당 배경소스의 색상,크기, 투명도를 조절할 수 있습니다. CSS 소스를 확인가능합니다. SVG 파일로도 다운도르가 가능합니다.

css 만으로 그라데이션 배경 에니메이션을 구현하기 body { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 그라데이션 색상과 ..

Css코드를 경량화 시켜주는 사이트입니다. 주석까지 다 날려버리는 ㅎㅎ 소스코드창에 작성한 css를 입력후 css압축 레벨을 선택후 compress 버튼을 누르면 작업이 시작됩니다. 완료후엔 압축률을 표기해주며 하단의 compressed javascript 부분의 소스코드를 가져와 파일로 저장하시면 됩니다^^

CSS로 구현된 카드형 정보출력 템플릿 입니다. 마우스 오버시 정보 출력 영역이 모양이 변하는 형태입니다. 사선의 각도나 에니메이션 속도등을 css로 조절이 가능합니다. 응용하여 다양한 형태로 변경이 가능합니다. css로만 제작되어 수정이 편하고 속도가 빠릅니다. 해당 사이트 또는 첨부파일을 다운로드 받아서 소스 확인이 가능합니다.

css로 제작된 반응형 탭 브라우저의 크기에 따라 탭의 디자인 간소화 됩니다. 브라우저의 크기가 900px 이상일때 브라우저의 크기가 900px 미만일때 탭의 텍스트가 사라집니다.

css 만으로 마우스 오버시 해당영역을 다이나믹하게 흔들수 있는 csshake 로 주요영역에 흔들거리는 효과를 주는데 유용합니다. css 소스만으로 버튼영역을 마우스 오버시 흔들거리는 효과를 줄 수 있습니다. 각 버튼 영역별로 흔들거리는 효과가 조금씩 차이가 있으며, 각 항목별로 각각의 css 소스를 다르게 사용합니다.

Data-Driven Documents D3.js는 데이터 기반으로 문서수정을 하기 위한 Javascript 라이브러리입니다. D3.js는 HTML, SVG, CSS를 사용해서 데이터에 활기를 부어줄수있습니다. 웹 표준상에서 D3의 주안점은 개발자가 강력한 비주얼라이제이션 컴포넌트들을 결합한 자체 프로임워크로 작업하지 않아도 최신 브라우저의 호환성을 보장하는 것입니다. 그리고 DOM 수정에 대해서 데이터 관점에서 접근합니다. D3.js 파일 다운로드 파일을 다운로드 하지않아도 링크를 통해 바로 사용이 가능합니다. [script src="http://d3js.org/d3.v3.min.js"]][/script D3는 소위 '모던 브라우저'를 지원합니다. 이 말은 일반적으로 IE8 이전 버전을 제외한 브라우저..