개발자입니다
Inflearn Egoing) 섹션 6. 그래픽 - 배경, 필터, transform, transition 본문
Inflearn Egoing) 섹션 6. 그래픽 - 배경, 필터, transform, transition
끈기JK 2022. 9. 22. 09:51■ background
background-color: 배경 색상 지정
background-image: 배경을 사진으로 지정
background-repeat: 배경을 사진으로 할 때 반복할지 여부
background-attachment: 스크롤에 따라 배경 움직일지 여부
background-size: 배경 사진 크기가 box를 넘어갈때 어떻게 처리할지 선택
background-position: 배경 사진 위치 정렬
background: color image repeat attachment position; 배경 지정 축약형으로 사용
background-color: tomato;
background-image: url('gogh.png');
background-repeat: no-repeat; /* repeat-x, repeat-y */
background-attachment: fixed; /* scroll */
background-size: contain; /* cover */
background-position: right top; /* center center */
background: tomato url('run.png') no-repeat fixed center;
background-repeat
background-attachment: fixed
background-size
background-position: center center
■ filter
CSS filter 테스트 사이트: https://codepen.io/EmNudge/pen/JxdpYq
지원하지 않는 브라우저에 대비해 아래와 같이 입력
-webkit-filter:
-o-filter:
filter:
-grayscale 적용
img{
-webkit-filter: grayscale(50%);
-o-filter: grayscale(50%);
filter: grayscale(50%);
}
-blur 적용. 사진과 글자 모두 적용된다.
h1{
-webkit-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px);
-img:hover 로 마우스 올렸을때 효과 적용된다.
img:hover{
-webkit-filter: grayscale(100%) blur(3px);
-o-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}
- { transition } 설정시 필터 전환이 지연된다.
img{
transition: all 1s;
}
■ transform
: 포토샵처럼 회전, 기울기, 크기변형 등의 기능
codepen 사이트: https://codepen.io/vineethtrv/full/XKKEgM
-scale: 크기 변형
h1{
background-color: deepskyblue;
color: white;
display: inline-block;
padding: 5px;
font-size: 3rem;
margin: 100px;
transform:
/* scaleX(0.5)
scaleY(0.5) */
scale(0.5, 0.5);
}
-참고 코드
/* Keyword values */
transform: none;
/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
/* Global values */
transform: inherit;
transform: initial;
transform: unset;
■ transition
: 장면 전환시 수행 시간을 설정한다.
transition-property: 전환 속성 지정
transition-duration: 전환 시간 설정
transition: 전환 속성, 시간을 동시에 지정. 속성별로 시간 달리 줄 수 있다.
<style>
a{
font-size: 3rem;
display: inline-block;
/* transition-property: all; font-size;
transition-duration: 0.1s;
transition: all 0.1s; */
transition: font-size 1s, transform 0.1s;
}
a:active{
transform: translate(20px, 20px);
font-size: 2rem;
}
</style>
</head>
<body>
<a href="#">Click</a>
</body>
-transition-delay: 장면 전환 전 대기시간 설정
a{
transition-delay: 1s;
}
-transition-timing-function: 장면 전환 속도를 균일하지 않게 설정
관련 사이트: https://matthewlein.com/tools/ceaser
원하는 효과 선택 후 아래 코드 복사하여 삽입
-로딩 완료시 배경 색상 전환
<style>
body{
background-color: black;
transition: all 1s;
}
</style>
<body onload="document.querySelector('body').style.backgroundColor='white';">
