Un code de Mete

1024 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 April 2023

Barre de navigation CSS responsive

18 November 2025

Metehan

13 November 2024

Effet de cadre sur les images à l'aide de CSS pur

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Login & Signup</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --neon-red: #ff0040;
            --neon-pink: #ff1744;
            --neon-crimson: #dc143c;
            --electric-red: #ff073a;
            --dark-bg: #0a0a0a;
            --darker-bg: #050505;
            --glass-bg: rgba(255, 0, 64, 0.1);
            --glass-border: rgba(255, 23, 68, 0.3);
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            --text-muted: #888888;
            --success-neon: #00ff88;
            --warning-neon: #ffaa00;
            --gradient-main: linear-gradient(135deg, #ff0040 0%, #ff1744 50%, #dc143c 100%);
            --gradient-glass: linear-gradient(135deg, rgba(255, 0, 64, 0.2) 0%, rgba(255, 23, 68, 0.1) 100%);
            --shadow-neon: 0 0 20px rgba(255, 0, 64, 0.5);
            --shadow-strong: 0 0 40px rgba(255, 0, 64, 0.8);
            --border-radius: 16px;
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Rajdhani', sans-serif;
            background: var(--dark-bg);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

/* Animated Background */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(255, 0, 64, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 23, 68, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(220, 20, 60, 0.2) 0%, transparent 50%);
            animation: bgShift 8s ease-in-out infinite alternate;
            z-index: -1;
        }

@keyframes bgShift {
            0% { transform: scale(1) rotate(0deg); }
            100% { transform: scale(1.1) rotate(5deg); }
        }

.container-fluid {
            padding: 20px;
            position: relative;
            z-index: 1;
        }

/* Main Container */
        .auth-container {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 2px solid var(--glass-border);
            border-radius: 24px;
            box-shadow: var(--shadow-neon);
            overflow: hidden;
            max-width: 1200px;
            width: 100%;
            min-height: 700px;
            position: relative;
            animation: glow 3s ease-in-out infinite alternate;
        }

@keyframes glow {
            0% { box-shadow: var(--shadow-neon); }
            100% { box-shadow: var(--shadow-strong); }
        }

/* Toggle Buttons */
        .auth-toggle {
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 50px;
            padding: 5px;
            border: 1px solid var(--glass-border);
        }

.toggle-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 12px 30px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-family: 'Orbitron', monospace;
        }

.toggle-btn.active {
            background: var(--gradient-main);
            color: var(--text-primary);
            box-shadow: 0 0 15px rgba(255, 0, 64, 0.6);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

/* Cyber Grid Background */
        .cyber-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(255, 0, 64, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 0, 64, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: gridMove 20s linear infinite;
            opacity: 0.3;
        }

@keyframes gridMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }

/* Form Sections */
        .form-section {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 80px 40px 40px;
            min-height: 700px;
            position: relative;
        }

.form-container {
            width: 100%;
            max-width: 450px;
            opacity: 0;
            transform: translateY(30px);
            transition: var(--transition);
        }

.form-container.active {
            opacity: 1;
            transform: translateY(0);
        }

/* Neon Headers */
        .neon-title {
            font-family: 'Orbitron', monospace;
            font-size: 48px;
            font-weight: 900;
            text-align: center;
            margin-bottom: 10px;
            background: var(--gradient-main);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(255, 0, 64, 0.8);
            animation: neonPulse 2s ease-in-out infinite alternate;
        }

@keyframes neonPulse {
            0% { 
                filter: brightness(1);
                text-shadow: 0 0 30px rgba(255, 0, 64, 0.8);
            }
            100% { 
                filter: brightness(1.2);
                text-shadow: 0 0 40px rgba(255, 0, 64, 1);
            }
        }

.neon-subtitle {
            font-size: 18px;
            color: var(--text-secondary);
            text-align: center;
            margin-bottom: 40px;
            font-weight: 400;
        }

/* Cyber Form Groups */
        .cyber-form-group {
            margin-bottom: 25px;
            position: relative;
        }

.cyber-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--neon-red);
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Orbitron', monospace;
        }

