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

css3를 이용하여 페이퍼 형식의 디자인 버튼을 손쉽게 만들수있습니다. 페이지로 이동했을때 하단에 보시면 버튼별로 미리보기가 가능하며, 왼쪽화면에서는 HTML을 오른쪽 화면에서 CSS를 확인할 수 있습니다. 버튼의 관한 예시는 스크롤을 내리면 더 많이 확인할 수 있습니다.

JQuery 를 이용하여 이미지에 3D 효과를 줄 수 있습니다. 소스코드도 간단하여 사용이 편리 합니다. HTML There is a minimal markup required, the element container and element that will be transformed into 3d card CSS There is no special CSS file to be included, you can write your own CSS and playing with transform on child elements. However there is helper class that will be added when hovering in and out. /* This class can be replaced..

ckeditor 플러그인 Page2Images 입니다. 웹사이트의 이미지를 바로 캡쳐해서 이미지 수정후 위지윅상에 바로 등록이 가능한 플러그인입니다. 설치는 압축을 해제하시고 웹서버에서 바로 실행해보시면 됩니다. 참고사항) ckeditor/config.js 파일에서 아래와 같이 플러그인이 추가가 되었습니다. config.extraPlugins = 'page2images'; 플러그인 폴더는 ckeditor/plugins/page2images 입니다. 아래의 아이콘을 클릭하면 캡쳐 URL을 입력하는 창이 오픈됩니다. 원하시는 캡쳐 URL을 입력하시고 GO버튼을 누르시면 아래와 같이 캡쳐된 이미지가 위지윅 본문에 추가가 됩니다.

제이쿼리와 css 를 이용한 풀스크린 책장 넘기는 효과입니다. 버튼을 클릭해서 페이지를 이동 할 수 있습니다. 좌측메뉴에 네이게이션으로 해당 페이지로 이동합니다. 해당 사이트에서 소스에 대한 설명과 다운로드를 받으실수 있습니다.

크로스 브라우징 작업시 IE 버전에 따른 조건부 주석처리를 해야 할 경우가 종종 생깁니다. 그때 유용한 기능으로 아래의 내용을 보고 조건부별로 진행해보세요. Html 조건부 사용되는 기호 :! : 아니다(not) - 예) [if !ie] ie가 아니라면lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다() : 우선처리& : 그리고(and) - 예) [if (..

css3을 이용하여 이미지에 호버이펙트를 다양하게 사용할 수 있습니다. 마우스올렸을때 제각각 다른 효과를 미리보기로 확인할 수 있습니다. 기본구조 Nice Lily Lily likes to play with crayons and pencils View more 사용 css3 figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; transform: translate3d(0,50%,..

다양한 디자인의 버튼을 CSS로 만드는 css3button HTML5,CSS3로 배경색상, 테두리, 그림자효과등을 손쉽게 선택하고 CSS 코드를 생성하는 사이트입니다. 위 그림과 같이 배경색상, 테두리, 바깥그림자, 안쪽 그림자, 폰트크기, 폰트그림자 효과등 다양한 설정을 클릭으로 가능합니다. 설정한 버튼 스타일시트는 위와 같이 출력되며, 해당 코드를 복사 , 붙여넣기만 하면 끝... 이미지편집을 하지 않아도 이쁜버튼을 손쉽게 만들수 있어요.. 참고로 크롬브라우저에서 접속해야 사이트 이용이 원활합니다..

크로스 브라우징 작업시 IE 버전에 따른 조건부 주석처리를 해야 할 경우가 종종 생깁니다. 그때 유용한 기능으로 아래의 내용을 보고 조건부별로 진행해보세요. Html 조건부 사용되는 기호 :! : 아니다(not) - 예) [if !ie] ie가 아니라면lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다() : 우선처리& : 그리고(and) - 예) [if (..

CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에 그림자를 부여하는 text-shadow가 있습니다. 글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나 박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다. CSS 결과 위와 같은 방법으로 텍스트를 디자인할 수 있습니다. 그외에도 방향과 값에 따라서 다양한 디자인 효과를 연출해낼 수 있습니다. CSS 결과 그 외 더욱 다양한 효과를 보고싶다면 아래의 링크로 활용해보시기 바랍니다. 더욱 다양한 효과 활용하기