CSS3
텍스트에 색을 반씩 넣는 효과
hjcode
2019. 9. 25. 22:44
가상 엘리먼트와 data 속성을 이용하여 만들어 보겠습니다.
|
1
|
<p data-split="split text color">split text color</p>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
body {
height: 100vh;
margin: 0;
background: linear-gradient(90deg, #3498db 50%, #ffffff 50%);
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
color: #3498db;
font-size: 7vw;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
}
p::before {
position: absolute;
top: 0;
left: 0;
content: attr(data-split);
width: 50%;
color: #fff;
overflow: hidden;
}
|
jsfiddle에서 보기
반응형