본문 바로가기

Front-end/CSS3

[CSS] 스크롤바 커스텀 #css #스크롤바커스텀  스크롤바 커스텀 사용 X   스크롤바 css 커스텀  body에 scrollbar를 커스텀하는 경우도 있지만 아직까지는 불편하다고 하는 클라이언트가 많은 듯 합니다.다만 textarea, 게시판 list 등 커스텀 해야 좀 깔끔해 보여서 사용하는데 디자인이 누락되면 무난하게 사용하는 코드입니다.(저거 하나 디자인 기다렸다가 작업하기에는 좀 답답하니까용)  HTML   CSStextarea.n-ipt::-webkit-scrollbar {   width: 4px;   background-color: rgb(209, 209, 209); } textarea.n-ipt::-webkit-scrollbar-thumb {   background-color: rgb(125, 125, 125);.. 2024. 8. 24.
글 넓이(font-stretch)가 지원되지 않는 폰트에서 사용하기 #font-stretch #scale 안녕하세요. Gi_1의 개발일기입니다. 최근 이직하여 근무중인데 글자의 넓이라는 것을 사용한다는 것을 들었습니다. 폰트의 글자 넓이나 높이를 강제로 깬다는 내용이였는데요. 관련 검색을 하다 font-stretch를 발견했지만 지원되는 폰트가 많지 않더군요.. 따라서 강제로 이용하는 방법입니다. .stretch{ -webkit-transform:translateX(-1%) scale(0.98,1); -moz-transform:translateX(-1%) scale(0.98,1); -ms-transform:translateX(-1%) scale(0.98,1); -o-transform:translateX(-1%) scale(0.98,1); transform:translat.. 2022. 6. 8.
[CSS] 그림자, 그라데이션 css 생성 사이트 #css boxShadow #gradient #auto 안녕하세요. Gi_1입니다. 그림자, 그라데이션 사용 방법은 알지만 웹 접근성 고려해서 css 작성하기 너~~무 귀찮고 비효율적이에요. 그림자, 그라데이션 css 생성 사이트 소개 해 드리려고 합니다. 1. 그림자 그림자 생성 사이트에 접속 해 보시면, 처음 뜨는 팝업 창 은 꺼주세요. 상단에 있는 직사각형으로 실제 그림자 적용 모습을 파악 하실 수 있고, 각도, 거리, 블러, 색상, 불투명도를 지정할 수 있습니다. 하단에 내려 보시면 아래와 같이 생성된 CSS가 있는데, 이것을 복사하여 사용 하시면 적용 끝! 수기로 작성 하는 것 보다, 사이트 즐겨찾기 해 두시고 작성 하는게 더욱 빠릅니다. 하단에 더 살펴 보자면, box-shadow를 통한 더 .. 2022. 2. 2.