.cyber-input-group {
            position: relative;
            display: flex;
            border-radius: var(--border-radius);
            overflow: hidden;
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid var(--glass-border);
            transition: var(--transition);
        }

.cyber-input-group:focus-within {
            border-color: var(--neon-red);
            box-shadow: 0 0 20px rgba(255, 0, 64, 0.4);
            transform: scale(1.02);
        }

.cyber-input-icon {
            background: var(--glass-bg);
            border: none;
            color: var(--neon-red);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            font-size: 16px;
            transition: var(--transition);
        }

.cyber-input-group:focus-within .cyber-input-icon {
            color: var(--text-primary);
            background: var(--neon-red);
            box-shadow: 0 0 15px rgba(255, 0, 64, 0.6);
        }

.cyber-input {
            border: none;
            padding: 16px 20px;
            font-size: 16px;
            background: transparent;
            color: var(--text-primary);
            transition: var(--transition);
            flex: 1;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 500;
        }

.cyber-input:focus {
            outline: none;
            background: rgba(255, 0, 64, 0.05);
        }

.cyber-input::placeholder {
            color: var(--text-muted);
            opacity: 0.8;
        }

/* Neon Button */
        .neon-btn {
            width: 100%;
            background: var(--gradient-main);
            border: none;
            border-radius: var(--border-radius);
            padding: 18px;
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 700;
            font-family: 'Orbitron', monospace;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 25px rgba(255, 0, 64, 0.5);
        }

.neon-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 35px rgba(255, 0, 64, 0.8);
            filter: brightness(1.1);
        }

.neon-btn:active {
            transform: translateY(0);
        }

.neon-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: var(--transition);
        }

.neon-btn:hover::before {
            left: 100%;
        }

/* Form Options */
        .cyber-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0 30px;
            font-size: 14px;
        }

.cyber-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
        }

.cyber-checkbox input[type="checkbox"] {
            appearance: none;
            width: 18px;
            height: 18px;
            border: 2px solid var(--neon-red);
            border-radius: 4px;
            position: relative;
            cursor: pointer;
            transition: var(--transition);
        }

.cyber-checkbox input[type="checkbox"]:checked {
            background: var(--neon-red);
            box-shadow: 0 0 10px rgba(255, 0, 64, 0.6);
        }

.cyber-checkbox input[type="checkbox"]:checked::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
        }

.cyber-link {
            color: var(--neon-red);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

.cyber-link:hover {
            color: var(--text-primary);
            text-shadow: 0 0 10px rgba(255, 0, 64, 0.8);
        }

/* Social Login */
        .cyber-divider {
            text-align: center;
            margin: 30px 0;
            position: relative;
        }

.cyber-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--neon-red), transparent);
        }

.cyber-divider span {
            background: var(--dark-bg);
            padding: 0 20px;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
        }

.social-cyber {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 30px;
        }

.social-cyber-btn {
            border: 2px solid var(--glass-border);
            background: var(--glass-bg);
            border-radius: var(--border-radius);
            padding: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
        }

.social-cyber-btn:hover {
            border-color: var(--neon-red);
            background: rgba(255, 0, 64, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 0, 64, 0.3);
            color: var(--text-primary);
        }

.social-cyber-btn i {
            font-size: 20px;
        }

/* Bottom Link */
        .bottom-link {
            text-align: center;
            color: var(--text-secondary);
            font-size: 14px;
        }

