코딩/CSS6 loading css animation 코딩/CSS 2024. 12. 12. 진행중입니다~ 하면서 로딩이미지 뜰 때 쓸만한 애니메이션을 css로 구현해 봄.점 3개가 뱅글뱅글 돌아가는 액션. .loader {position:relative;display:flex;align-items:center;width:38px;height:24px;}.dot{display:block;position:absolute;left:0;width:12px;height:12px;background:blue;border-radius:14px; aspect-ratio:1;animation:dot1 2.6s infinite, dot1-1 2.6s infinite;}.dot2 {animation-delay: -0.86s;}.dot3 {animation-delay: -1.73s;}@keyframes dot1 .. scrollbar css 코딩/CSS 2024. 12. 6. scrollbar 디자인 바꾸는 css 예시.background 투명이 안먹어서 검색해보니body 에 overflow:overlay를 해주면 크롬에서 스크롤바 배경이 투명하게 잘 나온다.엣지도 잘 나오고 파이어폭스는 자체스크롤을 써서 적용이 안됨.::-webkit-scrollbar{width:14px;height:14px;background-color: rgba(0,0,0,0%);}::-webkit-scrollbar-thumb{ background-color: #CFCFCF; border: 4px solid transparent; background-clip: padding-box; border-radius:100px;}body{overflow:overlay} focus 그라데이션 효과 코딩/CSS 2024. 12. 3. .form-control:focus { background-color: #fff; border-color: rgba(87, 79, 236, .5); box-shadow: 0 0 25px rgba(87, 79, 236, .1); color: #222; outline: 0;} 피그마 corner smoothings css로 주기 코딩/CSS 2024. 11. 26. Figma에는 Corner Smoothings 라는 기능이 있다.이게 뭐냐면 박스의 라운드를 줄 때, 좀 더 부드럽게 가장자리 처리를 해주는 것이다.위 그림에서 왼쪽은 일반적으로 radius 10을 준 것이고,오른쪽은 radius 10에다가 corner smoothings라고 되어있는 곳에 iOS값을 100%로 더 준 것이다.언뜻 보면 티가 안 날 수도 있지만 자세히보면 라운드의 가장자리 처리가 살짝 더 곡선으로 되어있다. 그래서 이것을 css로 구현할 수 있는가에 대해 검색해봤는데아직 css3에는 이런 기능은 없고 스크립트의 사용으로 구현이 가능했다. 아래는 관련 질문에 대한 글.https://www.reddit.com/r/FigmaDesign/comments/stf1hq/rounded_corners_.. ol 태그 css로 자동 넘버링 코딩/CSS 2022. 11. 11. ol.dot_list{counter-reset:numbering;list-style:none;} ol.dot_list > li{position:relative;padding-left:33px;} ol.dot_list > li:before{counter-increment:numbering;content:counter(numbering);position:absolute;top:7px;left:0;width:22px;height:22px;font-size:13px;line-height:22px;font-weight:800;text-align:center;color:#fff;border-radius:100%;background:#62676e;} ol.dot_list > li > p{font-size:22px;l.. css 가운데 정렬 transform 코딩/CSS 2021. 11. 1. CSS로 가운데 정렬을 하는 방법은 여러가지가 있음. HTML CODE 가운데 정렬 1. position absolute와 transform을 이용한 방법 코드가 간단하긴 하지만 특정 브라우저에서 컨텐츠가 흐려져 보이는 경우가 있음. .center_wrap{ position: relative; width: 100%; height: 100%; } .center{ position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); } 2. position absolute와 margin을 이용한 방법 컨텐츠의 width, height 값이 정해져 있을때 가능한 방법. width, height 의 절반px 만큼 마이너스 값으로 줘서 맞춤. .cen.. 이전 1 다음
euntori
Comments