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

이미지에 마우스 오버시 돋보기 아이콘과 함께 이미지가 에니메이팅 효과로 줌인되어 심플하지만 주목될수있는 퍼포먼스를 보여주는 Jquery lightgallery 로 사이트의 주목할만한 컨텐츠를 제작하는데 도움이 됩니다. 특정 이미지에 마우스 오버시 에니메이션 효과로 줌인되어 심플한 UI 로 주목성을 줄수 있는 lightgallery 는 핵심이되는 .demo-gallery css 소스를 이용하여 해당 이미지 영역에 반영할 경우 위와같이 줌인되는 이미지를 확인할 수 있습니다. 핵심이 되는 위 css 소스와함께 jquery.min.js (ver 1.11.2) 를 이용하여 위와같은 class 와 script 소스를 정해주시면 작동되게 됩니다.

FancyBox 소개 - FancyBox는 웹 페이지의 이미지, HTML 콘텐츠 및 멀티미디어를 별도 박스에 표시하는 도구입니다. 라이센스 - MIT, GPL License FancyBox 기능 - 이미지, HTML요소, SWF, 아이프레임, Ajax 요청 - 설정 및 CSS를 통한 사용자 정의 - 마우스 휠 플러그인이 페이지에 포함된 경우 FancyBox뿐만 아니라 마우스 휠 이벤트에 응답 - 확대된 항목 아래 그림자 추가 설치방법 - 첨부된 zip 파일을 압축을 풀고 웹루트 디렉터리에 업로드 한 다음 웹브라우저로 실행하면 다음과 같은 샘플화면을 볼 수 있습니다 작은이미지들이 많거나 갤러리 형태의 웹페이지에 적용하면 꽤 괜찮은 효과를 볼 수 있을거 같네요

* jquery tiltShift.js 는 사진에 흐림,포커스 효과를 줄 수 있는 jquery plugin 입니다 * 라이센스 - GNU GPL License * 기능 - 초점 설정 - 흐림 반경에 대한 설정 - 초점영역의 양, 이미지의 날카로움 설정 - 완전한 초점과 완전한 흐림 사이의 영역의 양 설정 - 방향에 대한 설정 - 크롬 및 사파리6 CSS3 필터를 광범위하게 지원되지 않음 * 사용방법 첨부된 파일을 다운로드 하여 압축을 풀고 아래와 같은 코드를 작성한후 응용하여 원하는 형태로 작업합니다 (index.html 을 확인하시면 샘플예제가 있음) - 상단 css, js 선언부 * 아래는 이미지 호출과 함께 옵션을 설정한 부분입니다 -position : 초점의 점을 설정합니다 -blur : 흐림반경..

홈페이지 등 다양하게 사용할 Icon, Buttons, Templates, Backgrounds 등의 Free PSD 자료가 많습니다.

한개의 배경이미지로 브라우저 화면의 크기에 맞게 꽉차서 출력이 되는 css 입니다. html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 하나의 배경이미지를 브라우저 전체화면에 꽉채우고자 할때 사용. 배경이미지의 중앙이 브라우저의 중앙에 출력합니다. 배경이미지는 큰이미지가 필요합니다. 배경 이미지의 가로, 세로 길이 모두 엘리먼트보다 크다라는 조건하에 가능한한 배경 이미지를 작게 조정합니다 가로/세로 비율은 유지됩니다. 사파리, 크롬,..

CSS 코드로만 이루어진 hover 효과로 특정 이미지의 좌표값을 대입하여 아래와 같은 조건의 CSS 소스를 반영하시면 이미지 효과를 만들어 낼 수 있습니다. Jquery 가 아닌 CSS 만으로 두개의 분리된 이미지를 표현하고 해당 영역내에 특정단어를 만들어내는 조합을 만들수 있습니다. 위 작업을 수핸하는 워크 flow 를 아래와 같이 하셔야 합니다. 높이 300px 에 비해 넓은 300px 의 이미지를 만듭니다. 오른쪽 중간에 걸쳐 이미지를 잘라 다른 레이어에 있는 두개의 반쪽을 배치합니다. 이동할 캔버스 (hover시) 크기를 300px 정도 증가시킵니다. 캔버스 상단에 있는 사잔의 하단을 놓습니다. 위와같은 효과로 대입할 경우 아래와 같은 효과를 가진 소스를 확인하실 수 있습니다.

이미지에서 즉시 컬러를 추출해 팔레트를 생성해주는 사이트입니다. 원하는 이미지의 URL주소를 입력하고 버튼을 눌러줍니다. 버튼을 누르면 원본 사진과 사진을 바탕으로 가장 유사한 10가지 색이 색상코드와 함께 출력되어 디자인 작업시 색상조합에 큰 도움을 줄 수 있을 거 같습니다. 위 기능을 활용하면 무엇보다 분위기에 맞는 컬러배색을 사용할 수 있겠죠?

웹페이지에서 원하는 버튼모양을 선택하여, CSS를 바로바로 만들 수 있는 홈페이지입니다. 또한 한글로 되어 있어.. 더욱 편리합니다. - 원하는 버튼의 모양을 클릭하고 색상, 글자체, 굵기, 그림자 등등을 간편하게 클릭으로 선택할 수 있습니다. - 글자가로 위치, 세로위치, 그림자 퍼짐정도, 테두리 등을 선택할 수 있습니다. - 원하는 버튼 선택이 끝나면. CSS 소스를 복사할 수 있습니다. - 맨하단에는 기본 버튼 디자인외 다양한 디자인의 버튼을 선택하고 이용할 수 있습니다. 참고로 해당 홈페이지는 크롬에서 정상작동을 하니.. 크롬으로 확인해보세요... 이미지제작없이 CSS로 다양한 버튼을 만들수 있어.. 아주 효율적이네요.. 이용해보세요.

위와 같이 이미지를 끌어 던지면 이미지 편집창이 뜨는 플러그인 입니다. 위와 같이 편집창이 뜨고 편집 후 에디터 안으로 들어가게 됩니다. 이미지 편집이 잦으신 분께 참 좋은 플러그인 같습니다. 좋은 만큼 유료 플러그인이며 http://www.uritec.es/portal/seccion.aspx?N=58 비용은 위에 안내가 되어있습니다.

서버이전 후 또는 재설치 후에 간혹 이미지가 출력되지 않는 증상이 있습니다. 이는 이미지가 업로드 되는 경로가 잘못 설정이 되었거나 업로드 되는 폴더에 PHP를 실행하지 못하도록 적용된 파일이 서버에서 접속 권한을 막고 있어 발생하는 증상입니다. 경로가 잘 못된 경우에는 아래 FAQ를 참고하셔서 환경설정을 다시 해보시면 되시며... http://cgimall.co.kr/happy_faq/board_detail.cgi?db=board_faq&thread=153 설정된 경로가 올바른 경우에도 이미지가 보이지 않으신다면 저장되는 경로에 저장된 파일이 확인해보시기 바랍니다. 파일이름은 .htaccess 이며 해당 파일을 열어보시면 php_value engine 0 소스가 있을 것입니다. 서버에 따라서 다르기는 ..