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

css를 이용한 사각형태의 정형화된 마우스 오버효과가 아닌 다른 느낌의 마우스 오버효과 css를 이용하여, 대각선의 hover 효과를 만들어주며, 마우스 오버시 위아래로 효과가 적용됩니다. 새로운 마우스 오버 효과로 사이트에 포인트를 줄 수 있네요. ​ ​ ​ ​

간단한 css소스만으로 위 이미지처럼 로딩 애니메이션을 연출할 수 있습니다. ^^ ​ ​ ​

위 영역에 마우스를 오버할 경우 부드럽게 좌우로 움직이는 animation 효과입니다. 소스상에서 @keyframes slide { 0% { left: 0; top: 0; } 50% { left: 30px; top: 0px; } 100% { left: 0; top: 0; } 위 keyframes 영역은 위 녹색 구영역의 움직임을 주기 위한 영역입니다. 0% 는 첫번째 위치, 50% 는 두번째 위치할 부분, 100% 는 되돌아올 위치를 말합니다. (되돌아올 위치를 100px 로 적용하면 한번더 좌측으로 이동되므로 되돌아올 위치가 아닌 다음번 이동될 위치입니다.) slide 라는 부분은 animation-name 으로 적용할 네이밍으로 아래 추가 설명으로 안내드리겠습니다. 본 소스에서는 라는 형태의 구조이며..

사이트 주소를 입력하면 해당 사이트에 대한 다양한 CSS 통계를 확인할수 있습니다. 궁금한 사이트를 입력해보시고, 해당 사이트에 대한 다양한 통계를 확인해 보세요. ​ ​ ​

candy cane이란 위 이미지의 지팡이 모양 사탕을 말하는 것입니다. 지팡이사탕의 사선 무늬를 텍스트에 입혀 사선이 움직이는 귀여운 효과를 css만으로 만들어 볼 수 있습니다. 홈페이지 또는 첨부파일을 받아보시면 자세한 소스를 확인하실 수 있습니다. 스타일 소스 중 --color1: #000; --color2: #2e8ff8; 위 컬러값을 변경하면 색상이 변경됩니다. keyframes 소스로 움직이는 효과를 주고 있으며 keyframes은 익스플로어에서 지원하지 않고 있어 크롬, 파이어폭스 등 지원하는 브라우저로 효과를 확인 하실 수 있습니다.

위의 테이블은 css로 반응형 스타일을 주어 작은 화면에서 아래의 이미지와 같이 한줄의 내용이 모두 합쳐져 하나로 출력됩니다. 사이트 또는 첨부파일을 받아보시면 자세한 소스를 확인하실 수 있습니다. 아래의 미디어 쿼리 소스로 700px 이하의 너비에서 내용이 합쳐지도록 조절되며 html 소스는 크게 2부분으로 구성되어 있습니다. 1) 표 타이틀(table head) 2) 표 내용 부분 화면의 너비에 따라 출력되는 타이틀이 다르기 때문에 표 타이틀이 내용부분에서도 반복되는 것을 볼 수 있습니다. 해당 부분을 참고 하셔서 본 반응형 테이블 소스를 유용하게 사용해보세요.

Css로만 이루어진 모달 팝업창입니다 크롬 및 최신버전의 ie버전에서는 정상작동을 하지만 하위버전의 ie브라우저라면 정상작동을 하지 않을 수 있습니다. 압축파일내에 index.html 파일과 style.css 파일이 있으며 호출하여 바로 확인하실 수 있습니다.

텍스트 그림자에 대해서 간단한 설정으로 각도, 거리, 흐릿함, 색상, 투명도를 조절하여 css를 생성해주는 사이트입니다. 마우스조작만으로 원하는 그림자를 설정할 수 있고 간단하게 소스를 복사할 수 있어서 매우 편리하네요. ^^ ​ ​ ​

css로 다양한 효과를 준 여러가지 on/off 스위치 스타일을 확인해보세요. 본 사이트에서는 스크립트 소스없이 css만을 이용하여 다양한 효과를 준 on/off 스위치를 볼 수 있습니다. 현재 총 18가지의 스타일이 있으며, 사이트 상단에서 사용된 html, css소스를 확인하실 수 있습니다. ​ ​각 버튼 html 소스는 위와 같이 구성되어 있고, id값 button-1 ~ button-18 로 구분되고 있습니다. 확인을 원하시는 스타일의 id값으로 css소스를 검색해보시면 사용된 css를 쉽게 찾아보실 수 있사오니 소스 확인하시고 on/off 스위치에 다양한 효과를 적용해보세요 ^^ ​ ​ ​

JavaScript 를 사용하지 않습니다. 순수 CSS 만으로 사이클 애니메이션 기능을 만드는 방법 입니다. 테스트 한 브라우저는 Chrome, IE 11, IE Edge 입니다. 압축 파일에 보시면 test.html 코드를 참고하시면 조금 더 쉽습니다. 1. 먼저 css 를 선언하세요. 2. 컨텐츠를 구성하세요. 3. 결과물을 확인하세요. 퍼센트의 배경 크기를 설정하려면? CSS의 rotate 값을 변경하세요. 100% 해당 하는 값으로 90이 셋팅되어 있는데요. 90을 다른값으로 변경해 보세요. 애니메이션 타임을 변경하고 싶다면? CSS의 animation: fill ease-in-out 1s; 값을 수정하세요. 1s 는 1초를 뜻합니다. 해당 자료의 출처는 https://codeconvey.com/..