728x90 반응형 CSS127 [CSS]3D 버튼 애니메이션 :before 와 :after 두가지 가상클래스를 이용해서 버튼의 두가지 면을 만들고 transform을 이용해 3D 효과를 구현했다. 이때 3D효과를 위해서는 perspective가 꼭 필요하다 See the Pen 3d button by gahyun (@gahyun) on CodePen. 2019. 5. 29. [CSS]css 계산 calc() 함수 다음과 같은 상황에서 쓸 수 있다.. 1줄에 3개씩 배치하고,, margin 값을 10px 주고싶을 때 3개가 배치되려면 하나의 width 값은 33.333%가된다. margin 10px을 주면 3개가 한줄에 배치될수 없고, width 값을 줄이면 원치않는 빈공간이 생기거나 화면의 크기 변화에 따라 다른 결과가 보여질 수 있다. 이때 calc을 이용해 쉽게 계산할 수 있다. 아래와같이 width: calc(33.333% - 10px); width의 값을 calc 계산을 통해 전체 width 의 33.333% 에서 10px을 뺀 값을 준다 그리고 margin을 주면 쉽게 한줄에 원하는 만큼 배치할 수 있다. See the Pen calc()함수 by gahyun (@gahyun) on CodePen. 2019. 5. 28. [CSS]counter-increment 요소 순서 자동으로 생성하기 .count-box{ counter-reset: hindex; /* counter이름 정하기 이때 값은 0으로 초기화 됨 */ } h3::after { counter-increment: hindex; /* 아무것도 쓰지않으면 1씩 증가 hindex 2 라고 쓰면 2씩 증가 hindex -1 이면 1씩 감소 여러개 다르게 설정 가능 */ content: counter(hindex); /* 출력 */ } 태그명 또는 클래스명 등으로 같은 속성을 가진 요소들의 순서를 찾아서 출력할 수 있습니다. See the Pen counter-increment 순서찾기 by gahyun (@gahyun) on CodePen. 2019. 5. 28. [CSS]요소 모양으로 자르기 clip clip 네모 모양으로 이미지 자르기 position: absolute; clip: rect(10px, 190px, 190px, 10px); clip-path 도형으로 모양 자르기 ellipse 타원 circle 원 polygon 다각형 .img2{ clip-path: ellipse(100px 40px at 150px 100px); } .img3{ clip-path: circle(60px at 140px 80px); } .img4{ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); } See the Pen clip by gahyun (@gahyun) on CodePen. 2019. 5. 28. 이전 1 ··· 12 13 14 15 16 17 18 ··· 32 다음 728x90 반응형