Webleb - UI Elements

HTML

CSS

<!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>

Validating your code, please wait...

HTML

CSS

<!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>