본문 바로가기

텍스트3

[CSS] 텍스트(text)에 배경색(background) 적용 텍스트에 배경색 클리핑 마스크(clipping mask) 적용 [html] Clipping Mask BACKGROUND BACKGROUND [css] * { margin: 0; padding: 0; } h2 { /* 배경 그라데이션 */ background: rgb(34,193,195); background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%); text-align: center; /* 텍스트에 배경색 적용 */ color: transparent; background-clip: text; -webkit-background-clip: text; } section { display: grid; grid-template-.. 2023. 8. 3.
[CSS] 흐르는 텍스트 배너 애니메이션 (scrolling text animation) css에서 keyframes와 animation을 사용하여 흐르는 텍스트 배너 애니메이션 만들기 [html] SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT [css] @keyframes scroll-animation{ 0%{ left: 0; } 100%{ left: -400px; /* 텍스트 width와 동일 */ } } .scroll-text{ width: 100%; overflow: hidden; } .track{ display: flex; position: relative; width: 2800px; animation: scroll-animation 5s linear infinite; } .tra.. 2023. 6. 12.
[CSS] 텍스트 말 줄임표(...) 사용법 1. 한 줄에 말 줄임표 사용법 .ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2. 여러 줄에 말 줄임표 사용법 .line{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } See the Pen Untitled by Jinsik Son (@Jinsik-Son) on CodePen. 2023. 4. 26.
728x90

티스토리툴바