이미지 갤러리 CSS 9종 — 메이슨리부터 라이트박스까지
이미지 갤러리 CSS는 사진 여러 장을 그리드나 워터폴 모양으로 배치하고 호버·클릭에 반응하게 만드는 레이아웃 기법입니다. 핀터레스트에 저장해 둔 그 갤러리처럼 예쁘지만, 막상 코드로 옮기려면 그리드 수식과 크롭 처
읽기호버
동작
CSS 카드 효과 9가지 — 호버 인터랙션 모음
CSS 카드 효과는 마우스를 올리거나 카드를 선택했을 때 상품·포스트 카드가 살짝 움직이면서 정보를 더 보여주는 짧은 시각 변화입니다. 상품·포스트 카드에 바로 붙일 수 있는 아홉 가지를 실제로 렌더링해서 모았고,
CSS 카드 뒤집기 애니메이션 9종 (복붙 20줄)
CSS 카드 뒤집기는 마우스를 올리거나 클릭했을 때 카드가 휙 돌아가거나 반으로 접히면서 반대쪽 내용을 보여주는 애니메이션입니다. 코드를 몰라도 아래 데모에 마우스를 올려보면 바로 무슨 효과인지 알 수 있습니다. 이
CSS 밑줄 애니메이션 9종 — 한 줄 복붙으로
css 밑줄 애니메이션은 마우스를 올리거나 키보드로 초점을 옮겼을 때만 링크 아래 줄이 움직이며 나타나는 효과로, 지금 가리키고 있는 링크가 어디인지 눈으로 바로 알려줍니다. 아홉 가지를 모았고 전부 한 줄 복붙으로
CSS 화살표 애니메이션 9종
화살표 아이콘이 저절로 움직이는 웹사이트를 본 적 있으신가요? 마우스를 올리면 화살표가 길어지거나, 버튼을 눌러 보라는 듯 통통 튀거나 — 이런 작은 움직임 하나가 방문자의 시선을 붙잡아 줍니다. 이 글은 그런 CS
CSS 통통 튀는 애니메이션 9종 — 한 줄 복붙으로
CSS 통통 튀는 애니메이션은 요소를 그냥 나타나게 하지 않고 뜨고, 튕기고, 떨고, 흔들리게 만들어 살아 있는 느낌을 주는 움직임입니다. 흔한 영어 이름 대신 둥실둥실·포용·푸루푸루 같은 의성어로 아홉 개를 골랐고
컨페티 효과 축하 애니메이션 CSS 9종
회원가입이나 결제가 끝난 순간 화면에 색종이 조각이 잠깐 터지는 컨페티 효과, 다들 한 번은 보셨을 겁니다. 버튼 클릭이나 체크 표시 하나로 이런 축하 반응을 켜는 CSS 아홉 가지를 한 줄 복붙으로 쓸 수 있게 모
CSS 글래스모피즘 리퀴드 글래스 효과 9종
화면 위에 반투명한 유리판을 얹어 놓은 것처럼, 뒤 배경이 흐릿하게 비치면서 내용은 또렷하게 보이는 디자인을 CSS 글래스모피즘(리퀴드 글래스)이라고 부릅니다. 카드부터 내비게이션, 버튼, 토글까지 아홉 가지 유리
CSS 이미지 슬라이드 애니메이션 9종
사진 위에 마우스를 올리면 커튼처럼 열리거나 원이 점점 커지며 드러나는 걸 본 적 있으신가요? 이런 CSS 이미지 슬라이드 애니메이션을 한 줄 복붙으로 쓸 수 있게 아홉 가지로 모았고, 그중 하나는 자바스크립트 없이
CSS 가격표 디자인 애니메이션 9종
가격표 디자인에 마우스를 올렸을 때 카드가 살짝 떠오르거나 가격 숫자가 휙 바뀌는 걸 본 적 있으신가요? 어떤 요금제를 고를지 망설이는 그 짧은 순간, 이런 작은 움직임 하나가 시선을 붙잡아 줍니다. 이 글은 그런