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

HTML Staircase Structure with CSS Classes

HTML CSS Event Registration System Website

Moderm bir giriş sayfası

HTML

CSS

JS

Recommended

HTML Staircase Structure with CSS Classes

HTML CSS Event Registration System Website

Moderm bir giriş sayfası

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS