전체 글141 무한 롤링 배너 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.. 아콘 AK47 리뷰 (feat.스모크 키캡) 리뷰/IT기기 리뷰 2025. 1. 22. 정말 오랜만에 쓰는 키보드 리뷰..산건 정말 많은데 귀찮아서 미루다가 이제야 쓴다.. 저렴이의 끝판왕 일명 독거미.. AULA 제품들을 줄줄이 샀는데파견때문에 키보드가 더 필요해서 같은 공장에서 만든다고 알려진 프리플로우 아콘 AK47 제품을 구매해봤다.독거미는 LCD창이 없는게 아쉬웠는데 LCD에 노브까지 달려있다고 해서 질러봄.게다가 저소음축도 있다고 해서 저소음피치로 구매. 박스는 깔끔.. 박스 뒷면..별거 없음. 한글로 된 퀵 가이드가 있고 플라스틱 덮개도 포함되어 있다.3모드로 유/무선 다 된다. 키캡은..이중사출에 뭐 나쁘지 않았지만 내 스타일이 아니어서 바로 교체!! 키캡을 뽑으니 보이는 핑쿠핑쿠한 저소음피치 스위치! 색상 예쁘다.색감이 몽글몽글한 느낌이 드는데 타건감도 폭닥폭닥? 소복소복.. 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_.. 이전 1 2 3 4 ··· 24 다음
euntori
Comments