반응형 CSS312 익스에서 scale 떨림 ie에서 scale효과가 떨려보이는 걸 rotate로 개선한 방법입니다. .bg { padding-top: 56.25%; background: url('https://picsum.photos/300/300') no-repeat 0 0 / cover; transform: scale(.9); transition: all .2s; } .before { width: 300px; } .before:hover .bg { transform: scale(1.1); transition: all 2s; } .after { width: 300px; } .after:hover .bg { transform: scale(1.1) rotate(.001deg); transition: all 2s; } jsfiddle에서 보기 htt.. 2019. 9. 29. flex를 이용한 반응형 레이아웃 display: flex 를 이용한 레이아웃입니다. Header Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Aside 1 Aside 2 Footer .wrapper { display: flex; flex-flow: row wrap; font-weight: .. 2019. 9. 29. 아이폰 버튼 효과 HMTL + CSS3로 아이폰 버튼 효과를 만들었습니다. 동의 거부 .btn_wrap { padding: 50px; } .btn_wrap label { font-size: 30px; } .btn { display: inline-block; position: relative; background: #b2b2b2; border-radius: 30px; width: 100px; height: 50px; cursor: pointer; vertical-align: middle; transition: all 0.3s; } .btn:after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 48px; height: 48px; bor.. 2019. 9. 26. 대각선 박스 호버 효과 대각선 형태 상자들의 마우스 호버 효과입니다. 가상선택자를 이용하여 만들었습니다. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none } a { text-decoration: none; color: #.. 2019. 9. 26. will-change will-change는 변화가 예상되는 요소를 브라우저에게 미리 알려줍니다. 브라우저는 실제 요소가 변화되기 전에 적절하게 최적화를 할 수 있습니다. 큰 비용이 드는 변화도 최적화로 인해 페이지의 반응성을 증가시킬 수 있습니다. will-change의 지원 범위 will-change의 속성 will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; will-change: top, left; auto 기본값으로 브라우저는 별다른 최적화를 실시하지 않습니다. scroll-position 스크롤 할 때 엘리먼트의 위치가 변경될 것을 알려줍니다. 이 값을 설정하면 브라우저는 스크롤 가능한 엘리먼트를 .. 2019. 9. 26. 텍스트에 색을 반씩 넣는 효과 가상 엘리먼트와 data 속성을 이용하여 만들어 보겠습니다. 1 split text color 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 body { height: 100vh; margin: 0; background: linear-gradient(90deg, #3498db 50%, #ffffff 50%); } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; color: #3498db; font-size: 7vw; font-family: 'Open Sans', sans-serif; font-weigh.. 2019. 9. 25. 이전 1 2 다음 반응형
