Webleb - UI Elements - Mete'nin bir kodu

HTML

CSS

<!DOCTYPE html>

<head>

<title>Kullanıcı Giriş Sistemi</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: #000;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

perspective: 1000px;

overflow: hidden;

position: relative;

}

.circuit-background {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

transform-style: preserve-3d;

animation: rotate 60s infinite linear;

opacity: 0.4;

}

@keyframes rotate {

0% {

transform: rotateY(0deg) rotateX(10deg);

}

100% {

transform: rotateY(360deg) rotateX(10deg);

}

.container {

background-color: rgba(255, 255, 255, 0.95);

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 255, 0, 0.3);

padding: 30px;

width: 400px;

max-width: 90%;

position: relative;

z-index: 10;

backdrop-filter: blur(5px);

border: 1px solid rgba(100, 255, 100, 0.3);

}

/* 3D Circuit Board Styling */

.circuit-board {

width: 150%;

height: 150%;

position: absolute;

top: -25%;

left: -25%;

transform-style: preserve-3d;

transform: rotateX(60deg) rotateZ(-45deg);

}

.pcb {

position: absolute;

width: 100%;

height: 100%;

background: linear-gradient(45deg, #0a6e0a, #25a025);

transform: translateZ(-20px);

background-image:

linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),

linear-gradient(0deg, rgba(255,255,255,0.1) 1px, transparent 1px);

background-size: 50px 50px;

box-shadow: 0 0 40px rgba(0, 100, 0, 0.8);

}

.components {

position: absolute;

width: 100%;

height: 100%;

background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);

background-size: 30px 30px;

}

.chips {

position: absolute;

width: 100%;

height: 100%;

}

.chips:before {

content: "";

position: absolute;

top: 30%;

left: 40%;

width: 120px;

height: 120px;

background-color: #444;

transform: translateZ(10px);

box-shadow: 0 0 10px rgba(0,0,0,0.5);

}

.chips:after {

content: "";

position: absolute;

top: 50%;

left: 60%;

width: 80px;

height: 80px;

background-color: #555;

transform: translateZ(8px);

box-shadow: 0 0 10px rgba(0,0,0,0.5);

}

.connectors.left:before {

content: "";

position: absolute;

left: 10%;

top: 20%;

height: 60%;

width: 30px;

background-color: #333;

transform: translateZ(5px);

}

.connectors.right:before {

content: "";

position: absolute;

right: 10%;

top: 20%;

height: 60%;

width: 30px;

background-color: #333;

transform: translateZ(5px);

}

.tab-container {

display: flex;

margin-bottom: 20px;

border-bottom: 1px solid #e0e0e0;

}

.tab {

padding: 10px 20px;

cursor: pointer;

font-weight: 500;

color: #666;

position: relative;

}

.active-tab {

color: #4285f4;

}

.active-tab::after {

content: '';

position: absolute;

bottom: -1px;

left: 0;

width: 100%;

height: 2px;

background-color: #4285f4;

}

.form-group {

margin-bottom: 20px;

}

label {

display: block;

margin-bottom: 8px;

font-size: 14px;

color: #555;

}

input {

width: 100%;

padding: 12px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 16px;

transition: border-color 0.3s;

}

input:focus {

border-color: #4285f4;

outline: none;

}

button {

background-color: #4285f4;

color: white;

border: none;

border-radius: 4px;

padding: 12px;

width: 100%;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s;

}

button:hover {

background-color: #3367d6;

}

.forgot-password {

text-align: right;

margin-top: -10px;

margin-bottom: 20px;

}

.forgot-password a {

color: #4285f4;

text-decoration: none;

font-size: 14px;

}

.forgot-password a:hover {

text-decoration: underline;

}

.form-content {

display: none;

}

.active-form {

display: block;

}

.register-link {

text-align: center;

margin-top: 20px;

font-size: 14px;

color: #666;

}

.register-link a {

color: #4285f4;

text-decoration: none;

}

.register-link a:hover {

text-decoration: underline;

}

</style>

</head>

<body>

</div>

<div class="tab active-tab" id="login-tab" onclick="showTab('login')">Giriş Yap</div>

</div>

<label for="username">Kullanıcı Adı</label>

</div>

<label for="password">Şifre</label>

</div>

<a href="#" onclick="showTab('forgot')">Şifremi unuttum</a>

</div>

<button type="submit">Giriş Yap</button>

Hesabınız yok mu? <a href="#" onclick="showTab('register')">Yeni üye oluştur</a>

</div>

<label for="new-username">Kullanıcı Adı</label>

</div>

<label for="email">E-posta</label>

</div>

<label for="new-password">Şifre</label>

</div>

<label for="confirm-password">Şifre Tekrar</label>

</div>

<button type="submit">Kayıt Ol</button>

Zaten hesabınız var mı? <a href="#" onclick="showTab('login')">Giriş yap</a>

</div>

<label for="forgot-email">E-posta</label>

</div>

<button type="submit">Şifre Sıfırlama Bağlantısı Gönder</button>

<a href="#" onclick="showTab('login')">Giriş sayfasına dön</a>

</div>

function showTab(tabName) {

// Hide all forms

document.getElementById('login-form').classList.remove('active-form');

document.getElementById('register-form').classList.remove('active-form');

document.getElementById('forgot-form').classList.remove('active-form');

// Remove active class from tabs

document.getElementById('login-tab').classList.remove('active-tab');

document.getElementById('register-tab').classList.remove('active-tab');

// Show selected form

document.getElementById(tabName + '-form').classList.add('active-form');

// If login or register tab, add active class

if (tabName === 'login' || tabName === 'register') {

document.getElementById(tabName + '-tab').classList.add('active-tab');

}

// Add dynamic circuit elements to enhance 3D effect

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

const circuitBoard = document.querySelector('.circuit-board');

// Create random circuit traces

for (let i = 0; i < 50; i++) {

const trace = document.createElement('div');

trace.className = 'circuit-trace';

trace.style.position = 'absolute';

trace.style.height = '2px';

trace.style.width = Math.random() * 100 + 50 + 'px';

trace.style.backgroundColor = 'rgba(0, 255, 100, 0.5)';

trace.style.top = Math.random() * 100 + '%';

trace.style.left = Math.random() * 100 + '%';

trace.style.transform = 'translateZ(' + (Math.random() * 5) + 'px) rotate(' + (Math.random() * 360) + 'deg)';

trace.style.boxShadow = '0 0 5px rgba(0, 255, 0, 0.7)';

circuitBoard.appendChild(trace);

}

// Create random component elements

for (let i = 0; i < 30; i++) {

const component = document.createElement('div');

component.className = 'component';

component.style.position = 'absolute';

// Randomize component type

const type = Math.floor(Math.random() * 4);

if (type === 0) { // Capacitor

component.style.width = '10px';

component.style.height = '20px';

component.style.backgroundColor = '#ddd';

component.style.borderRadius = '5px';

} else if (type === 1) { // Resistor

component.style.width = '25px';

component.style.height = '8px';

component.style.backgroundColor = '#a37b45';

} else if (type === 2) { // Small chip

component.style.width = '15px';

component.style.height = '15px';

component.style.backgroundColor = '#333';

} else { // LED

component.style.width = '6px';

component.style.height = '6px';

component.style.backgroundColor = 'red';

component.style.borderRadius = '50%';

component.style.boxShadow = '0 0 5px red';

}

component.style.top = Math.random() * 100 + '%';

component.style.left = Math.random() * 100 + '%';

component.style.transform = 'translateZ(' + (Math.random() * 8 + 2) + 'px)';

circuitBoard.appendChild(component);

}

});

</script>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

<title>Kullanıcı Giriş Sistemi</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: #000;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

perspective: 1000px;

overflow: hidden;

position: relative;

}

.circuit-background {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

transform-style: preserve-3d;

animation: rotate 60s infinite linear;

opacity: 0.4;

}

@keyframes rotate {

0% {

transform: rotateY(0deg) rotateX(10deg);

}

100% {

transform: rotateY(360deg) rotateX(10deg);

}

.container {

background-color: rgba(255, 255, 255, 0.95);

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 255, 0, 0.3);

padding: 30px;

width: 400px;

max-width: 90%;

position: relative;

z-index: 10;

backdrop-filter: blur(5px);

border: 1px solid rgba(100, 255, 100, 0.3);

}

/* 3D Circuit Board Styling */

.circuit-board {

width: 150%;

height: 150%;

position: absolute;

top: -25%;

left: -25%;

transform-style: preserve-3d;

transform: rotateX(60deg) rotateZ(-45deg);

}

.pcb {

position: absolute;

width: 100%;

height: 100%;

background: linear-gradient(45deg, #0a6e0a, #25a025);

transform: translateZ(-20px);

background-image:

linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),

linear-gradient(0deg, rgba(255,255,255,0.1) 1px, transparent 1px);

background-size: 50px 50px;

box-shadow: 0 0 40px rgba(0, 100, 0, 0.8);

}

.components {

position: absolute;

width: 100%;

height: 100%;

background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);

background-size: 30px 30px;

}

.chips {

position: absolute;

width: 100%;

height: 100%;

}

.chips:before {

content: "";

position: absolute;

top: 30%;

left: 40%;

width: 120px;

height: 120px;

background-color: #444;

transform: translateZ(10px);

box-shadow: 0 0 10px rgba(0,0,0,0.5);

}

.chips:after {

content: "";

position: absolute;

top: 50%;

left: 60%;

width: 80px;

height: 80px;

background-color: #555;

transform: translateZ(8px);

box-shadow: 0 0 10px rgba(0,0,0,0.5);

}

.connectors.left:before {

content: "";

position: absolute;

left: 10%;

top: 20%;

height: 60%;

width: 30px;

background-color: #333;

transform: translateZ(5px);

}

.connectors.right:before {

content: "";

position: absolute;

right: 10%;

top: 20%;

height: 60%;

width: 30px;

background-color: #333;

transform: translateZ(5px);

}

.tab-container {

display: flex;

margin-bottom: 20px;

border-bottom: 1px solid #e0e0e0;

}

.tab {

padding: 10px 20px;

cursor: pointer;

font-weight: 500;

color: #666;

position: relative;

}

.active-tab {

color: #4285f4;

}

.active-tab::after {

content: '';

position: absolute;

bottom: -1px;

left: 0;

width: 100%;

height: 2px;

background-color: #4285f4;

}

.form-group {

margin-bottom: 20px;

}

label {

display: block;

margin-bottom: 8px;

font-size: 14px;

color: #555;

}

input {

width: 100%;

padding: 12px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 16px;

transition: border-color 0.3s;

}

input:focus {

border-color: #4285f4;

outline: none;

}

button {

background-color: #4285f4;

color: white;

border: none;

border-radius: 4px;

padding: 12px;

width: 100%;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s;

}

button:hover {

background-color: #3367d6;

}

.forgot-password {

text-align: right;

margin-top: -10px;

margin-bottom: 20px;

}

.forgot-password a {

color: #4285f4;

text-decoration: none;

font-size: 14px;

}

.forgot-password a:hover {

text-decoration: underline;

}

.form-content {

display: none;

}

.active-form {

display: block;

}

.register-link {

text-align: center;

margin-top: 20px;

font-size: 14px;

color: #666;

}

.register-link a {

color: #4285f4;

text-decoration: none;

}

.register-link a:hover {

text-decoration: underline;

}

</style>

</head>

<body>

</div>

<div class="tab active-tab" id="login-tab" onclick="showTab('login')">Giriş Yap</div>

</div>

<label for="username">Kullanıcı Adı</label>

</div>

<label for="password">Şifre</label>

</div>

<a href="#" onclick="showTab('forgot')">Şifremi unuttum</a>

</div>

<button type="submit">Giriş Yap</button>

Hesabınız yok mu? <a href="#" onclick="showTab('register')">Yeni üye oluştur</a>

</div>

<label for="new-username">Kullanıcı Adı</label>

</div>

<label for="email">E-posta</label>

</div>

<label for="new-password">Şifre</label>

</div>

<label for="confirm-password">Şifre Tekrar</label>

</div>

<button type="submit">Kayıt Ol</button>

Zaten hesabınız var mı? <a href="#" onclick="showTab('login')">Giriş yap</a>

</div>

<label for="forgot-email">E-posta</label>

</div>

<button type="submit">Şifre Sıfırlama Bağlantısı Gönder</button>

<a href="#" onclick="showTab('login')">Giriş sayfasına dön</a>

</div>

function showTab(tabName) {

// Hide all forms

document.getElementById('login-form').classList.remove('active-form');

document.getElementById('register-form').classList.remove('active-form');

document.getElementById('forgot-form').classList.remove('active-form');

// Remove active class from tabs

document.getElementById('login-tab').classList.remove('active-tab');

document.getElementById('register-tab').classList.remove('active-tab');

// Show selected form

document.getElementById(tabName + '-form').classList.add('active-form');

// If login or register tab, add active class

if (tabName === 'login' || tabName === 'register') {

document.getElementById(tabName + '-tab').classList.add('active-tab');

}

// Add dynamic circuit elements to enhance 3D effect

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

const circuitBoard = document.querySelector('.circuit-board');

// Create random circuit traces

for (let i = 0; i < 50; i++) {

const trace = document.createElement('div');

trace.className = 'circuit-trace';

trace.style.position = 'absolute';

trace.style.height = '2px';

trace.style.width = Math.random() * 100 + 50 + 'px';

trace.style.backgroundColor = 'rgba(0, 255, 100, 0.5)';

trace.style.top = Math.random() * 100 + '%';

trace.style.left = Math.random() * 100 + '%';

trace.style.transform = 'translateZ(' + (Math.random() * 5) + 'px) rotate(' + (Math.random() * 360) + 'deg)';

trace.style.boxShadow = '0 0 5px rgba(0, 255, 0, 0.7)';

circuitBoard.appendChild(trace);

}

// Create random component elements

for (let i = 0; i < 30; i++) {

const component = document.createElement('div');

component.className = 'component';

component.style.position = 'absolute';

// Randomize component type

const type = Math.floor(Math.random() * 4);

if (type === 0) { // Capacitor

component.style.width = '10px';

component.style.height = '20px';

component.style.backgroundColor = '#ddd';

component.style.borderRadius = '5px';

} else if (type === 1) { // Resistor

component.style.width = '25px';

component.style.height = '8px';

component.style.backgroundColor = '#a37b45';

} else if (type === 2) { // Small chip

component.style.width = '15px';

component.style.height = '15px';

component.style.backgroundColor = '#333';

} else { // LED

component.style.width = '6px';

component.style.height = '6px';

component.style.backgroundColor = 'red';

component.style.borderRadius = '50%';

component.style.boxShadow = '0 0 5px red';

}

component.style.top = Math.random() * 100 + '%';

component.style.left = Math.random() * 100 + '%';

component.style.transform = 'translateZ(' + (Math.random() * 8 + 2) + 'px)';

circuitBoard.appendChild(component);

}

});

</script>

</body>

</html>