Web dev/HTML&CSS
-
CSS / typeit 라이브러리로 html 타이핑 효과 주기Web dev/HTML&CSS 2023. 4. 23. 22:28
typeit 으로 간단한 타이핑효과를 구현했다. typeit 공홈에 가면 스크립트까지 짜준다! 개꿀!.. // CDN으로 import CSS는 그냥 하고싶은대로 스타일링 해주면 된다! 개꿀 속도,딜레이,삭제등 원하는대로 타이핑 효과를 표현할 수 있다!. 부가적인 기능은 typeit 공홈을 정독하면 된다! 개꿀 new TypeIt("#introTxt", { speed: 120, }) .type("안녕하세요. :)",{delay: 400}) .delete(2 ,{delay: 700}) .delete(7) .type("프론트엔드 개발자 ") .type("양홍열입",{delay: 500}) .delete(5,{delay: 300}) .type("로 성장중인 ") .type("웹 퍼블리셔 양홍열입니다.") .go..
-
CSS / 따라다니는 마우스 포인터 커스텀하기Web dev/HTML&CSS 2023. 4. 23. 22:15
포트폴리오 인트로 페이지를 우주느낌으로 하였다. 그리고 커서포인터를 빛으로 표현해보았다. #cursor-custom { height: 30px; width: 30px; pointer-events: none; position: fixed; background: #fff; border-radius: 50%; transform: translate(-10%,-10%); box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #fff, 0 0 150px #fff; z-index: 10; cursor: none; } @media (max-width:1024px) { #cu..
-
CSS / Scollbar custom 스크롤바 커스텀하기Web dev/HTML&CSS 2022. 10. 30. 12:08
브라우저 마다 기본으로 제공되는 스크롤 모양이 다르다. 특히 윈도우는 쫌 못생겼다 ㅋㅋ 1. width,border-radius,border-width로 디자인에 맞게 커스텀 해주면된다. /* 스크롤 바 커스텀 */ .scrollbar_custom::-webkit-scrollbar {width: 18px;} .scrollbar_custom::-webkit-scrollbar-track {border-radius: 10px;} .scrollbar_custom::-webkit-scrollbar-thumb {background-color: #bcc5db; border-radius: 10px; border: 7px solid #fff; } 2. 스크롤을 적용시킬 박스에 스크롤바 커스텀 클래스를 주고 overflo..
-
CSS / 텍스트 줄임 ...처리Web dev/HTML&CSS 2022. 3. 13. 17:27
퍼블을 하다보면 자주 쓰게 되는 ...처리 ...처리는 한줄..과 여러줄..하는법이 약간 다르다. /*한줄 자르기*/ .text{ display: inline-block; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ..표시는 블럭속성이여야 한다 */ /*여러줄 자르기*/ .text{ white-space: normal; line-height: 1.2; height: 3.6em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }