Web sayfalarının kullanıcı dostu bir yapıyla tasarlanması, programın bazı görsel yönlerini kullanıcının isteğine göre düzenlenmesi kullanıcının o web sayfasını sahiplenmesine neden olur. Pencerenin arkaplan renginin kullanıcı tarafından seçilmesi işlemi de bunlardan biridir. Biz bu işlemi button yardımıyla gerçekleştirmeye çalışacağız.
Vs2022 programını çalıştırınız. Yeni bir proje açınız. Projenize yeni bir sayfa ekleyiniz ve ismini index.html olarak değiştiriniz.
Adım 1: Web sayfasının temel tanımlamalarını yapalım.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Arkaplan Rengi Değiştirme</title>
<style>
</style>
<script>
</script>
</head>
<body>
<header>
</header>
</body>
</html>
Adım 2: header etiketine ait tanımlamalarını yapalım.
<header>
<h1>Arka Plan Rengini Değiştir</h1>
<nav>
<button id="redButton" class="colorButton"
onclick="changeBackgroundColor('red')">Kırmızı</button>
<button id="greenButton" class="colorButton"
onclick="changeBackgroundColor('green')">Yeşil</button>
<button id="blueButton" class="colorButton"
onclick="changeBackgroundColor('blue')">Mavi</button>
</nav>
</header>
Adım 3: 1. Butona basıldığında arka plan rengini kırmızı, yeşil, mavi yapalım.
<script>
function changeBackgroundColor(color) {
document.body.style.backgroundColor = color;
}
</script>
Adım 4: Web sayfasını kaydedip çalıştıralım. En temel anlamda web sayfasının çalıştığını görürsünüz. Şimdi header etiketini css ile tasarlayalım.
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
header {
padding: 20px;
background-color: #f4f4f4;
border-radius: 10px;
display: inline-block;
}
nav {
margin-top: 20px;
}
.colorButton {
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
margin: 10px;
color: white;
}
#redButton {
background-color: red;
}
#greenButton {
background-color: green;
}
#blueButton {
background-color: blue;
}
.colorButton:hover {
opacity: 0.8;
}
Adım 5: Web sayfasını kaydedip çalıştıralım. Sayfa tasarımının daha iyi hale geldiğini görürsünüz. Web sayfasını bootstrap ile yeniden düzenleyelim.
<body class="text-center p-5">
<header class="container p-3 border rounded bg-light">
<h1 class="mb-4">Arka Plan Rengini Değiştir</h1>
<nav class="d-flex justify-content-center">
<button class="btn btn-danger mx-2"
onclick="changeBackgroundColor('red')">Kırmızı</button>
<button class="btn btn-success mx-2"
onclick="changeBackgroundColor('green')">Yeşil</button>
<button class="btn btn-primary mx-2"
onclick="changeBackgroundColor('blue')">Mavi</button>
</nav>
</header>
</body>
Adım 5: Şimdi linear-gradient kullanarak renkleri karıştırıp arkaplan rengi oluşturalım.
<header class="container p-3 border rounded bg-light text-center">
<h1 class="mb-4">Arka Plan Rengini Değiştir</h1>
<nav class="d-flex justify-content-center">
<!-- Kırmızı karışımı -->
<button class="btn btn-danger mx-2"
onclick="changeGradient('darkred', 'red', 'orange', 'pink')">
Kırmızı Karışımı</button>
<!-- Mavi karışımı -->
<button class="btn btn-primary mx-2"
onclick="changeGradient('darkblue', 'blue', 'lightblue', 'purple')">
Mavi Karışımı</button>
<!-- Yeşil karışımı -->
<button class="btn btn-success mx-2"
onclick="changeGradient('darkgreen', 'green', 'lime', 'yellowgreen')">
Yeşil Karışımı</button>
</nav>
</header>
<script>
function changeGradient(color1, color2, color3, color4) {
document.body.style.background = `linear-gradient(45deg,
${color1}, ${color2}, ${color3}, ${color4})`;
}
</script>
Adım 6: Arkaplan rengini değiştirmek için jquery kodları kullanalım.
<header class="container p-3 border rounded bg-light text-center">
<h1 class="mb-4">Arka Plan Rengini Değiştir</h1>
<nav class="d-flex justify-content-center">
<!-- Kırmızı karışımı -->
<button class="btn btn-danger mx-2"
data-colors='["darkred", "red", "orange", "pink"]'>
Kırmızı Karışımı</button>
<!-- Mavi karışımı -->
<button class="btn btn-primary mx-2"
data-colors='["darkblue", "blue", "lightblue", "purple"]'>
Mavi Karışımı</button>
<!-- Yeşil karışımı -->
<button class="btn btn-success mx-2"
data-colors='["darkgreen", "green", "lime", "yellowgreen"]'>
Yeşil Karışımı</button>
</nav>
</header>
<script>
$(document).ready(function () {
$('button').click(function () {
// Tıklanan butonun data-colors özniteliğinden renkleri al
var colors = JSON.parse($(this).attr('data-colors'));
// Arka planı güncelle
$('body').css('background', 'linear-gradient(45deg, '
+ colors.join(', ') + ')');
});
});
</script>
Adım 7: Şimdi arka plan rengini takımlara göre ayarlayalım.
<header class="container p-3 border rounded bg-light text-center">
<h1 class="mb-4">Arka Plan Rengini Değiştir</h1>
<nav class="d-flex justify-content-center">
<!-- Sarı-Lacivert karışımı -->
<button class="btn btn-warning mx-2"
data-colors='["yellow", "blue"]'>Sarı-Lacivert</button>
<!-- Sarı-Kırmızı karışımı -->
<button class="btn btn-danger mx-2"
data-colors='["yellow", "red"]'>Sarı-Kırmızı</button>
<!-- Siyah-Beyaz karışımı -->
<button class="btn btn-secondary mx-2"
data-colors='["black", "white"]'>Siyah-Beyaz</button>
</nav>
</header>
<script>
$(document).ready(function () {
$('button').click(function () {
// Tıklanan butonun data-colors özniteliğinden renkleri al
var colors = JSON.parse($(this).attr('data-colors'));
// Arka planı keskin bir şekilde güncelle
$('body').css('background', `linear-gradient(to right,
${colors[0]} 50%, ${colors[1]} 50%)`);
});
});
</script>
Web sayfasını kaydedip çalıştıralım. Arkaplanın takım renkleriyle oluştuğunu görürsünüz.