Webleb - Snippets de Código

HTML

<!DOCTYPE html>

<head>

<title>Ultra Transparent Login</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {

/* --- ŞEFFAF AYARLAR --- */

/* Arka plan rengini neredeyse sıfıra indirdik, sadece blur kalacak */

--glass-bg: rgba(255, 255, 255, 0.02);

--glass-border: rgba(255, 255, 255, 0.15);

--glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

--primary-accent: #4ade80; /* Biraz daha soft, parlak yeşil */

--text-color: #ffffff;

--text-muted: rgba(255, 255, 255, 0.7);

/* Inputlar da şeffaf */

--input-bg: rgba(255, 255, 255, 0.05);

--input-border: rgba(255, 255, 255, 0.2);

--input-focus-border: rgba(74, 222, 128, 0.6);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body {

height: 100vh;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

background-color: #000;

}

/* --- ARKA PLAN (SİNEMATİK) --- */

.bg-image {

position: absolute;

top: 0; left: 0; width: 100%; height: 100%;

/* Monstera Yaprakları - Koyu ve Moody */

background-image: url('https://images.unsplash.com/photo-1485627658391-1365e4e0dbfe?q=80&w=2000&auto=format&fit=crop');

background-size: cover;

background-position: center;

z-index: -1;

/* Görselin orijinal renklerini koruyoruz, sadece hafif bir kontrast */

filter: contrast(1.1) brightness(0.7);

transition: transform 2.5s ease-out;

}

body.loaded .bg-image {

transform: scale(1.03); /* Çok hafif zoom hareketi */

}

/* --- ULTRA ŞEFFAF KART --- */

.glass-container {

width: 400px;

min-height: 550px;

/* Siyah arka plan YOK. Sadece şeffaflık ve blur. */

background: var(--glass-bg);

/* Buzlu Cam Efekti */

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

/* İnce, zarif çerçeve */

border: 1px solid var(--glass-border);

border-radius: 20px;

/* Hafif gölge (kartın sınırlarını belli etmek için) */

box-shadow: var(--glass-shadow);

padding: 40px;

position: relative;

overflow: hidden;

display: flex;

flex-direction: column;

justify-content: center;

}

/* Işık Yansıması (Glossy Effect) */

.glass-container::before {

content: '';

position: absolute;

top: 0; left: -50%;

width: 100%; height: 100%;

background: linear-gradient(to right, transparent, rgba(255,255,255,0.03), transparent);

transform: skewX(-25deg);

pointer-events: none;

}

.form-content {

transition: all 0.5s ease;

position: absolute;

width: calc(100% - 80px); /* Padding düşüldü */

top: 50%;

transform: translateY(-50%);

opacity: 1;

pointer-events: all;

}

.form-content.hidden-left {

opacity: 0;

transform: translate(-50px, -50%);

pointer-events: none;

}

.form-content.hidden-right {

opacity: 0;

transform: translate(50px, -50%);

pointer-events: none;

}

/* --- BAŞLIKLAR --- */

h2 {

font-size: 2rem;

font-weight: 500;

color: var(--text-color);

text-align: center;

margin-bottom: 5px;

text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Yazı okunabilirliği için */

}

p.subtitle {

text-align: center;

color: var(--text-muted);

font-size: 0.9rem;

margin-bottom: 30px;

font-weight: 300;

}

/* --- INPUT ALANLARI --- */

.input-group {

position: relative;

margin-bottom: 20px;

}

.input-group input {

width: 100%;

padding: 12px 15px 12px 45px;

/* Input içi de şeffaf */

background: var(--input-bg);

border: 1px solid var(--input-border);

border-radius: 10px;

color: white;

font-size: 0.95rem;

outline: none;

transition: all 0.3s ease;

}

.input-group input::placeholder {

color: rgba(255, 255, 255, 0.5);

}

.input-group input:focus {

background: rgba(255, 255, 255, 0.1);

border-color: var(--input-focus-border);

box-shadow: 0 0 10px rgba(74, 222, 128, 0.2);

}

/* İkonlar */

.input-group .icon {

position: absolute;

left: 14px;

top: 50%;

transform: translateY(-50%);

width: 20px;

height: 20px;

fill: rgba(255, 255, 255, 0.6);

transition: 0.3s;

}

.input-group input:focus ~ .icon {

fill: var(--primary-accent);

}

/* --- BUTON --- */

.btn {

width: 100%;

padding: 12px;

border: none;

border-radius: 10px;

/* Buton da yarı şeffaf, ama vurgulu */

background: rgba(255, 255, 255, 0.15);

backdrop-filter: blur(5px);

border: 1px solid rgba(255,255,255,0.2);

color: white;

font-size: 1rem;

font-weight: 500;

cursor: pointer;

transition: all 0.3s;

margin-top: 10px;

}

.btn:hover {

background: var(--primary-accent);

color: #000; /* Yeşil üstüne siyah yazı */

box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);

border-color: transparent;

}

