728x90 반응형 CSS/CSS 응용30 [CSS]버튼에 쓸수 있는 애니메이션 :after을 이용해 선을 하나 그려주고 클릭시 선을 없애고 버튼을 살짝 이동해 눌리는 효과를 줄 수 있습니다. a:active{ top:5px; left:5px; } a:active:after{ border:0; } 아래에서 버튼을 클릭해서 효과를 눈으로 확인해보세요 See the Pen button by gahyun (@gahyun) on CodePen. 2019. 5. 30. [CSS]종이 끝이 살짝 떠있는듯한 효과 가상클래스를 이용해 그림자를 넣어 한쪽 끝에만 그림자가 보이도록 구현하였다. 마우스를 올려 종이를 눌러보세요... See the Pen shadow animation by gahyun (@gahyun) on CodePen. .page:before{ /* 그림자를 넣을 가상 클래스 생성 */ z-index:-1; content:''; position:absolute; width:90%; height:90%; bottom: 3px; right:4px; box-shadow: 2px 2px 18px #444; transform:skew(2deg, 2deg); /* 살짝 비틀어서 모서리쪽만그림자가 보이도록 만든다 */ transition:all 0.3s; } 2019. 5. 29. [CSS] 초간단 CSS만으로 탭메뉴 구현하는 방법 두가지(javascript 없이 탭메뉴 구현하기) 방법1. 라디오버튼을 이용한다. 아래와같은 구조로, 라디오 버튼을 이용해 1개만 선택할수 있도록하고, 선택한 라디오버튼에 해당하는 내용을 보여준다. menu1 .tabmenu input:checked ~ label{ background:#ccc; } .tabmenu input:checked ~ .tabCon{ display:block; } See the Pen css-tabmenu2 by gahyun (@gahyun) on CodePen. 탭안에 탭 넣기 See the Pen css-tabmenu2 by gahyun (@gahyun) on CodePen. 방법2. 가상클래스 선택자 :target 을 이용한다. [CSS] - [CSS] :target 가상클래스 선택자 menu1 Lorem Ipsum is .. 2019. 5. 29. [CSS]touch-action 속성을 이용해 터치 제한하기 모바일 터치 이벤트를 제한할 수 있는 속성 touch-action auto - 기본 none - 터치이벤트 안됨 pan-x - X축 터치 스크롤 허용 pan-y - Y축 터치 스크롤 허용 manipulation - 핀치줌, 터치스크롤 pan-left - 왼쪽방향 터치스크롤 pan-right - 오른쪽방향 터치스크롤 pan-down - 아래바향 터치스크롤 pan-top - 위쪽 방향 터치스크롤 pinch-zoom - 핀치줌허용 모바일 또는 개발자 모드로 확인해보세요. See the Pen touch-action by gahyun (@gahyun) on CodePen. 참고 https://wit.nts-corp.com/2021/07/16/6397 CSS touch-action 한눈에 알아보기 | WIT블로그.. 2019. 5. 29. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형