프리미엄 UI/UX로 미래 지향적인 뉴스레터 가입 양식을 만든 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

프리미엄 UI/UX로 미래 지향적인 뉴스레터 가입 양식을 만든 방법

DDD

Nov 25, 2024 am 07:04 AM

매력적이고 시각적으로 훌륭하며 기능적인 뉴스레터 가입 양식을 만드는 것은 결코 쉬운 일이 아닙니다. 이 프로젝트를 위해 우리는 전형적인 디자인에서 벗어나 진정으로 혁신적인 것, 즉 미래 지향적이고 타임머신에서 영감을 받은 가입 양식을 목표로 삼았습니다. 이를 생생하게 구현한 방법은 다음과 같습니다.

비전과 컨셉
목표는 간단했습니다. 다음과 같은 뉴스레터 가입 양식을 만드는 것입니다.

즉시 관심을 사로잡습니다.
재밌고 대화형이며 고급스러운 느낌을 줍니다.
창의적인 UI/UX 디자인의 힘을 보여줍니다.

저희는 사용자가 구독할 때 타임머신을 타고 있는 듯한 느낌을 주기를 바랐습니다. 빛나는 네온 효과, 애니메이션 전환, 완벽하게 반응하는 레이아웃을 갖춘 디자인은 기능성을 유지하면서도 눈에 띄어야 했습니다.

How We Created a Futuristic Newsletter Sign-Up Form with Premium UI/UX

1단계: 핵심 구조

우리는 HTML로 양식을 구성하는 것부터 시작했습니다. 여기에는 다음이 포함됩니다.

헤더 섹션:

테마(시간여행!)를 설정하기 위한 제목과 부제목입니다.

양식 본문:

이메일 입력란
인터랙티브 애니메이션을 실행하는 '구독' 버튼.

바닥글 섹션:

피드백을 위한 상태 메시지입니다.
제출 후 시각적 진행 상황을 보여주는 로딩 바

더 많은 참여를 유도하기 위해 오른쪽 상단에 '커피 사주세요' 버튼을 추가하여 사용자의 프로젝트 지원을 은은하게 독려했습니다.

<div>



<p>Step 2: Styling for a Futuristic Look</p>

<p>The design needed to feel high-tech, so we focused on:</p>

<ul>
<li>Neon Colors: Bright, glowing colors for a sci-fi vibe.</li>
<li>Smooth Transitions: Subtle animations to make the UI feel alive.</li>
<li>Responsive Design: Ensuring the form looked great on all devices.</li>
</ul>

<p>Key styles included:</p>

<p>A glowing neon effect using text-shadow.<br>
Background animations with @keyframes to create a dynamic atmosphere.<br>
Button hover effects for an interactive feel.</p>

<p>CSS Code<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Orbitron', sans-serif;
  background: radial-gradient(circle, #1b2735, #090a0f);
  color: #fff;
  margin: 0;
  padding: 0;
  overflow: hidden;
  animation: backgroundGlow 10s infinite alternate;
}

@keyframes backgroundGlow {
  0% {
    background: radial-gradient(circle, #1b2735, #090a0f);
  }
  100% {
    background: radial-gradient(circle, #202d42, #0d0f1a);
  }
}

.newsletter-container {
  position: relative;
  width: 80%;
  max-width: 500px;
  margin: 100px auto;
  background: linear-gradient(135deg, #2b5876, #4e4376);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.1);
}

.coffee-button {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.coffee-button img {
  width: 150px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.coffee-button:hover img {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(255, 223, 0, 0.5);
}

로그인 후 복사

3단계: 상호작용 추가

우리는 양식이 생생하고 반응성이 좋기를 원했기 때문에 JavaScript를 사용하여 다음을 수행했습니다.

이메일 필드를 확인하세요.
동적 메시지(오류, 성공, 로딩)를 표시합니다.
시각적 피드백을 위해 로딩 표시줄을 애니메이션화합니다.

자바스크립트 코드

const subscribeBtn = document.getElementById('subscribe-btn');
const emailInput = document.getElementById('email');
const statusMessage = document.querySelector('.status-message');

subscribeBtn.addEventListener('click', () => {
  const email = emailInput.value.trim();

  if (!email) {
    statusMessage.textContent = '⛔️ Please enter a valid email address!';
    statusMessage.style.color = '#ff4d4d';
    return;
  }

  statusMessage.textContent = '⏳ Calculating time coordinates...';
  statusMessage.style.color = '#ffc107';

  setTimeout(() => {
    statusMessage.textContent = '✅ Coordinates verified! Welcome to the future.';
    statusMessage.style.color = '#00ff99';
    emailInput.value = '';
  }, 3000);
});

로그인 후 복사

4단계: 테스트 및 배포

원활한 경험을 보장하려면: