Webleb - UI Elements - Mete'nin bir kodu

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>

Mete'nin bir kodu

Recommended

Credit Card Form - VueJs

CSS & GSAP Animation Techniques

Futuristic Login Page Design with Glassmorphism

HTML

CSS

JS

Recommended

Credit Card Form - VueJs

CSS & GSAP Animation Techniques

Futuristic Login Page Design with Glassmorphism

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS