코딩86 무한 롤링 배너 infinity rolling banner 코딩/CSS 2025. 3. 4. .roll {overflow:hidden;position:relative;width:100%;height:44px}.comp_roll {position:absolute}.comp_roll .grp_roll {display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;animation:rolling 30s linear infinite}.roll+.roll {margin-top:8px}.roll+.roll .grp_roll{animation:rolling2 30s linear infinite}@keyframes rolling { 0% {margin-left:0} 100% {margin-left:-1250px}}@keyframes rolli.. 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_.. [웹스퀘어] 페이지 설명 보이게 코딩/웹스퀘어 2024. 10. 17. 페이지 설명 추가하는 방법.1. Project > Properties 클릭 2. Websquare > W-Docs > 체크박스 체크 조금 기다리면 이렇게 설명이 짠~ 하고 나옴. 이전 1 2 3 4 ··· 15 다음
euntori
Comments