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

Zoom In, Zoom Out, Slide, Rotate, Blur, Gray Scale, Sepia, Blur + Gray Scale, Opacity, Flashing, Shine, Circle 다양한 이미지 마우스 오버 효과입니다. 원하는 효과의 클래스만 적용하면 바로 사용이 가능합니다.

Three Dots는 특정 class로 3개의 점을 이용한 로딩 애니메이션을 구현할 수 있는 css입니다. 사이트에 가보시면 14종류의 로딩 애니메이션을 확인 하실 수 있으며, 각 애니메이션들은 class를 통하여 쉽게 표현 할 수 있습니다. [링크] 에서 파일을 다운받으시거나 첨부파일을 다운받아 보시면 dist폴더의 three-dots.css파일로 로딩애니메이션을 적용할 수 있습니다. 위 와 같이 div태그에 사용할 애니메이션 효과 class를 적용하여 사용하시면 됩니다. 사용할 수 있는 class 목록은 위와 같습니다.

Trendy CSS Text Shadows 는 css의 text-shadow효과를 이용한 다양한 샘플들을 정리해 놓은 사이트합니다. 간단한 그림자 효과부터 각양각색의 그림자 효과를 확인하실 수 있습니다. 또한 css코드를 확인하고 복사 할 수 있어 샘플과 동일한 효과를 쉽게 적용해보실 수 있습니다. 사이트에 있는 각 샘플 우측상단 view css를 클릭하면 사용된 css를 확인하실 수 있습니다. 샘플과 동일한 font를 사용하시고 싶으실 경우, css아래에 있는 google fonts를 클릭하시면 이미지에 사용된 폰트 페이지로 이동합니다. 복사한 css를 하나의 class에 붙여넣고 적용하고 싶은 부분에 class를 주면 샘플과 동일한 text-shadow효과를 쉽게 주실 수 있습니다.

jQuery 를 이용한 켈린더 입니다. 첨부된 압축 파일을 다운로드 하시면 demos 폴더안에 index.html 파일이 있습니다. index.html 파일은 인라인 켈린더와 드랍 켈린터 2가지 형태로 구성되어 있습니다. 사용해보니 간단하게 가져와서 쓸 수 있네요. ^^

반응형 HTML5 플레이어 입니다. ( Youtube, Vimeo 지원 ) 예전에 plyr 에 대해서 소개해 드린적이 있는데요. ( http://happycgi.com/16211 ) 그때 안내드린 개발중인 기능들이 새롭게 추가되었네요. [ 기능 안내 ] - VVT 캡션 및 화면 판독기에 대해서 완벽히 지원 합니다. - 플레이어 디자인을 다양하게 변경 가능 합니다. - 모든 크기에 반응하는 반응형 플레이어 입니다. - HTML Video + Audio 지원 합니다. - 임베디드형 Youtube, Vimeo 지원 합니다. - 동영상에 AD 기능 삽입 가능 합니다. - 스트리밍 hls.js, Shaka 및 dash.js 스트리밍 지원 합니다. - API 제공 합니다. - Vimeo, Youtube API 를 ..

SVG로 제작된 지도이미지 파일에서 마우스를 오버하거나, 클릭시 해당 지역을 하이라이팅 시켜주는 스크립트입니다. 첨부파일의 압축을 해제하고 나오는 docs/index.html 파일을 웹브라우저로 열어보면 데모를 확인하는게 가능합니다. 데모 페이지를 열면 위와 같이 몇가지 간단한 샘플데모로 이동하는 링크가 나옵니다. The simple demo 를 클릭하면, 간단한 그림이 하나 나오고 마우스를 그림위에 올려보면 위 그림과 같이 그림 위에 특정 위치가 하이라이팅이 됩니다. a map of the world 를 클릭해보면 세계지도가 표시가 되고, 각 나라에 마우스를 올려보면 지도상에 해당 나라의 영역만큼이 하이라이팅이 됩니다. 이 데모를 위한 HTML 소스코드를 열어서 보면 세계지도인 이미지파일 위에서, 한국..

코딩할 때, 여러개의 배경이미지를 중첩으로 사용해야 하는 경우가 종종 발생하게 됩니다. 이때, 기존에는 Div를 여러가지로 중첩시켜 각개의 DIV 마다 background 이미지를 설정하였었습니다. 하지만, 콤마를 활용하게 되는 경우에는 하나의 Class에 여러개의 배경이미지를 동시에 적용할 수 있습니다. .bgstyle {background:url(../img/background1.png) no-repeat, url(../img/background2.png) no-repeat;} 위와같이 기존에 익히 알고있는 배경이미지선언에서 콤마만 입력해줘도, 다중으로 사용이 가능하게 됩니다. 이로써 비교적 소스가 간편해질수 있습니다. 단. html5에서 사용가능합니다.

구글을 켠 뒤 옵션 > 도구더보기 > 확장프로그램 페이지 접속을 한 후 Chrome 웹스토어로 접속을 해주세요. 그리고 엡스토어에서 "Window resizer"키워드로 확장프로그램을 검색하신 뒤 내려받아 설치해주세요. 설치가 끝나면, 우측상단에 사이즈를 나타나는 아이콘이 추가로 생김을 확인할 수 있습니다. 이 아이콘을 누르게 되면 - 320 * 568 (iphone5) - 375 * 667 (iphone6) - 1024 * 768 (ipad) - 1440 * 900 (laptop) 등등 디바이스별 사이즈목록이 나타남을 확인할수 있습니다. 원하는 사이즈를 클릭하게 되면 창크기가 자동으로 줄어들거나 늘어나게 되면서, 각 디바이스별로 어떠한 형태로 출력되게 되는지를 미리 확인할 수 있는 장점이 있습니다. 해..

css 만으로 제작된 편집이 가능한 패턴 소스 css 를 수정하여 색상 및 크기 투명도 등 다영하게 변경이 가능합니다 응용을 하면 라인 패턴도 쉽게 css 만으로 구현이 가능합니다

폰트어썸이 5 버전으로 업데이트 되었습니다. 기존 4 버전보다 아이콘은 많아지고 사용법은 단순해졌습니다. https://fontawesome.com/start 위의 링크에 방문하여 위의 css 를 참조하고 https://fontawesome.com/icons?d=gallery 위의 링크에서 원하는 아이콘을 찾아 위와 같이 복사해서 넣어 쓰시면 됩니다.