독자 여러분, 오늘 이 블로그에서 HTML과 CSS를 사용하여 멋진 프로필 카드를 만드는 방법을 배우게 될 것입니다. 이전 블로그에서는 HTML과 CSS를 사용하여 스크롤 투 탑 또는 백 투 탑 버튼을 만드는 방법을 살펴보았습니다. 이제 또 다른 멋진 카드를 만들 차례입니다. 카드 디자인도 몇 가지 더 공유했습니다. 여기서 그것을 확인하는 것을 잊지 마세요.
요즘 거의 모든 포트폴리오 웹사이트에는 프로필 카드가 있습니다. 포트폴리오 웹사이트란 무엇인가? 그것은 개인이나 조직에 대한 전문적인 정보를 제공하고 그들의 서비스에 대한 설명을 제공합니다. 대부분의 개발자들은 자신의 기술과 경험을 보여주기 위해 포트폴리오 웹사이트를 만듭니다. 프로필 카드에는 기본 정보가 나와 있습니다.
당신은 이것을 좋아할 것이다:-
애니메이션 카드 설계
놀라운 로그인 디자인
암호 토글러 표시/숨기기
반응형 제품 미리보기 카드
이 디자인 [Awesome Profile Card]에는 위의 이미지에서 볼 수 있듯이 페이지 중앙에 3개의 카드가 있습니다. 이미지 하나와 그 이름 뒤에 직업과 그들에 대한 몇 가지 설명이 있습니다. 우리가 카드를 가리킬 때, 그것은 위로 올라가서 부드러운 전환과 함께 카드 아래에 상자 그림자를 보여주고, 우리는 그것을 가리킬 때 이미지에 오버레이를 볼 수 있습니다. 좀 헷갈리신다면 제가 무슨 말을 하고 싶은 거죠? 그래서 당신은 소스 코드를 확인하고 미리 볼 수도 있습니다.
소스 코드를 확인하고 미리 보려면 이 웹 사이트를 방문하십시오.
https://incoderweb.blogspot.com/2022/01/how-to-create-awesome-profile-card.html
'css' 카테고리의 다른 글
| CSS를 사용하여 요소의 중심을 맞추는 방법 (0) | 2022.01.31 |
|---|---|
| Css와 Javascript 또는 Gsap으로 스포트라이트 효과를 생성하세요. (0) | 2022.01.27 |
| 뒷바람-이색 소개: 자동 핸들 역방향 어두운 색상 (0) | 2022.01.27 |
| CSS 변수: 그것들은 무엇이고 그것들을 어떻게 사용하는가 (0) | 2022.01.27 |
| Flexbox를 한 단계 업그레이드 (0) | 2022.01.27 |
댓글