Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Webleb - Giriş Yap</title>

<style>

body {

margin: 0;

padding: 0;

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

background: linear-gradient(to right, #2980b9, #2c3e50);

color: #ecf0f1;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.login-container {

background-color: #34495e;

padding: 50px;

border-radius: 15px;

box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

text-align: center;

width: 100%;

max-width: 400px;

}

.login-container h1 {

margin-bottom: 30px;

font-size: 28px;

color: #ecf0f1;

}

.input-group {

margin-bottom: 30px;

position: relative;

}

.input-group input {

width: 100%;

padding: 15px 10px;

background: #2c3e50;

border: none;

border-radius: 5px;

color: #ecf0f1;

font-size: 16px;

outline: none;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.input-group label {

position: absolute;

top: 50%;

left: 15px;

transform: translateY(-50%);

font-size: 16px;

color: #bdc3c7;

transition: 0.3s;

pointer-events: none;

}

.input-group input:focus ~ label,

.input-group input:not(:placeholder-shown) ~ label {

top: -10px;

left: 10px;

background-color: #34495e;

padding: 0 5px;

font-size: 14px;

color: #3498db;

}

.login-btn {

display: inline-block;

width: 100%;

padding: 15px;

margin-top: 20px;

background-color: #3498db;

border: none;

border-radius: 5px;

color: #fff;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s;

}

.login-btn:hover {

background-color: #2980b9;

}

.forgot-password {

display: block;

margin-top: 20px;

font-size: 14px;

color: #bdc3c7;

text-decoration: none;

transition: color 0.3s;

}

.forgot-password:hover {

color: #3498db;

}

</style>

</head>

<body>

<h1>Giriş Yap</h1>

<form>

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

</div>

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

</div>

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

<a href="#" class="forgot-password">Şifremi Unuttum?</a>

</form>

</div>

</body>

</html>

CSS

/* HTML elemanının yüksekliği tam ekran olacak şekilde ayarlanır */

html {

min-height: 100%;

}

/* Body (gövde) için temel stil ayarları */

body {

margin: 0; /* Kenar boşlukları kaldırılır */

padding: 0; /* Dolgu boşlukları kaldırılır */

font-family: 'Open Sans', sans-serif; /* Yazı tipi Open Sans olarak ayarlanır */

background: radial-gradient(circle at top, #4b134f, #c94b4b); /* Dairesel arka plan geçişi */

display: flex; /* Flexbox kullanılarak içeriğin ortalanması sağlanır */

justify-content: center; /* Yatayda ortalanır */

align-items: center; /* Dikeyde ortalanır */

height: 100vh; /* Tam ekran yüksekliği */

}

/* Giriş kutusu için stil */

.login-container {

background: rgba(255, 255, 255, 0.1); /* Yarı saydam beyaz arka plan */

padding: 50px; /* İçerik boşlukları */

border-radius: 15px; /* Kenar köşeleri yuvarlatılır */

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); /* Derinlik efekti için gölge */

backdrop-filter: blur(10px); /* Arka plan bulanıklaştırılır */

text-align: center; /* Metin ortalanır */

width: 100%; /* Genişlik tam genişlikte */

max-width: 350px; /* Maksimum genişlik 350 piksel */

}

/* Giriş kutusunun başlığı */

.login-container h1 {

margin-bottom: 20px; /* Başlık ile içerik arası boşluk */

color: #ffffff; /* Yazı rengi beyaz */

font-size: 26px; /* Yazı boyutu */

text-transform: uppercase; /* Tüm metin büyük harfe çevrilir */

letter-spacing: 2px; /* Harf aralıkları genişletilir */

}

/* Kullanıcı giriş alanları için stil */

.input-wrapper {

position: relative; /* İlgili konumlandırma */

margin-bottom: 25px; /* Alt boşluk */

}

/* Kullanıcı giriş kutusunun stil ayarları */

.input-wrapper input {

width: 100%; /* Genişlik tam genişlikte */

padding: 12px; /* İçerik boşlukları */

background: transparent; /* Arka plan şeffaf */

border: 2px solid #ffffff; /* Beyaz kenar çizgisi */

border-radius: 5px; /* Kenar köşeleri yuvarlatılır */

color: #ffffff; /* Yazı rengi beyaz */

font-size: 16px; /* Yazı boyutu */

transition: border-color 0.3s ease; /* Kenar rengi geçiş efekti */

}

/* Giriş kutusu üzerine odaklanıldığında kenar rengi değişir */

.input-wrapper input:focus {

border-color: #c94b4b; /* Kırmızımsı kenar rengi */

outline: none; /* Varsayılan odak stilini kaldır */

}

/* Kullanıcı giriş kutusu etiketi için stil */

.input-wrapper label {

position: absolute; /* Mutlak konumlandırma */

top: -20px; /* Yukarıda yer alır */

left: 10px; /* Solda yer alır */

background-color: #4b134f; /* Etiket arka plan rengi */

padding: 0 5px; /* İçerik boşlukları */

color: #ffffff; /* Yazı rengi beyaz */

font-size: 14px; /* Yazı boyutu */

}

/* Giriş düğmesi için stil */

.login-button {

display: inline-block; /* Satır içi blok düzeyi */

width: 100%; /* Genişlik tam genişlikte */

padding: 12px; /* İçerik boşlukları */

background-color: #c94b4b; /* Düğme arka plan rengi */

border: none; /* Kenar çizgisi kaldırılır */

border-radius: 5px; /* Kenar köşeleri yuvarlatılır */

color: #ffffff; /* Yazı rengi beyaz */

font-size: 16px; /* Yazı boyutu */

cursor: pointer; /* Fare işaretçisi değişir */

text-transform: uppercase; /* Metin büyük harfe çevrilir */

transition: background-color 0.3s ease; /* Arka plan rengi geçiş efekti */

}

/* Giriş düğmesi üzerine gelindiğinde arka plan rengi değişir */

.login-button:hover {

background-color: #4b134f; /* Koyu mor arka plan rengi */

}

JS

// Kullanıcıya kopyalanacak içerik olmadığını bildiren fonksiyon

function içerikBulunamadı() {

// Dil seçeneklerine göre mesajlar

const mesajlar = {

tr: "Kopyalanacak içerik bulunamadı. Lütfen geçerli bir içerik olduğundan emin olun.",

en: "No content found to copy. Please ensure there is valid content.",

es: "No se encontró contenido para copiar. Asegúrate de que haya contenido válido.",

de: "Kein Inhalt zum Kopieren gefunden. Bitte stellen Sie sicher, dass gültiger Inhalt vorhanden ist."

};

// Kullanıcı dilini tespit et

const kullaniciDili = navigator.language.slice(0, 2); // Tarayıcı dilini alır, örneğin 'tr'

// Uygun mesajı seç

let mesaj = mesajlar[kullaniciDili] || mesajlar["en"]; // Dil desteklenmiyorsa varsayılan İngilizce mesaj

// Konsola mesajı yazdır

console.warn(mesaj); // Uyarı mesajı sarı olarak vurgulanır

// Ekranda bildirim göstermek için

let bildirim = document.createElement("div");

bildirim.style.position = "fixed";

bildirim.style.bottom = "20px";

bildirim.style.right = "20px";

bildirim.style.padding = "15px 30px";

bildirim.style.backgroundColor = "#f44336";

bildirim.style.color = "#fff";

bildirim.style.fontSize = "14px";

bildirim.style.borderRadius = "5px";

bildirim.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";

bildirim.textContent = mesaj;

// Bildirimi body'ye ekle

document.body.appendChild(bildirim);

// 5 saniye sonra bildirimi kaldır

setTimeout(() => {

bildirim.style.opacity = "0";

setTimeout(() => {

document.body.removeChild(bildirim);

}, 600);

}, 5000);

}

// Fonksiyonu çalıştır

içerikBulunamadı();

Mete'nin bir kodu

Recommended

CSS Triangle Toggle Animation

3D Login page

A Code by Metehan

HTML

CSS

JS

Recommended

CSS Triangle Toggle Animation

3D Login page

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS