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

벌집모양 갤러리 디자인으로 사이트 꾸미기에 좋을거 같습니다.HTML과 CSS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML Responsive Hex Grid Image Layout ( - ) ▼▼▼▼ https://images.unsplash.com/photo-1507090960745-b32f65d3113a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" /> This is a title Some sample text about the article this hexagon leads..

클릭시 배경이 슬라이딩 됩니다.html 소스입니다.css 소스입니다.탭의 길이가 동일할때 사용하는 간단한 소스입니다.

탭메뉴 클릭시 탭배경이 애니메이션 효과로 활성화된 탭으로 이동합니다.탭메뉴의 레이어도 슬라이딩 됩니다.해당 사이트에서 전체 소스를 확인 하거나 다운로드 받으실수 있습니다.

마우스 스크롤 시 적용되는 텍스트, 이미지효과입니다.응용하여 다양한 예제를 만들 수HTML 구조  Cool cool cool            https://images.unsplash.com/photo-1496865534669-25ec2a3a0fd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80'>        Cool cool cool            https://images.unsplash.com/photo-1493552152660-f915ab47ae9d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80'>        Cool ..

linear-gradient, background-clip, text-fill-color 속성을 이용했습니다. 데모사이트나 첨부파일을 다운로드 받아서 소스를 확인 할 수 있습니다.

CSS를 활용한 3D flip 박스입니다.- CSS 3D 플립 박스. div로 콘텐츠 뒤집기 ( 전환 및 3D 변형 ). 앞면. 뒷면. 앞면. 뒷면. 앞면. 뒷면. HTML 구조CSS 3D FLIP BOXFlipping content to a div (Transitions and 3D Transforms)                                                   Front Side                                                          Back Side                                                                            Front Side            ..

css 속성인 filter를 이용해서 이미지를 블러처리하는 방법입니다. HTML 구조          Live CSS Blur    Go ahead, resize me.   CSS 소스body {  background: url("https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=")    no-repeat center center fixed;  background-size: cover;} .blur {  background: url("https://images.unsplash.com/photo-1486723312829-f32b4..

클릭하면 움직이는 아이콘과 메뉴가 나타나는 서치 효과입니다.응용하여 다양한 사이트의 메뉴로 사용할 수 있습니다.HTML 구조 Click Me!  CSS 소스html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; background: #F3F7FF; } .shape { position: absolute; width: 50px; height: 50px; transform: scale(0.8); } .cir { position: absolute; border-radius: 50%; z-index: 5; } .btn-contain { width: 200px; height: 100p..

좌측 버튼 클릭시 사이드메뉴바 출력버튼 클릭시 효과와 관련된 css 소스 일부입니다.

좋아요 버튼을 만들 때 사용하기 좋은 애니메이션 효과입니다.응용하여 다양한 예제의 버튼을 만들 수 있습니다.HTML 구조    thumb_up  Follow me on :   facebook /    https://twitter.com/gowriprasanthvm">twitter CSS 소스body{background: #333;}.like-container{filter: url('#filter');  position: absolute;   left: 50%;   top: 50%;   transform: translate(50%, -50%);}.like-cnt{    position: absolute;   cursor: pointer;  left: 50%;   top: 100%;   transform: ..