마우스 휠 애니메이션 .scroll_down{position: absolute; bottom: 20px; left: 0; right: 0; margin: 0 auto;}.scroll_down .scroll{width: 28px; height: 48px; border: 2px solid #fff; border-radius: 25px; margin: 0 auto; display: flex; align-items: center; justify-content: center;}.scroll_down .scroll .scroll_dot{width: 5px; height: 5px; border-radius: 50%; background: #fff; display: block; animation: scroll 1.15s linear inf..
png 이미지에 그림자(drop-shadow)넣기 img{filter: drop-shadow(0px 0px 10px #c3c3c3);}
css 글자 흐르는 효과 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa ..
텍스트에 배경이미지, 그라데이션 넣기 .title span{ font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 12.0rem; /*그라디언트*/ background: linear-gradient(141deg, #48ded4 0%, #a026bf 51%, #e82c75 75%); /*이미지*/ background: url("../img/rainbow.jpg") repeat; color: transparent; /*필수*/ -webkit-background-clip: text; /*필수*/ letter-spacing: -2px; }
글자위에 점 포인트 주기 { text-emphasis-style: dot; text-emphasis-position: over left; -webkit-text-emphasis-style: dot; -webkit-text-emphasis-position: over; }
스크롤 바(scrollbar) 없애기 .over{ overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; } .over::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
border에 그라디언트 넣기 border-top: 3px solid transparent; border-image: linear-gradient(90deg, rgba(253,29,29,1) 0%, rgba(252,176,69,1) 30%, rgba(142,255,121,1) 64%, rgba(131,58,180,1) 100%) 1; background-origin: border-box; background-clip: content-box, border-box; background: #fff; border-image의 맨끝 1은 꼭 넣기 둥글기가 들어가있으면 적용되지 않음
폰트어썸 before, after (FontAwesome) Css에서 사용하기 https://fontawesome.com/search Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com :before { content: '\폰트어썸 Unicode를 입력해주세요.'; content: '\f191'; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; }
텍스트 문단 수 줄이기 p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /*줄이고 싶은 줄(문단) 수 적기*/ -webkit-box-orient: vertical; text-overflow: ellipsis; }
input radio 버튼 꾸미기 html input id = label for 값이 동일해야한다. 강아지 고양이 얼룩말 호랑이 css .in_box{ display: flex; justify-content: space-between; } .in_box input[type=radio]{ display: none; } .in_box input[type=radio] + label { color: #222222; font-size: 1.6rem; width: 24%; border: 1px solid #888; height: 45px; line-height: 45px; text-align: center; } .in_box input[type=radio]:checked + label { color: #fff; background: #000; }
스크롤바(scrollbar) 꾸미기 각 아래에 대한 CSS 코드를 추가해 주면 커스텀 가능 ::-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 예시 body::-webkit-scrollbar { width: 8px; /* 스크롤바의 너비 */ } body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #1b73ba; /* 스크롤바의 색 */ border-radius: 10px; /* 스크롤바의 둥글기 */ } body::-webkit-scrollbar-track { background: rgba(3..
라이브러리 브랜드 그룹 | 마멜코드

티스토리툴바