Webleb - Snippets de Código -

1760 logicalbug531

Abrir no Editor Publique Seu Código

Recomendado

25 July 2025

Alternador de temas do modo escuro com LocalStorage

17 December 2025

Barra de navegação com ícones na parte inferior usando Tailwind CSS.

1 September 2025

Animação de olho CSS com trecho de código

HTML

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
<style>
*{
       padding: 0;
       margin: 0;
       box-sizing: border-box;
       font-family: "Poppins", sans-serif;
}

body{
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #191825;
}

.input-field{
       position: relative;
}

.input-field input{
       width: 350px;
       height: 60px;
       border-radius: 6px;
       font-size: 18px;
       padding: 0 15px;
       border: 2px solid #fff;
       background: transparent;
       outline: none;
       color: #fff;
}

.input-field label{
       position: absolute;
       top: 50%;
       left: 15px;
       transform: translateY(-50%);
       color: #fff;
       font-size: 19px;
       pointer-events: none;
       transition: .3s;
}

input:focus{
       border: 2px solid #1cd679;
}

input:focus ~ label,
input:valid ~ label{
       top: 0;
       font-size: 16px;
       padding: 0 10px;
       background: #191825;
}
 </body>
</html>

Recomendado

Alternador de temas do modo escuro com LocalStorage

Barra de navegação com ícones na parte inferior usando Tailwind CSS.

Animação de olho CSS com trecho de código

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS