Section 9, Other Assorted Useful CSS Properties

Garam·2023년 7월 26일

CSS

The Web Developer Bootcamp by Colt Steele

목록 보기

3/5

Opacity & The Alpha Channel

rgba (red, green, blue, alpha): alpha 0(투명) → 1 (불투명)
Opacity: a property we set on an element, which governs the entire element’s transparency.
Transparency for hex colors: 00 to FF (마지막 자리에 추가), vs코드 팔레트에서 선택할 수도 있음.

Position

Go refer to developer.mozilla.org/en-US/docs/Web/CSS/position
static / relative / absolute / fixed: 위치고정 / 원래 위치를 기준으로 움직임 / 상위 요소를 기준으로 움직임 / 전체화면을 기준으로 움직이고, 그 자리에 고정되어있어 스크롤 하더라도 해당 위치에 있음

CSS Transition

.circle {
		width: 300px;
		height: 300px;
		transition: 1s;
}

.circle {
		border-radius: 50%
}

/* 원으로는 즉시 변하도록 하면서 background-color 변화에만 3초의 트랜지션을 주고 싶을 때 */
.circle {
		transition: background-color 3s;
}

/* 딜레이를 주고싶을 때 (1초 후에 트랜지션이 일어남) */

.circle {
		transition: background-color 3s 1s;
}

더욱 복잡한 트랜지션 구현
- transition-timing-function
- easing.net

Transforms

transform: rotate(45deg); 45로 돌아감
transform-origin: bottom right; 오른쪽 하단을 기준으로 돌아감.
rotateX() / rotateY(); X축, Y축을 기준으로 돌아감

scale(0.5); 부피를 반으로 줄임
scale(2, 1); height은 그대로이나 width는 2로 늘어남
scaleY(2); Y축 기준으로 2로 늘어남 (height만 2배로 늘어남)

translateX(200px); x축 위에서 200px만큼 옮김
translate(-100px, 50px); x축에서 -100(좌), y축에서 50(아래)

skew(30deg); 30도로 비틀림 (원형으로 돌아가는 것이 아니라 대상 자체가 왜곡됨)

해당 기능들은 중복해서 사용할 수 있음.

transform: translateX(-500px) rotate(0.5turn) scaleY(0.5);

빛나는 버튼 만들기

button {
  color: #ffa260;
  background: none;
  border: 2px solid;
  padding: 1em 2em;
  font-size: 1em;
  transition: all 0.25s;
}

button:hover {
  border-color: #f1ff5c;
  color: #f1ff5c;
  box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;
  transform: translateY(-0.24em);
  cursor: pointer;
}