온라인에는 무궁무진한 자료들이 있지만, 질 좋은 자료를 찾는 것이 진정한 도전입니다 . 하지만 약간의 검색과 유용한 디자인 웹사이트 목록만 있다면 훨씬 쉬워집니다. HTML과 CSS 같은 언어들이 활발하게 사용되는 요즘, 고품질의 무료 자료들을 단 몇 번의 클릭만으로 이용할 수 있습니다.
블로그, 비즈니스, 전자상거래 사이트 등 다양한 분야에 활용하기 좋은 무료 HTML 및 CSS 카드 모음을 소개합니다 . 모든 유형의 클라이언트 프로젝트에 활용할 수 있는 포괄적인 컬렉션입니다. 코드펜(codepen.io)에서 가져온 HTML 및 CSS 코드를 모두 확인할 수 있으니, 지금부터 함께 살펴보겠습니다.
블로그 카드 재미 # 1
이미지만으로도 충분히 설명이 되는 아름다운 디자인의 카드입니다 . codepen.io에서 해당 코드를 다운로드하여 웹사이트에 설치할 수 있습니다.
CSS 뉴스 카드 전용 CSS
넷플릭스 드라마 '기묘한 이야기'를 배경으로 한 이 카드는 내용이 부드럽게 드러나는 애니메이션이 돋보입니다. 이 모든 것은 순수 CSS로 구현되었습니다.
블로그 게시물 항목
마우스 포인터를 웹사이트 위에 올리면 나타나는 웹사이트 미리보기입니다. 간편한 통합을 위해 CSS와 HTML 코드가 포함되어 있습니다 .
블로그 카드
블로그 카드에 최적화된 미니멀하고 반응형 디자인입니다. 고품질 의 빠르고 부드러운 애니메이션 으로 깊은 인상을 남길 수 있습니다.
반응 형 명함
마우스 포인터를 카드 이미지 위에 올리면 나타나는 미세한 애니메이션 효과가 눈에 띕니다 .
다른 블로그 카드
마우스 커서를 카드 위에 올리면 카드 내용이 나타납니다.
명함
심플 하면서도 모던한 명함 디자인 데모와 HTML 및 CSS 코드입니다.
3D 명함
이 카드는 HTML과 CSS를 사용한 3D 애니메이션을 적용했습니다 . 엘레나 나자로바가 디자인한 이 카드는 생동감 넘치는 색상 덕분에 눈길을 사로잡는 명함으로 제격입니다.
CSS 명함
마우스 포인터를 올리면 반응하는 URL들이 나타나도록 3D로 회전하는 매우 눈길을 끄는 CSS 명함입니다 .
카드 그리드
눈길을 사로잡는 디자인 으로 잘 배치된 카드 시리즈입니다 . 미니멀한 미학이 돋보이지만, HTML, CSS, SCSS 코드는 훌륭하게 작성되었습니다.
3D 카드 공개
이 카드 격자 시리즈는 마우스 커서를 녹색 아이콘 위에 올리면 더 자세한 정보를 보여줍니다 . 포인터를 움직이면 격자의 나머지 부분도 그에 따라 움직입니다.
반응 형 머티리얼 디자인 카드
구글의 디자인 언어를 사용하여 제작된 이 카드 시리즈는 예시에서처럼 플레이어에 대한 모든 정보를 볼 수 있는 메뉴 아이콘이 특징입니다. 아름답고 직관적인 애니메이션과 뛰어난 시각적 매력을 자랑합니다.
Flexbox 카드 그리드
플렉스박스 그리드 형식을 사용하여 높이가 동일한 카드 프로토타입이 돋보입니다. CSS 종횡비 및 CSS 필터를 활용한 점 또한 강점입니다.
클래시 오브 클랜 카드
인기 모바일 게임인 이 게임은 Andre Madarang이 HTML과 CSS를 사용하여 제작한 카드를 특징으로 합니다. 우리는 정교하고 시각적으로 매력적인 애니메이션을 통해 카드 사이를 이동할 수 있습니다.
전자 상거래 용 슬라이드 카드
역동적인 애니메이션 이 돋보이는 이 카드들은 사용자가 카드 구성 요소를 탐색하여 그 의미를 발견하도록 유도합니다. 오마르 드소키의 훌륭한 디자인입니다.
인터페이스 디자인-제품 카드
저희 전자상거래 스토어의 제품 카드 디자인에 딱 맞는 카드입니다 . HTML과 CSS로 제작되었습니다.
제품 카드
동일한 카드에서 여러 이미지를 탐색하여 제품을 자세히 살펴볼 수 있습니다. "장바구니에 담기" 버튼이 포함되어 있으며 HTML, CSS 및 JavaScript 코드가 내장되어 있습니다.
유연한 제품 카드
이름에서 알 수 있듯이, 이 템플릿 엔진은 플렉스박스를 사용하여 장바구니 버튼을 클릭할 때 흥미로운 애니메이션 효과를 만들어냅니다.
카드 뒤집기
최소한의 코드로 부드럽고 완벽한 애니메이션 효과를 구현하는 카드입니다 . 몇 분 안에 추가할 수 있습니다. 최근 Codepen에 추가되었습니다.
3D 제품 카드로서의 카드
이 카드들은 마치 테이블 위에 놓인 카드 덱과 같다는 점을 알아두면 좋습니다 . 마우스 포인터를 카드 위에 올리면 카드가 확대되고, 각 카드를 클릭하면 제품 정보가 담긴 뒷면이 나타납니다. 다시 클릭하면 원래의 앞면으로 돌아갑니다. 3D CSS 속성을 배우기에 완벽한 도구입니다.
시차 카드
놀라운 반전 효과가 있는 매우 시각적인 실험입니다 . 무슨 말인지 이해하려면 직접 보는 게 좋을 거예요.
카드 호버 효과
카드에 마우스 오버 효과를 적용 하는 간단하지만 효과적인 방법 입니다.
간단한 호버 효과
놀랍도록 단순 하지만, 보는 순간 강렬한 인상을 주는 효과입니다.
시차 깊이 카드
이 카드들은 패럴랙스 효과를 한 차원 더 높여 시선을 사로잡는 디자인을 만들어냈습니다. 블로그에서 특정 카테고리를 선택했을 때 사용자에게 어떤 효과를 주는지 직접 확인해 보셔야만 그 진가를 제대로 이해하실 수 있을 겁니다.
영화 용 UI 카드
HTML 과 CSS 로 제작된 아름다운 디자인의 카드입니다 .
프로필 카드
소셜 미디어 프로필 링크를 포함할 수 있는 훌륭한 연락처 카드 애니메이션입니다 . HTML과 CSS를 사용했습니다.
폴라로이드 번들 카드
사용자 지정 CSS 속성, 필터 및 전환 효과를 사용하여 그룹화된 폴라로이드 카드 시리즈를 만들었습니다. 이 SVG 이미지 웹사이트도 놓치지 마세요.