웹프로그래밍/CSS
-
CSS transition / transform / animation웹프로그래밍/CSS 2019. 1. 11. 02:03
트랜지션 transition transition-property: width, background-color; // 트랜지션의 대상이 되는 프로퍼티를 지정 (기본값 all) transition-duration: 1.2s, 3s // 변화가 일어나는 기간. 초단위. 프로퍼티와 각각 대응 (기본값 0s) transition-timing-function: ease; // 트랜지션 변화율 함수 지정 (기본값 ease) transition-delay: 1s; // 트리거 이벤트 발생 후 몇 초 후에 트랜지션이 시작될 것인지 지정 (기본값 0s) transition : (shorthand) 2D 트랜스폼 transform translate(x,y)요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.px, %..
-
HTML 가로줄<hr> 꾸미기 예제웹프로그래밍/CSS 2018. 4. 19. 18:54
18 Simple Styles for Horizontal Rules (hr CSS Design)See the Pen 18 Simple Styles for Horizontal Rules (hr CSS Design) by Ibrahim Jabbari (@ibrahimjabbari) on CodePen. 그라디언트 스타일 { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }