SeaPlus

[기능 구현] 1. 배경 blur 처리 backdrop-filter:blur(정수px) 를 통해서 배경에 blur 효과를 준다. 2. blur처리를 해제 하는 원형 모양 생성 masking 이란 요소나 이미지의 선택된 부분을 브라우저 화면에 표시하고 나머지는 숨길수 있는 기술이다. 이러한 마스킹은 페이지의 이미지 또는 다른 요소의 일부를 숨기기 위해 PNG이미지, css 그라디언트, svg 요소를 사용하여 수행된다. CSS 그라디언트를 통해 마스킹 할때는 mask-image: 그라디언트 종류(위치값, 그라디언트 시작시작색상, 그라디언트 종료색상); 으로 표현합니다. 이때 black 은 이미지, 요소를 보여주는 색상 투명한 항목은 이미지,요소를 숨기는 색상 입니다. EX) mask-image: radial..

[구현] 1. 물방울의 모양 표현 물방울 구현을 위한 border-radius 모양이 복잡해 보이는데 이는 Fancy border radius generator 사이트를 통해 간단히 만들 수 있다. [ https://9elements.github.io/fancy-border-radius/#68.50.36.24--. ] Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io 2. 물방울 질감 표현 물방울 질감은 box-shadow를 이용해 표현한다. inset 은 그림자를 요소 내부에 만들때 쓰는 명령어 인데 이를 이용해 물방울 질감을 표현할수 있을 만큼 box-shad..

[기능 구현] 이 버튼효과는 보기에는 약간 복잡해 보이지만 가상선택자 after 와 before을 통해서 간단히 만들수 있다. 구체적인 순서는 1. 버튼 구현 a 태그로 버튼모양 구현 2. after, before을 이용해 border의 모양 바꾸기 a::before 가상선택자로 기존의 a 태그보다 x축으로 넓이가 좀더 길고 y축으로 높이가 좀더 짧은 가상요소를 생성한다. a::after 가상선택자로 기존의 a 태그보다 Y축으로 높이가 좀더 길고 x축으로 넓이가 좀더 짧은 가상요소를 생성한다. 3. transition과 transform 활용 -transform의 scale을 줄이는 효과 를 적용하고 transition으로 부드럽게 사라지도록 한다. after요소는 x축 넓이가 커서 결과적으로 borde..

[구현 효과] 360도 회전하는 원형 모양의 요소 3개를 생성한다. 약간 찌그러진 원형의 모양은 Fancy Border Radius Generator 라는 사이트를 이용해 쉽게 구현할 수 있다. [ https://9elements.github.io/fancy-border-radius/#49.69.55.31--. ] Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io [HTML] Loading... [css] * { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; justify-conten..

[구성효과] 1. text 색상이 #000 -> #fff로 바뀐다. 2. 마우스가 올라갈 시 버튼 배경의 painting 효과가 나타난다. 두개의 효과 다 transition 을 사용해 구현할수 있고, painting 효과는 넓이가 0%->100% 로 변환 하게 하면 된다. painting 효과는 img 파일. [HTML] Read More Read More [css] @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins", sans..

[구성요소] - h2 두개로 구현된 애니메이션 - content h2:nth-child(1) 는 water 문자를 표현하는 역할 - content h2:nth-child(2) 는 water 내부의 물결치는 애니메이션으로 만든다. [Clippy - CSS clip-path maker] Clippy 사이트 ( https://bennettfeely.com/clippy/ ) - clipy-path 함수는 shape을 생성하는 함수이고 지정 값을 통해 원하는 모양을 만들 수 있다. - 사이트를 통해 물결모양을 생성한다. [HTML] Water Water [CSS] @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;5..

크게 2가지 애니메이션으로 분류 가능하다. 1. 계속 전환되는 배경색 애니메이션 2. 늘었다 줄었다 하는 text 애니메이션 [배경 효과] - 총 3개의 레이어로 구성되어 있다.( 배경이미지 레이어 1개, 조명 2개) - 배경이미지는 "그라데이션 효과 + 벽돌 이미지" 로 구성되어 있는데 "background-blend-mode: multiply;" 로 혼합해서 구성 했다. - 2개의 조명은 배경의 after, before 가상선택자로 구현했다. [1. 배경색 애니메이션] - hue-rotate 속성을 통해 색조 회전을 한다. - "색조 회전"을 적용하기 전에 배경색상은 정해져 있어야 한다. @keyframes animateBgColor { 0% { /* hue-rotate -> 색조회전 */ /* 배경..

크게 2가지 애니메이션 효과로 분류 가능하다. 1. 요소들을 360도 회전시키는 애니메이션 2. 요소들을 가운데 한 점으로 모아주는 애니메이션 [가상선택자와 그림자효과] - div class loader의 before, after 가상선택자를 활용해 애니메이션 효과를 적용할 원들을 만든다. - 각 요소들의 그림자를 x축으로 이동시키고 배치함으로써 또 다른 요소가 활용되는것 과 같은 효과를 만들어 낸다. .loader:before { background-color: #cb2025; box-shadow: 30px 0 0 #f8b334; margin-bottom: 10px; } .loader:after { background-color: #00a096; box-shadow: 30px 0 0 #97bf0d; }..

하단부 에서 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..

오로라 UI를 만드는 방법은 총 2가지 이다. 1. 요소3개를 만든뒤 각자 다른 색상을 주고 겹쳐 오로라 효과를 연출한다. 2. background-image 속성의 radial-gradient를 통해 간편하게 오로라 효과 연출이 가능하다. 원래라면 2번째의 방법이 훨씬 간편하고 태그사용도 적지만 동적인 애니메이션 효과를 부여하기 위해서는 1번 방법을 사용해야 한다. - HTML요소 3개 생성 후 각각의 위치를 top, left, right , bottom등을 이용해 겹쳐놓는다. - 요소 3개는 absolute position이고 3개의 요소를 감싸고 있는 태그 .wrap 이 relative 이기때문에 위치조정이 자연스럽 게 가능하다. - transform을 사용해 애니메이션 효과를 부여한다. - rot..