.cyber-switch-link {
            color: var(--neon-red);
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

.cyber-switch-link:hover {
            color: var(--text-primary);
            text-shadow: 0 0 10px var(--neon-red);
        }

/* Password Toggle */
        .password-toggle {
            cursor: pointer;
            background: var(--glass-bg);
            transition: var(--transition);
            color: var(--text-muted);
        }

.password-toggle:hover {
            color: var(--neon-red);
            background: rgba(255, 0, 64, 0.1);
        }

/* Loading Animation */
        .neon-btn.loading {
            pointer-events: none;
            opacity: 0.7;
        }

.neon-btn.loading::after {
            content: '';
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
            border-top: 2px solid var(--text-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
            display: inline-block;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .auth-container {
                margin: 10px;
                border-radius: 20px;
                min-height: 600px;
            }
            
            .form-section {
                padding: 100px 20px 20px;
            }
            
            .neon-title {
                font-size: 36px;
            }
            
            .auth-toggle {
                top: 20px;
            }
            
            .toggle-btn {
                padding: 10px 20px;
                font-size: 14px;
            }
            
            .social-cyber {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 480px) {
            .neon-title {
                font-size: 28px;
            }
            
            .cyber-input {
                padding: 14px 16px;
                font-size: 14px;
            }
            
            .neon-btn {
                padding: 16px;
                font-size: 16px;
            }
        }

/* Success/Error States */
        .cyber-input.success {
            border-color: var(--success-neon);
            box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
        }

.cyber-input.error {
            border-color: var(--warning-neon);
            box-shadow: 0 0 15px rgba(255, 170, 0, 0.3);
        }

/* Toast Notification */
        .cyber-toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: var(--border-radius);
            padding: 16px 20px;
            color: var(--text-primary);
            font-weight: 500;
            z-index: 9999;
            animation: slideInRight 0.4s ease-out;
            box-shadow: var(--shadow-neon);
        }

@keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid min-vh-100 d-flex align-items-center justify-content-center">
        <div class="auth-container">
            <div class="cyber-grid"></div>
            
            
            <div class="auth-toggle">
                <button class="toggle-btn active" onclick="showLogin()">Giriş Yap</button>
                <button class="toggle-btn" onclick="showSignup()">Üye Ol</button>
            </div>

<div class="form-section" id="loginSection">
                <div class="form-container active">
                    <div class="text-center mb-4">
                        <h1 class="neon-title">GİRİŞ</h1>
                        <p class="neon-subtitle">Hesabınıza giriş yapın</p>
                    </div>

<form id="loginForm">
                        
                        <div class="cyber-form-group">
                            <label class="cyber-label">E-mail Adresi</label>
                            <div class="cyber-input-group">
                                <span class="cyber-input-icon">
                                    <i class="fas fa-envelope"></i>
                                </span>
                                <input type="email" class="cyber-input" placeholder="E-mail adresinizi girin" required>
                            </div>
                        </div>

<div class="cyber-form-group">
                            <label class="cyber-label">Şifre</label>
                            <div class="cyber-input-group">
                                <span class="cyber-input-icon">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" class="cyber-input" id="loginPassword" placeholder="Şifrenizi girin" required>
                                <span class="cyber-input-icon password-toggle" onclick="togglePassword('loginPassword', this)">
                                    <i class="fas fa-eye"></i>
                                </span>
                            </div>
                        </div>

<div class="cyber-options">
                            <label class="cyber-checkbox">
                                <input type="checkbox" id="rememberLogin">
                                Beni Hatırla
                            </label>
                            <a href="#" class="cyber-link">Şifremi Unuttum?</a>
                        </div>

<button type="submit" class="neon-btn">
                            Giriş Yap
                        </button>

<div class="cyber-divider">
                            <span>veya devam et</span>
                        </div>

<div class="social-cyber">
                            <button type="button" class="social-cyber-btn" onclick="handleSocialLogin('Google')">
                                <i class="fab fa-google"></i>
                                <span>Google</span>
                            </button>
                            <button type="button" class="social-cyber-btn" onclick="handleSocialLogin('Facebook')">
                                <i class="fab fa-facebook-f"></i>
                                <span>Facebook</span>
                            </button>
                            <button type="button" class="social-cyber-btn" onclick="handleSocialLogin('Apple')">
                                <i class="fab fa-apple"></i>
                                <span>Apple</span>
                            </button>
                        </div>

<div class="bottom-link">
                            Hesabınız yok mu? <span class="cyber-switch-link" onclick="showSignup()">Üye Ol</span>
                        </div>
                    </form>
                </div>
            </div>

<div class="form-section" id="signupSection" style="display: none;">
                <div class="form-container">
                    <div class="text-center mb-4">
                        <h1 class="neon-title">ÜYE OL</h1>
                        <p class="neon-subtitle">Yeni hesabınızı oluşturun</p>
                    </div>

<form id="signupForm">
                        
                        <div class="cyber-form-group">
                            <label class="cyber-label">Ad Soyad</label>
                            <div class="cyber-input-group">
                                <span class="cyber-input-icon">
                                    <i class="fas fa-user"></i>
                                </span>
                                <input type="text" class="cyber-input" placeholder="Ad ve soyadınızı girin" required>
                            </div>
                        </div>

<div class="cyber-form-group">
                            <label class="cyber-label">E-mail Adresi</label>
                            <div class="cyber-input-group">
                                <span class="cyber-input-icon">
                                    <i class="fas fa-envelope"></i>
                                </span>
                                <input type="email" class="cyber-input" placeholder="E-mail adresinizi girin" required>
                            </div>
                        </div>

<div class="cyber-form-group">
                            <label class="cyber-label">Şifre</label>
                            <div class="cyber-input-group">
                                <span class="cyber-input-icon">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" class="cyber-input" id="signupPassword" placeholder="Şifrenizi girin" required>
                                <span class="cyber-input-icon password-toggle" onclick="togglePassword('signupPassword', this)">
                                    <i class="fas fa-eye"></i>
                                </span>
                            </div>
                        </div>

<div class="cyber-form-group">
                            <label class="cyber-label">Şifre Tekrar</label>
                            <div class="cyber-input-group">
                                <span class="cyber-input-icon">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" class="cyber-input" id="confirmPassword" placeholder="Şifrenizi tekrar girin" required>
                                <span class="cyber-input-icon password-toggle" onclick="togglePassword('confirmPassword', this)">
                                    <i class="fas fa-eye"></i>
                                </span>
                            </div>
                        </div>

<div class="cyber-options">
                            <label class="cyber-checkbox">
                                <input type="checkbox" id="agreeTerms" required>
                                <a href="#" class="cyber-link">Kullanım Şartları</a>'nı kabul ediyorum
                            </label>
                        </div>

<button type="submit" class="neon-btn">
                            Hesap Oluştur
                        </button>

<div class="cyber-divider">
                            <span>veya devam et</span>
                        </div>

<div class="bottom-link">
                            Zaten hesabınız var mı? <span class="cyber-switch-link" onclick="showLogin()">Giriş Yap</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Form switching functionality
        function showLogin() {
            document.getElementById('loginSection').style.display = 'flex';
            document.getElementById('signupSection').style.display = 'none';
            
            // Update toggle buttons
            document.querySelectorAll('.toggle-btn').forEach(btn => btn.classList.remove('active'));
            document.querySelectorAll('.toggle-btn')[0].classList.add('active');
            
            // Animate form
            setTimeout(() => {
                document.querySelector('#loginSection .form-container').classList.add('active');
            }, 100);
        }

function showSignup() {
            document.getElementById('loginSection').style.display = 'none';
            document.getElementById('signupSection').style.display = 'flex';
            
            // Update toggle buttons
            document.querySelectorAll('.toggle-btn').forEach(btn => btn.classList.remove('active'));
            document.querySelectorAll('.toggle-btn')[1].classList.add('active');
            
            // Animate form
            setTimeout(() => {
                document.querySelector('#signupSection .form-container').classList.add('active');
            }, 100);
        }

// Password toggle functionality
        function togglePassword(inputId, toggleElement) {
            const input = document.getElementById(inputId);
            const icon = toggleElement.querySelector('i');
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }

// Form validation and submission
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const btn = this.querySelector('.neon-btn');
            simulateAuth(btn, 'Giriş başarılı! Hoş geldiniz.');
        });

document.getElementById('signupForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Check password confirmation
            const password = document.getElementById('signupPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            if (password !== confirmPassword) {
                showToast('Şifreler eşleşmiyor!', 'error');
                return;
            }
            
            const btn = this.querySelector('.neon-btn');
            simulateAuth(btn, 'Hesabınız oluşturuldu!

Recommandé

Barre de navigation CSS responsive

Metehan

Effet de cadre sur les images à l'aide de CSS pur

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS