WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1515
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
19 September 2024
Painel
19 July 2025
Fragmento HTML de animação de texto 3D
HTML
Copy
Andev web
Inicio
Nombre de usuario
Contraseña
Iniciar Sesión
Google
Facebook
CSS
Copy
*, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #1c1a21; } .background{ width: 430px; height: 520px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; } .background .shape{ height: 200px; width: 200px; position: absolute; border-radius: 50%; } .shape:first-child{ background: linear-gradient(#e80f0f, #be4370); left: -80px; top: -80px; } .shape:last-child{ background: linear-gradient(to right, #66ff2f, #6eb02b); right: -30px; bottom: -80px; } form{ height: 520px; width: 400px; background-color: rgba(255,255,255,0.13); position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 10px; backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.1); box-shadow: 0 0 40px rgba(8,7,16,0.6); padding: 50px 35px; } form *{ font-family: 'Poppins',sans-serif; color: #ffffff; letter-spacing: 0.5px; outline: none; border: none; } form h3{ font-size: 32px; font-weight: 500; line-height: 42px; text-align: center; } label{ display: block; margin-top: 30px; font-size: 16px; font-weight: 500; } input{ display: block; height: 50px; width: 100%; background-color: rgba(255,255,255,0.07); border-radius: 3px; padding: 0 10px; margin-top: 8px; font-size: 14px; font-weight: 300; } ::placeholder{ color: #e5e5e5; } button{ margin-top: 50px; width: 100%; background-color: #ffffff; color: #080710; padding: 15px 0; font-size: 18px; font-weight: 600; border-radius: 5px; cursor: pointer; } .social{ margin-top: 30px; display: flex; } .social div{ background: red; width: 150px; border-radius: 3px; padding: 5px 10px 10px 5px; background-color: rgba(255,255,255,0.27); color: #eaf0fb; text-align: center; } .social div:hover{ background-color: rgba(255,255,255,0.47); } .social .fb{ margin-left: 25px; } .social i{ margin-right: 4px; }
JS
Copy