티스토리

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

블로그 홈

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

happycgi.tistory.com/m

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

구독자
1
방명록 방문하기
공지 해피CGI의 새로운 서비스 사이트와 ⋯ 모두보기

주요 글 목록

  • [해피CGI][cgimall] Bootstrap Button Toggle (On/Off Switch) 스위치 버튼 스위치 형태의 토글 버튼입니다.클릭시 자연스러운 애니메이션 효과가 있습니다.css를 조절하여 에니메이션 효과를 간단하게 수정할 수 있습니다.첨부파일을 다운로드 받거나 해당 사이트에서 전체 html,css 소스를 다운로드 받을수 있습니다. 공감수 0 댓글수 0 2025. 5. 9.
  • [해피CGI][cgimall] Responsive Hex Grid Image Layout 벌집모양 갤러리 디자인으로 사이트 꾸미기에 좋을거 같습니다.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.. 공감수 0 댓글수 0 2025. 4. 23.
  • [해피CGI][cgimall] Tab Sliding Animation 슬라이딩 애니메이션 탭메뉴 클릭시 배경이 슬라이딩 됩니다.html 소스입니다.css 소스입니다.탭의 길이가 동일할때 사용하는 간단한 소스입니다. 공감수 0 댓글수 0 2025. 4. 16.
  • [해피CGI][cgimall] CSS Only Animated Tabs 애니메이션 탭메뉴 탭메뉴 클릭시 탭배경이 애니메이션 효과로 활성화된 탭으로 이동합니다.탭메뉴의 레이어도 슬라이딩 됩니다.해당 사이트에서 전체 소스를 확인 하거나 다운로드 받으실수 있습니다. 공감수 0 댓글수 0 2025. 4. 15.
  • [해피CGI][cgimall] 스무스 텍스트 및 이미지 효과 Image Reveal animation on scroll without dependancies 마우스 스크롤 시 적용되는 텍스트, 이미지효과입니다.응용하여 다양한 예제를 만들 수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 .. 공감수 0 댓글수 0 2025. 4. 2.
  • [해피CGI][cgimall] Animated CSS Gradient Text 텍스트 애니메이션 linear-gradient, background-clip, text-fill-color 속성을 이용했습니다. 데모사이트나 첨부파일을 다운로드 받아서 소스를 확인 할 수 있습니다. 공감수 0 댓글수 0 2025. 3. 5.
  • [해피CGI][cgimall] CSS 3D Flip Box-CSS를 활용한 3D flip 박스 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            .. 공감수 0 댓글수 0 2025. 2. 19.
  • [해피CGI][cgimall] Live CSS Blur 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.. 공감수 0 댓글수 0 2025. 2. 18.
  • [해피CGI][cgimall] 클릭 버튼 효과 Particle Button 클릭하면 움직이는 아이콘과 메뉴가 나타나는 서치 효과입니다.응용하여 다양한 사이트의 메뉴로 사용할 수 있습니다.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.. 공감수 0 댓글수 0 2025. 2. 17.
  • [해피CGI][cgimall] PURE CSS SIDEBAR TOGGLE MENU 사이드바 메뉴 좌측 버튼 클릭시 사이드메뉴바 출력버튼 클릭시 효과와 관련된 css 소스 일부입니다. 공감수 0 댓글수 0 2024. 12. 19.
  • [해피CGI][cgimall] 좋아요 버튼 애니메이션 Interactive splat like button 좋아요 버튼을 만들 때 사용하기 좋은 애니메이션 효과입니다.응용하여 다양한 예제의 버튼을 만들 수 있습니다.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: .. 공감수 0 댓글수 0 2024. 12. 6.
  • [해피CGI][cgimall] 선택 메뉴를 따라다니는 드롭다운 메뉴 Pure CSS Select Box With Direction Aware Hover Effect 메뉴를 선택하면 선택된 상태로 따라다니는 드롭다운 메뉴입니다.활용도가 높아 다양한 사이트에서 사용 가능합니다.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                         .. 공감수 0 댓글수 0 2024. 12. 5.
  • [해피CGI][cgimall] CSS 만으로 구성된 Three Dots Spinner 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 처리는 간단한 스크립트를 활용하여 처리하시면 됩니다. 공감수 0 댓글수 0 2024. 11. 7.
  • [해피CGI][cgimall] Animated Navigation List Javascript 없이 네이게이션 애니메이션 효과를 간단히 구현 할 수 있습니다. 애니메이션 출력부터 호버까지 구현됩니다.HTML 구조            Alvaro's Social Media                              Website                                    LinkedIn                                    Mastodon                                    Twitter                                    YouTube                                    CodePen                                   .. 공감수 0 댓글수 0 2024. 10. 22.
  • [해피CGI][cgimall] Cards with inverted border-radius #scss 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." />                                          .. 공감수 0 댓글수 0 2024. 10. 21.
  • [해피CGI][cgimall] Fullscreen Background Video with Mix-Blend-Mode Overlay Text 화면에 꽉차는 동영상 배경 화면에 꽉 차는 동영상 배경입니다.화면에 맞게 남은 부분은 짤려서 보여집니다.동영상 배경 소스입니다. 동영상 배경 위 텍스트를 정중앙에 배치하고 화면에 비례해서 폰트크기가 변경되는 소스입니다. 공감수 0 댓글수 0 2024. 10. 18.
  • [해피CGI][cgimall] Pure Css Animated Background 배경 애니메이션 css 사각형 패턴 애니메이션 배경 소스 입니다.수직 이동과 회전하는 에니메이션 css 입니다.css 수정으로 디자인 변경을 쉽게 할 수 있습니다. 공감수 0 댓글수 0 2024. 10. 17.
  • [해피CGI][cgimall] 깔끔한 모바일 탭 메뉴 Tab Menu 클릭하면 아이콘과 함께 하이라이트되는 탭 메뉴입니다.활용도가 높아 다양한 사이트에서 사용 가능합니다.HTML 구조                                                          Home                                                         Likes                                                         Search                                                         Profile                                                 CSS 소스 *,*::after,*::after{    padd.. 공감수 0 댓글수 0 2024. 10. 16.
  • [해피CGI][cgimall] UX 및 디자인이 좋은 드롭다운 메뉴 Dropdown Menu 마우스 오버 시 아이콘이 나타나는 디자인의 드롭다운 메뉴입니다.다양한 사이트에 적용하기에 유용합니다.  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: #.. 공감수 0 댓글수 0 2024. 10. 15.
  • [해피CGI][cgimall] 로고를 이용한 이미지 슬라이드 Logo Carousel Blur 로고를 이용한 이미지 슬라이드 Carousel입니다.로고를 변경하여 다양하게 응용 가능한 슬라이드 효과입니다.HTML 구조          CSS 소스body {  background: black;  margin: 0;  min-height: 100vh;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;} @keyframes moveBg {  from { background-position: 0 50%; }  to { background-position:  -1134px 50%; }} .carousel {  --blur: 6px;  --contrast: 105%;  --speed: 13s;  he.. 공감수 0 댓글수 0 2024. 9. 10.
  • [해피CGI][cgimall] GSAP를 이용한 이미지 슬라이드 eCommerce Slide Effect -> GSAP & JS GSAP를 이용한 이미지 슬라이드입니다.활용도가 높아 다양한 사이트에서 사용 가능합니다.HTML 구조 arrow drop CodePen cart caret LikeNuShus man & woman   ...  CSS 소스 *,*::after,*::before { box-sizing: border-box;} html { background: #fff;} body { --color-text: #000; --color-bg: #fff; --color-link: #000; --color-link-hover: #858585; --color-nav-bg: #fff; --color-nav-hover: #858585; --color-cart-bg: #000; --co.. 공감수 0 댓글수 0 2024. 9. 5.
  • [해피CGI][cgimall] Fancy Glowing Button CSS로만 작동하는 애니메이션 버튼입니다.버튼 하단 라인에 네온의 무지개색 라인으로 애니메이션이 작동하며마우스 오버시 색변화가 빠르게 진행됩니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다. 공감수 0 댓글수 0 2024. 8. 27.
  • [해피CGI][cgimall] 3D wave animation 나열된 이미지에 물결 애니메이션 효과가 추가된 디자인입니다.마우스 클릭시 해당 이미지가 확대되고 마우스 아웃되면 원래대로 돌아오게 됩니다. 공감수 0 댓글수 0 2024. 8. 26.
  • [해피CGI][cgimall] Jelly Effect in Card on hover 카드형태의 로우즈에 호버시 젤리효과 카드에 마우스 오버시 sns 링크와 정보 영역이 젤리효과 에니메이션과 함께 출력됩니다.svg 를 이용하여 곡선을 만듭니다.css 로 에니메이션 효과를 구현합니다.cubic-bezier 을 이용하여 곡선을 제어합니다. 공감수 0 댓글수 0 2024. 8. 13.
  • [해피CGI][cgimall] Tapered Glow Progress Bar 막대의 끝이 빛나는 진행바 진행바의 끝 부분이 빛나는 효과가 있습니다.배경이 어두운 영역에 사용하기에 좋습니다.css 로 제작되어 커스터마이징이 용이합니다. css 로 구현되어 있습니다.로딩시 진행바가 이동하는 에니메이션이 존재합니다. 공감수 0 댓글수 0 2024. 8. 12.
  • [해피CGI][cgimall] 텍스트 입력시 버튼이 나오는 효과 HTML 구조  CSS 소스//Vars :root {  --rad: .7rem;  --dur: .3s;  --color-dark: #2f2f2f;  --color-light: #fff;  --color-brand: #57bd84;  --font-fam: 'Lato', sans-serif;  --height: 5rem;  --btn-width: 6rem;  --bez: cubic-bezier(0, 0, 0.43, 1.49);} // Setupbody {background: var(--color-dark); display: flex; align-items: center; justify-content: center; min-height: 100vh }html { box-sizing: border-box; he.. 공감수 0 댓글수 0 2024. 8. 9.
  • [해피CGI][cgimall] animated vertical tabs-세로 애니메이션 탭 효과 HTML 구조                    class="absolute h-10 w-full bg-white rounded-lg shadow ease-out transition-transform transition-medium"        :style="{ transform: `translateY(calc(100% * ${selected}))` }"      >                                    type="button"            @click="select(0)"            :aria-selected="selected === 0"            class="py-2 px-3 w-full flex items-center focus:outline-n.. 공감수 0 댓글수 0 2024. 8. 8.
  • [해피CGI][cgimall] Touch device jelly menu concept 스크롤을 하면 버튼 이미지가 젤리처럼 움직이게 되는 디자인 입니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다.HTML                                                                                                                                                                                                                                               CSS  * {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: bord.. 공감수 0 댓글수 0 2024. 7. 23.
  • [해피CGI][cgimall] Tab Controls with CSS : has() 선택자를 이용한 탭메뉴 클릭시 에니메이션 효과와 함께 탭메뉴가 변경됩니다.라디오 버튼을 이용한 탭메뉴 소스입니다.라디오 버튼과 has() 선택자를 이용한 에니메이션 탭 효과입니다.첨부된 파일을 다운로드 하거나 데모 사이트에서 전체 소스를 확인 할 수 있습니다. 공감수 0 댓글수 0 2024. 7. 4.
  • [해피CGI][cgimall] Radios With Sliding Focus 라디오 버튼 슬라이딩 포커스 선택시 라디오버튼 뿐만 아니라 포커스 되는 디자인이 시간차 에니메이션으로 효과가 적용됩니다.관련 에니메이션 소스입니다.css로 구현되어 있습니다. 공감수 0 댓글수 0 2024. 7. 3.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.