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

좌측 버튼 클릭시 사이드메뉴바 출력버튼 클릭시 효과와 관련된 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." />                                          ..

화면에 꽉 차는 동영상 배경입니다.화면에 맞게 남은 부분은 짤려서 보여집니다.동영상 배경 소스입니다. 동영상 배경 위 텍스트를 정중앙에 배치하고 화면에 비례해서 폰트크기가 변경되는 소스입니다.

사각형 패턴 애니메이션 배경 소스 입니다.수직 이동과 회전하는 에니메이션 css 입니다.css 수정으로 디자인 변경을 쉽게 할 수 있습니다.

클릭하면 아이콘과 함께 하이라이트되는 탭 메뉴입니다.활용도가 높아 다양한 사이트에서 사용 가능합니다.HTML 구조                                                          Home                                                         Likes                                                         Search                                                         Profile                                                 CSS 소스 *,*::after,*::after{    padd..

마우스 오버 시 아이콘이 나타나는 디자인의 드롭다운 메뉴입니다.다양한 사이트에 적용하기에 유용합니다.  HTML 구조                                  Facebook                                                       CSS 소스@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); *,*::before,*::after {  margin: 0;  padding: 0;  box-sizing: border-box;} :root {  --bg-color: #222429;  --primary-bg-color: #333740;  --primary-color: #..