Webleb - HTML UI Elements - Un codice di Mete

HTML

<!DOCTYPE html>

<head>

<title>Small Bear Login Form</title>

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

font-family: sans-serif;

}

body {

background-color: #d8c2ef; /* Pastel mor arka plan */

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.container {

background-color: #ffffff;

position: relative;

width: 18em; /* Küçültüldü: 22em -> 18em */

height: 24em; /* Küçültüldü: 30em -> 24em */

border-radius: 0.8em;

box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.3);

display: flex;

align-items: center;

justify-content: center;

}

form {

position: absolute;

z-index: 2;

width: 15em; /* Küçültüldü: 18em -> 15em */

margin-top: 7em; /* Küçültüldü: 10em -> 7em */

}

label {

font-size: 0.85em; /* Küçültüldü: 0.9em -> 0.85em */

color: #544c4c;

font-weight: 600;

}

input {

width: 100%;

font-size: 0.85em; /* Küçültüldü: 0.9em -> 0.85em */

padding: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

border: none;

border-bottom: 2px solid #b4ac95;

margin-bottom: 0.8em; /* Küçültüldü: 1em -> 0.8em */

outline: none;

}

button {

width: 100%;

font-size: 0.9em; /* Küçültüldü: 1em -> 0.9em */

background-color: #663d17;

color: #ffffff;

border: none;

padding: 0.7em 0; /* Küçültüldü: 0.8em -> 0.7em */

border-radius: 0.3em;

margin-top: 0.8em; /* Küçültüldü: 1em -> 0.8em */

cursor: pointer;

}

button:hover {

background-color: #8b5a2b;

}

/* Bear Ears */

.ear-l,

.ear-r {

background-color: #8b5a2b;

height: 4em; /* Küçültüldü: 5em -> 4em */

width: 4em; /* Küçültüldü: 5em -> 4em */

border-radius: 50%;

position: absolute;

top: -1.2em; /* Küçültüldü: -1.5em -> -1.2em */

}

.ear-l {

left: 1.8em; /* Küçültüldü: 2em -> 1.8em */

}

.ear-r {

right: 1.8em; /* Küçültüldü: 2em -> 1.8em */

}

.ear-l:before,

