반응형 css trick & base34 라운드 이미지 뱃지 라운드 이미지 옆에 뱃지가 있는데 튀어나가는경우outer : relativebox에 overflow:hidden; box에는 릴레티브를 주지않는다badge의 부모는 outer See the Pen 라운드이미지 뱃지 overflow:hidden; by uni (@agosto) on CodePen. 2024. 9. 4. 사람인 swiper 라운드 트렌지션 사람인 ui는 디자인이 너무 이쁜거같다디자인 개편하기 전에 미리 소스를 확인해봤다 ***********스와이퍼 현재 화면에서 활성화됐을때 글자박스가 밑에서 위로 올라오게#1. 스와이퍼 엑티브 되기전.platinum-plus .desc > * { opacity: 0; transform: translateY(25px); transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); } #2. 스와이퍼 엑티브됐을때.platinum-plus .slide.swiper-slide-active .desc > * { opacity: 1; transform: none; } 12345678910111213141516171819202122232425.. 2024. 7. 31. animate.css aos 에니메이션 효과주기 *****레이어팝업밑에서 위로 올라오는 css로 일반적으로 줄때#밑 (안보일때) transform: translateY(100%);#위 (보일때 - 클래스 붙음) transform: translateY(0); 1. animate.css 오직 css만으로 가능 동작은 화면 보일때 한번만https://animate.style/ 2. aos 스크립트로 화면에서 꽂아주는 형태 한번만, 보일때마다 설정가능https://michalsnik.github.io/aos/ *글자가 감춰졌다가 올라오는 느낌은 바깥영역을 오버플로우 히든으로 주면 그런느낌을 낼 수 있다div class="overflowHidden"> p class="title animate__animated animate__slideInUp"> .. 2024. 7. 24. 라운드 마스킹 border-radius 위아래형 이미지 아닌 css로만 왼쪽은 위 라운드 / 오른쪽은 아래 라운드로 있을때 어떻게 해야할까?이미지로 깔려면 100%?? 로해야하는데저 이미지가 계속 바뀌는 이미지라서 저렇게 통째로 자르면 안된다===>왼쪽은 그냥 일반적으로 보더레디어우스 사용해서 깔고 오른쪽은 저런모양으로 오른쪽에 깔면된다!! 신기방기 See the Pen round masking only css by uni (@agosto) on CodePen. 2024. 6. 13. flex gap을 써서 간격 조절하는법 1. flex써서 %로 간격을 맞출경우 부모에게 gap을 줄 경우2. width: calc(33.333% - 13.4px);20px(gap) * 2(3개일때 2군데 여백) / 3열 => 40/3=13.333 (올림 해준다) See the Pen flex gap % by uni (@agosto) on CodePen. 2024. 6. 7. grid masonry 일정하지 않은 비율을 가져올떄 사용 *부모 grid-template-columns: repeat(3, 1fr); /* 3칸 */ grid-template-rows: repeat(4, 1fr); /* 4줄 */ *자식grid-column: span 3; /* 3칸을 차지하겠다 */grid-row: span 2; /* 2줄을 차지하겠다 */ See the Pen CSS Grid by uni (@agosto) on CodePen. 2024. 5. 27. 이전 1 2 3 4 5 6 다음 반응형
