CSS ile Responsive Sayfa Düzeni
Modern web sitelerinde her ekran boyutuna uyum sağlamak artık bir zorunluluk. Bu örnekte CSS Flexbox kullanarak mobil, tablet ve masaüstü ekranlarda uyumlu çalışan basit bir sayfa düzeni oluşturuyoruz. Flex yapısı sayesinde tasarım otomatik olarak yeniden şekillenir ve kullanıcı deneyimi her cihazda korunur.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Responsive Örnek</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.kapsayici {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.kutu {
background: #f3f3f3;
border-radius: 10px;
flex: 1 1 300px;
padding: 20px;
text-align: center;
}
@media (max-width: 600px) {
.kutu {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<div class="kapsayici">
<div class="kutu">Alan 1</div>
<div class="kutu">Alan 2</div>
<div class="kutu">Alan 3</div>
</div>
</body>
</html>Kod Açıklaması
Modern web sitelerinde her ekran boyutuna uyum sağlamak artık bir zorunluluk.
Bu örnekte CSS Flexbox kullanarak mobil, tablet ve masaüstü ekranlarda uyumlu çalışan basit bir sayfa düzeni oluşturuyoruz.
Flex yapısı sayesinde tasarım otomatik olarak yeniden şekillenir ve kullanıcı deneyimi her cihazda korunur.
Nasıl Çalışır?
Bu kod örneği, Web Speech API kullanılarak sesli olarak açıklanmaktadır. Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak açıklama başlar.
Kullanım Alanları
Web Speech API
Bu kod örneği Web Speech API kullanılarak sesli olarak açıklanmaktadır.
İlgili Kodlar
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Modern Buton Tasarımı</title>
<style>
.buton {
background: linear-gradient(135deg, #1a73e8, #0059c9);
...CSS ile Modern Buton Tasarımı
Kendi Konuşan Kodunuzu Oluşturun
Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.