CSS Kodları

CSS programlama dili ile yazılmış konuşan kod örnekleri.

1
Kod üzerine gelin
2
Sesli açıklamayı dinleyin
3
Öğrenin ve uygulayın
CSS Baslangic
74 
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Modern Buton Tasarımı</title>
  <style>
    .buton {
      background: linear-gradient(135deg, #1a73e8, #0059c9);
      color: #fff;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
    }
    .buton:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      transform: translateY(-2px);
    }
  </style>
</head>
<body>
  <button class="buton">Zebifytech Butonu</button>
</body>
</html>

CSS ile Modern Buton Tasarımı

Detay

Web sitelerinde butonlar sadece işlevsel değil, aynı zamanda markanın tarzını da yansıtır. Aşağıdaki örnekte hover efekti ve gölgelendirme kullanarak modern bir buton tasarımı yapıyoruz. Bu teknik, Zebifytech arayüzlerinde kullanılan sade ama profesyonel buton yaklaşımını temsil eder.

CSS Orta
57 
<!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>

CSS ile Responsive Sayfa Düzeni

Detay

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.

Web Speech API Nasıl Çalışır?

Modern tarayıcıların sunduğu Web Speech API ile kodları sesli olarak açıklıyoruz.

Hover Efekti

Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak sesli açıklama başlar.

Sesli Açıklama

Web Speech API kullanılarak kod açıklaması Türkçe olarak seslendirilir.

Öğrenme

Görsel ve işitsel öğrenme ile kodları daha kolay anlayabilir ve öğrenebilirsiniz.

Kendi Konuşan Kodunuzu Oluşturun

Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.

Proje Danışmanlığı Öğreticileri İncele