/* --- LİNKLER --- */

.options {

display: flex;

justify-content: space-between;

align-items: center;

font-size: 0.85rem;

margin-bottom: 20px;

color: var(--text-muted);

}

.options a { color: var(--text-color); text-decoration: none; transition: 0.3s; }

.options a:hover { color: var(--primary-accent); text-shadow: 0 0 5px rgba(74,222,128,0.5); }

.switch-text {

text-align: center;

margin-top: 20px;

font-size: 0.9rem;

color: var(--text-muted);

}

.switch-text span {

color: var(--text-color);

font-weight: 600;

cursor: pointer;

margin-left: 5px;

transition: 0.3s;

}

.switch-text span:hover { color: var(--primary-accent); }

/* Hata Mesajı */

.error {

color: #ff6b6b;

font-size: 0.8rem;

margin-top: 5px;

display: none;

text-shadow: 0 1px 2px rgba(0,0,0,0.5);

}

/* Checkbox Özelleştirme */

input[type="checkbox"] {

accent-color: var(--primary-accent);

margin-right: 5px;

}

@media (max-width: 480px) {

.glass-container { width: 90%; min-height: 500px; padding: 30px; }

.form-content { width: calc(100% - 60px); }

}

</style>

</head>

<p class="subtitle">Welcome back to nature.</p>

</div>

</div>

<label><input type="checkbox"> Remember me</label>

<a href="#">Forgot Password?</a>

</div>

<button type="submit" class="btn">Login</button>

New here? <span onclick="switchForm('register')">Create Account</span>

</div>

</form>

</div>

<p class="subtitle">Join the green side.</p>

</div>

</div>

</div>

<div class="error" id="err">Passwords do not match</div>

</div>

Already a member? <span onclick="switchForm('login')">Login</span>

</div>

</form>

</div>

const loginForm = document.getElementById('loginForm');

const registerForm = document.getElementById('registerForm');

function switchForm(to) {

if(to === 'register') {

loginForm.classList.add('hidden-left');

setTimeout(() => registerForm.classList.remove('hidden-right'), 100);

} else {

registerForm.classList.add('hidden-right');

setTimeout(() => loginForm.classList.remove('hidden-left'), 100);

}

function handleLogin(e) {

e.preventDefault();

const btn = e.target.querySelector('button');

const original = btn.innerText;

btn.innerText = "Processing...";

btn.style.background = "var(--primary-accent)";

btn.style.color = "#000";

setTimeout(() => {

alert("Login Successful!");

btn.innerText = original;

btn.style.background = "";

btn.style.color = "";

}, 1000);

}

function handleRegister(e) {

e.preventDefault();

const p1 = document.getElementById('rPass').value;

const p2 = document.getElementById('rPassConf').value;

const err = document.getElementById('err');

if(p1 !== p2) {

err.style.display = 'block';

return false;

}

err.style.display = 'none';

const btn = e.target.querySelector('button');

const original = btn.innerText;

btn.innerText = "Creating...";

setTimeout(() => {

alert("Account Created!");

btn.innerText = original;

switchForm('login');

}, 1000);

}

// Input focus'ta hatayı sil

document.querySelectorAll('input').forEach(i => {

i.addEventListener('focus', () => document.getElementById('err').style.display = 'none');

});

</script>

</body>

</html>

Metehan

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS