티스토리

SeaPlus
검색하기

블로그 홈

SeaPlus

seaplus.tistory.com/m

SeaPlus 님의 블로그입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • blur effect 웹사이트 : CSS masking [기능 구현] 1. 배경 blur 처리 backdrop-filter:blur(정수px) 를 통해서 배경에 blur 효과를 준다. 2. blur처리를 해제 하는 원형 모양 생성 masking 이란 요소나 이미지의 선택된 부분을 브라우저 화면에 표시하고 나머지는 숨길수 있는 기술이다. 이러한 마스킹은 페이지의 이미지 또는 다른 요소의 일부를 숨기기 위해 PNG이미지, css 그라디언트, svg 요소를 사용하여 수행된다. CSS 그라디언트를 통해 마스킹 할때는 mask-image: 그라디언트 종류(위치값, 그라디언트 시작시작색상, 그라디언트 종료색상); 으로 표현합니다. 이때 black 은 이미지, 요소를 보여주는 색상 투명한 항목은 이미지,요소를 숨기는 색상 입니다. EX) mask-image: radial.. 공감수 0 댓글수 0 2021. 10. 1.
  • Bubble Web 하단부 에서 bubble 효과가 나타났다가 사라지는 애니메이션 - 버블 요소를 하단부에 정렬 배치 - 각 버블에게 "하단 -> 상단" 으로 움직이는 animation 적용 - 각 버블이 하단->상단으로 움직일때 하단부분과 상단부분 keyframes 에서 opacity 값 조정 - 각 버블에게 적용되는 animation delay값을 조정하여 다른속도로 실행된다. [HTML] Sign UP Welcome to our World's Creative Studio Take a tour [CSS] * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: sans-serif; color: #fbfcfd; } button { display: b.. 공감수 0 댓글수 0 2021. 9. 7.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.