본문 바로가기

CSS6

[CSS] 마우스오버 (hover) 밑줄 애니메이션 효과 마우스오버(mouseover, hover) 시 밑줄(underline)이 가운데 또는 왼쪽에서부터 나타나는 효과 적용하는 법 [html] Center Left to Right [css] ul { display: flex; gap: 40px; font-size: 40px; list-style: none; } li::after { content: ""; display: block; width: 100%; height: 4px; background: #000; transition: all 1s; } /* 가운데에서 나타남 */ .center::after { transform: scaleX(0); } .center:hover::after { transform: scaleX(1); } /* 왼쪽에서 나타남 */ .. 2023. 8. 22.
[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] 반응형 비율 유지 박스(responsive box) css를 활용하여 반응형에서 가로/세로 2:1 비율을 유지하는 박스 만들기 [html] 2:1 box box1: width 15% box1: width 20% 1. 패딩값(padding) 사용 [css] .box1{ width: 15%; background: yellowgreen; } .box1::after{ content: ""; display: block; padding-top: 50%; /* 예) 1:1 박스의 경우 100% 입력 */ } 2. aspect-ratio 사용 [css] .box2{ width: 20%; aspect-ratio: 2 / 1; background: skyblue; } See the Pen [CSS] responsive box ratio _ 반응형 박스 비율 유지 by Ji.. 2023. 7. 3.
[CSS] scroll bar design _ 스크롤바 디자인 [html] Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem excepturi laborum quidem ullam quae, magni temporibus magnam quasi adipisci laudantium natus voluptatum facere cum. Distinctio corporis porro eos odit sed? [css] div{ width: 200px; height: 200px; outline: 1px solid red; overflow-y: scroll; } div::-webkit-scrollbar{ /* 스크롤바 배경 */ width: 20px; border-radius: 10px; backg.. 2023. 6. 30.
[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

티스토리툴바