uiux 32일차

-밑줄의 너비를 글자의 크기와 맞추는 방법

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* 방법 1 (span으로 감싸지 않은 경우, 눈대중으로 맞춘다) */

.menu_1 > ul > li > a {
  display: block;
  padding: 20px;
  position: relative;
}

.menu_1 > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  left: 20px;
  right: 20px;
  background-color: red;
}

/* 방법 2 (width 값에 calc 계산을 한다) */

.menu_2 > ul > li > a {
  display: block;
  padding: 20px;
  position: relative;
}

.menu_2 > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  left: 20px;
  width: calc(100% - 40px);
  background-color: red;
}

/* 방법 3 (padding을 다르게 주기) */

.menu_3 > ul > li > a {
  display: flex;
  padding: 0 20px;
  /*   border:3px solid blue; */
}

.menu_3 > ul > li > a > span {
  position: relative;
  padding: 20px 0;
  display: inline-block;
  /*   border:3px solid black; */
}

.menu_3 > ul > li > a > span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: red;
}

---

-다각형 호버전환

section {
  width: 100px;
  height: 100px;
  position: relative;
}

section > div {
  width: 100%;
  height: 100%;
  background-color: rgba(14, 232, 196, 0.5);
   clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  transition: all 1s;
}

section:hover > div {
 clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* border 있는 것처럼 만들기 */
section > nav {
  width: 100%;
  height: 100%;
  background-color: rgba(14, 217, 232, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scale(1.3);
   clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  transition: all 1s;
}

section:hover > nav {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 되는 다각형이 따로 있나봄 */

cliip-path는 bennettfeely에서 라이브러리처럼 가져오면 됨
transition를 줘서 자연스럽게 바뀌게끔하기(모든 다각형이 다 되는건 아닐 수도 있음)

---

-텍스트 외곽선 따기
(21강 참고)

codepen-텍스트 외곽선_마우스 움직임 응용

=텍스트 그림자 주는 방법=

.border-text {
  --border-width: 2px;
  --color: rgba(0, 0, 0, 0.5);
  color: white;
  text-shadow: calc(var(--border-width) * -1) 0 0 var(--color),
    calc(var(--border-width) * 1) 0 0 var(--color),
    0 calc(var(--border-width) * -1) 0 var(--color),
    0 calc(var(--border-width) * 1) 0 var(--color);
}

=마우스 움직임 효과=

data-mousemove-effect1-hor-res="0.05" data-mousemove-effect1-ver-res="0.05"

data-mousemove-effect1-hor-res="-0.05" data-mousemove-effect1-ver-res="-0.05"

(예제와 다른점이라면 마우스 움직임을 0.01=>0.05로 바꿔서 움직임을 더 잘 보이겠끔 했음)
(반대로 움직이게끔 할려면 한 쪽은 마이너스를 주기)