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

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: ..

메뉴를 선택하면 선택된 상태로 따라다니는 드롭다운 메뉴입니다.활용도가 높아 다양한 사이트에서 사용 가능합니다.HTML 구조  Observe the platform icon's motion direction when there is up and down  hover on options.               Select a platform                                                        CodePen      CodePen                                Dribbble      Dribbble                                Behance      Behance                         ..

Three Dots 는 3개의 점으로 구성된 20개의 멋진 애니메이션 Loading Spinners 입니다.코드는 CSS/CSS3 로만 구성되어 있습니다. 샘플코드 경로 three-dots-master > three-dots-master > docs 입니다.docs 에 보면 index.html 이 있습니다. index.html 파일을 통해 아래와 같은 Spinner 를 확인할 수 있습니다. 구조는 생각보다 심플 합니다. dot-carousel spinner 를 사용하고 싶다면?HTML 코드와 CSS 만 가져가서 사용하시면 됩니다.위처럼 사용하시면 아래처럼 spinner 가 출력 됩니다. 물론 spinner display 처리는 간단한 스크립트를 활용하여 처리하시면 됩니다.

Javascript 없이 네이게이션 애니메이션 효과를 간단히 구현 할 수 있습니다. 애니메이션 출력부터 호버까지 구현됩니다.HTML 구조            Alvaro's Social Media                              Website                                    LinkedIn                                    Mastodon                                    Twitter                                    YouTube                                    CodePen                                   ..

Javascript 없이 html + CSS로 이루어져 있는 간단 Inverted border-radius Cards를 만들 수 있는 소스입니다.  HTML 구조   leading companieshave trusted us                                          https://images.unsplash.com/photo-1601049676869-702ea24cfd58?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Trust & Co." />                                          ..