.ear-r:before {

position: absolute;

content: "";

height: 2.4em; /* Küçültüldü: 3em -> 2.4em */

width: 2.4em; /* Küçültüldü: 3em -> 2.4em */

background-color: #d8b596;

border-radius: 50%;

top: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.ear-l:before {

left: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.ear-r:before {

right: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

/* Bear Face */

.bear-face {

position: absolute;

background-color: #8b5a2b;

height: 9.5em; /* Küçültüldü: 12em -> 9.5em */

width: 11em; /* Küçültüldü: 14em -> 11em */

border-radius: 50%;

top: -1.2em; /* Küçültüldü: -1.5em -> -1.2em */

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

/* Eyes */

.eye-l,

.eye-r {

background-color: #ffffff;

height: 2em; /* Küçültüldü: 2.5em -> 2em */

width: 1.8em; /* Küçültüldü: 2.3em -> 1.8em */

border-radius: 50%;

position: absolute;

top: 2em; /* Küçültüldü: 2.5em -> 2em */

}

.eye-l {

left: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.eye-r {

right: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.eyeball-l,

.eyeball-r {

background-color: #000000;

height: 0.8em; /* Küçültüldü: 1em -> 0.8em */

width: 0.8em; /* Küçültüldü: 1em -> 0.8em */

border-radius: 50%;

position: absolute;

top: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

.eyeball-l {

left: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

.eyeball-r {

right: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

/* Blush */

.blush-l,

.blush-r {

background-color: #e5a190;

height: 1em; /* Küçültüldü: 1.3em -> 1em */

width: 1em; /* Küçültüldü: 1.3em -> 1em */

border-radius: 50%;

position: absolute;

top: 4.5em; /* Küçültüldü: 6em -> 4.5em */

opacity: 0.7;

}

.blush-l {

left: 1.6em; /* Küçültüldü: 2em -> 1.6em */

}

.blush-r {

right: 1.6em; /* Küçültüldü: 2em -> 1.6em */

}

/* Snout */

.snout {

position: absolute;

background-color: #d8b596;

height: 4em; /* Küçültüldü: 5em -> 4em */

width: 5.5em; /* Küçültüldü: 7em -> 5.5em */

border-radius: 50%;

top: 4em; /* Küçültüldü: 5em -> 4em */

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

/* Nose */

.nose {

background-color: #000000;

height: 1em; /* Küçültüldü: 1.2em -> 1em */

width: 1.2em; /* Küçültüldü: 1.5em -> 1.2em */

border-radius: 50%;

position: relative;

top: 0.2em;

}

/* Mouth */

.mouth {

height: 0.6em; /* Küçültüldü: 0.8em -> 0.6em */

width: 1em; /* Küçültüldü: 1.3em -> 1em */

border-bottom: 0.25em solid #000000; /* Küçültüldü: 0.3em -> 0.25em */

border-radius: 50%;

position: relative;

top: 0.6em; /* Küçültüldü: 0.8em -> 0.6em */

}

/* Hands */

.hand-l,

.hand-r {

background-color: #8b5a2b;

height: 2.5em; /* Küçültüldü: 3em -> 2.5em */

width: 2.5em; /* Küçültüldü: 3em -> 2.5em */

border-radius: 50%;

position: absolute;

bottom: 3.5em; /* Küçültüldü: 4.5em -> 3.5em */

}

.hand-l {

left: -0.8em; /* Küçültüldü: -1em -> -0.8em */

transform: rotate(-35deg);

}

.hand-r {

right: -0.8em; /* Küçültüldü: -1em -> -0.8em */

transform: rotate(35deg);

}

/* Paws */

.paw-l,

.paw-r {

background-color: #8b5a2b;

height: 2.8em; /* Küçültüldü: 3.5em -> 2.8em */

width: 3.2em; /* Küçültüldü: 4em -> 3.2em */

border-radius: 50%;

position: absolute;

bottom: -0.8em; /* Küçültüldü: -1em -> -0.8em */

}

.paw-l {

left: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.paw-r {

right: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.paw-l:before,

.paw-r:before {

position: absolute;

content: "";

height: 1.6em; /* Küçültüldü: 2em -> 1.6em */

width: 1.6em; /* Küçültüldü: 2em -> 1.6em */

background-color: #d8b596;

border-radius: 50%;

bottom: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

.paw-l:before {

left: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.paw-r:before {

right: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

/* Paw Fingers */

.paw-l:after,

.paw-r:after {

position: absolute;

content: "";

height: 0.25em; /* Küçültüldü: 0.3em -> 0.25em */

width: 1.6em; /* Küçültüldü: 2em -> 1.6em */

background-color: #000000;

border-radius: 0.1em;

bottom: 1em; /* Küçültüldü: 1.3em -> 1em */

}

.paw-l:after {

left: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.paw-r:after {

right: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

</style>

</head>

<body>

<form>

<label for="username">Username:</label>

<label for="password">Password:</label>

<button>Login</button>

</form>

</div>

</div>

</div>

</div>

document.addEventListener("DOMContentLoaded", function() {

// Göz hareketlerini izleme

const container = document.querySelector(".container");

const eyeballL = document.querySelector(".eyeball-l");

const eyeballR = document.querySelector(".eyeball-r");

container.addEventListener("mousemove", (e) => {

const x = e.clientX;

const y = e.clientY;

const rect = container.getBoundingClientRect();

const centerX = rect.left + rect.width / 2;

const centerY = rect.top + rect.height / 2;

const angleX = (x - centerX) / 30;

const angleY = (y - centerY) / 30;

// Göz bebeklerinin hareketini sınırla

const maxMove = 0.4; // Küçültüldü: 0.5 -> 0.4

const moveX = Math.max(-maxMove, Math.min(maxMove, angleX));

const moveY = Math.max(-maxMove, Math.min(maxMove, angleY));

eyeballL.style.transform = `translate(${moveX}em, ${moveY}em)`;

eyeballR.style.transform = `translate(${moveX}em, ${moveY}em)`;

});

// Giriş butonu animasyonu

const loginButton = document.querySelector("button");

loginButton.addEventListener("mousedown", () => {

const handL = document.querySelector(".hand-l");

const handR = document.querySelector(".hand-r");

handL.style.transition = "all 0.3s ease";

handR.style.transition = "all 0.3s ease";

handL.style.transform = "rotate(-15deg) translateY(-0.8em)"; // Küçültüldü: -1em -> -0.8em

handR.style.transform = "rotate(15deg) translateY(-0.8em)"; // Küçültüldü: -1em -> -0.8em

setTimeout(() => {

handL.style.transform = "rotate(-35deg)";

handR.style.transform = "rotate(35deg)";

handL.style.transition = "all 0.5s ease";

handR.style.transition = "all 0.5s ease";

}, 300);

});

// Form gönderme olayını engelle (örnek amaçlı)

const form = document.querySelector("form");

form.addEventListener("submit", (e) => {

e.preventDefault();

const username = document.getElementById("username").value;

const password = document.getElementById("password").value;

if (username && password) {

alert("Giriş başarılı! (Bu sadece bir demo)");

} else {

alert("Lütfen kullanıcı adı ve şifre girin!");

}

});

</script>

</body>

</html>

Un codice di Mete

Consigliato

Effetto di confusione del testo

Generatore di Password

Neon pulsante

HTML

CSS

JS

Consigliato

Effetto di confusione del testo

Generatore di Password

Neon pulsante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS