안녕하세요, 우치입니다.
이 문서는 Life is Tech! Tokai Mentors Advent Calendar 2018의 12 일째입니다.
이번에는 CSS 기사가됩니다.

만드는 것

이번은 잡지라든지 가끔 보이는, 테두리에서 튀어나온 부분의 문자색이 바뀌고 있는 디자인을 만들어 갑니다.
말로는 전해지지 않는다고 생각합니다만 아래와 같은 디자인입니다.

구상

위의 이미지는 Illustrator로 만들었지만, 우선은 그 순서를 생각해 봅니다.
1. 배경색 결정
2. 하반부에 상자를 놓습니다.
3. 문자를 배치하고 복제
4. 문자 중 하나를 하반부의 상자로 자릅니다.
이것을 단순히 HTML과 CSS로 재현하면 기본적으로는 할 수 있을 것입니다.

만들어 보자

HTML + CSS (가장 간단한 패턴)

우선 아무것도 생각하지 않고 만들어 보겠습니다.

HTML

<div id="main-box">
  <p>Think Better</p>
  <div id="split-box">
    <p>Think Better</p>
  </div>
</div>

CSS

#main-box {
  width: 500px;
  height: 500px;
  background: #E1C0B6;
  position: relative;
  margin: 0;
  padding: 0;
}
#split-box {
  width: 100%;
  height: 250px;
  background: #EBEBC1;
  position: absolute;
  top: 50%;
  overflow: hidden;
}
#main-box p {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  margin: 0;

}
#main-box > p {
  bottom: 230px;
  color: #EBEBC1;
}
#split-box > p {
  top: -20px;
  color: #E1C0B6;
}

이것으로 할 수있었습니다.
htps : // 코데펜. 이오 / 리후 에드 ld / 펜 / 오 J ぇ m

해설

아무것도 없습니다.
단지 단순히 2개의 문자열이 상자에서 튀어나오는 양이 같게 되도록 line-height 의 절반만 중심에서 어긋난 위치에 각각 배치했습니다. 그 중 아래쪽 문자열의 튀어나온 부분을 #split-box 의 overflow: hidden 로 숨겼을 뿐입니다.

HTML + CSS (조금 개선)

첫 번째 예는 같은 문자열이 두 번 나온다는 매우 깨끗하다고 ​​말하기 어려웠습니다.
다음은 이것을 조금 개선해 보겠습니다.

HTML

<div id="main-box">
  <p>Think Better</p>
  <div id="split-box" data-text="Think Better">
  </div>
</div>

CSS

#main-box {
  width: 500px;
  height: 500px;
  background: #E1C0B6;
  position: relative;
  margin: 0;
  padding: 0;
}
#split-box {
  width: 100%;
  height: 250px;
  background: #EBEBC1;
  position: absolute;
  top: 50%;
  overflow: hidden;
}
#main-box p,
#split-box::after {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  margin: 0;
}
#main-box > p {
  bottom: 230px;
  color: #EBEBC1;
}
#split-box::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  top: -20px;
  color: #E1C0B6;
}

이것으로도 비슷한 결과를 얻을 수 있습니다.
htps : // 코데펜. 이오 / 리후에 ld / 펜 / Kbp → X

해설

이번은 data-* 속성과 ::after 요소를 이용하여 HTML에서 연속하고 있던 p 태그를 제거해 보았습니다.data-* 속성은 CSS로부터 격납한 정보를 취득하는 것이 가능하므로 여기에 텍스트를 넣어, ::after 요소로 취득, 표시를 실시하고 있습니다.
※ ::before 요소도 이용하면 완전하게 p태그를 없앨 수 있습니다만, 액세서빌러티의 관점에서 말하면 어느 쪽인가는 남겨 두어야 한다고 하는 것으로 하나는 남기고 있습니다.

Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes' values.
Using data attributes | MDN

::after (:after) | MDN

HTML+CSS+JS

위의 예에서 디자인이 작동하려면 두 위치의 문자열을 동일하게 유지해야합니다.
유지 보수 측면을 고려하면 이것은 좋지 않을 수 있습니다.
어쨌든 javascript를 사용하여 텍스트를 편집하는 것만으로 디자인이 작동하도록 합시다.

HTML

<div id="main-box">
  <p id="text">Think Better</p>
  <div id="split-box">
  </div>
</div>

CSS

#main-box {
  width: 500px;
  height: 500px;
  background: #E1C0B6;
  position: relative;
  margin: 0;
  padding: 0;
}
#split-box {
  width: 100%;
  height: 250px;
  background: #EBEBC1;
  position: absolute;
  top: 50%;
  overflow: hidden;
}
#main-box p,
#split-box::after {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  margin: 0;

}
#main-box > p {
  bottom: 230px;
  color: #EBEBC1;
}
#split-box::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  top: -20px;
  color: #E1C0B6;
}

자바스크립트

window.addEventListener('DOMContentLoaded', function() {
  text = document.getElementById("text").innerHTML; 
  document.getElementById("split-box").setAttribute("data-text",text);
})

이것으로 좋을까요?
htps : // 코데펜. 이오 / 리후 에드 ld / 펜 / 에 bn dyJ

해설

js를 추가한 것 이외에는 기본적으로 변하지 않습니다.
js 도 innerHTML 로 텍스트의 내용을 취득해, setAttribute 로 #split-box 의 data-text 속성에 그 내용을 건네주고 있을 뿐입니다.

요약

CSS가 조금 까다로울지도 모르지만, 이해하면 하는 일은 간단합니다.
이번과 같이 간단한 디자인이라면 Illustrator로 만들 때의 레이어 등의 사고방식을 이용하여 Web도 디자인해 나갈 수 있을 것입니다.

꼭 즐거운 Web라이프를!