1. image-rendering
이미지 랜더링 방식을 바꾼다.
원본이미지 사이즈를 그래도 사용하면 상관없지만 해당 이미지를 확대, 축소할 경우 효과를 볼 수 있다.
크롬, 사파리 등 브라우저에서 대비를 최적화하여 이미지 랜더링을 하는데 흐린 문제를 해결해줌.
image-rendering: -moz-crisp-edges; /* firefox */
image-rendering: -o-crisp-edges; /* opera */
image-rendering: -webkit-optimize-contrast; /* chrome */
image-rendering: crisp-edges;
2. translateZ
z축을 0으로 적용하여 깊이감을 없앤다.
transform: translateZ(0);
3. backface-visibility
뒷면을 hidden처리하여 입체감을 없앤다.
backface-visibility: hidden;
반응형
'UXUI Development > CSS' 카테고리의 다른 글
[CSS3] 3D Transform - Perspective (투영점) (0) | 2022.04.06 |
---|---|
[CSS3] 방어적(Defensive) CSS (0) | 2021.12.10 |
[CSS] border effect css (0) | 2020.07.22 |
[CSS] 배경이미지 종횡비율 유지 반응형 적용 (0) | 2020.05.20 |
[CSS] PNG, SVG 파일 CSS로 색상 변경하기 (0) | 2019.01.14 |
[CSS] 페이지의 하단에 footer 고정 시키기 (0) | 2019.01.10 |
[CSS] CSS Units 반응형 (em, rem, vw, vh, %) (0) | 2018.10.05 |
[CSS3] Flexbox (display:flex, justify-conent, align-items, flex-grow, flex-basis) (0) | 2018.07.16 |