Odaklanma Efektleri

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 9 / 43.

:focus sözde sınıfı (pseudo-class), bir öğe odaklandığında—üzerine tıkladığınızda veya klavyeyi kullanarak sekme tuşuyla (tab) üzerine geldiğinizde olduğu gibi—onu stillendirmenize olanak tanır. Etkileşimde bulunduğunuz öğeyi vurgulamanın harika bir yoludur! Örneğin:

<input type="text">

Giriş alanı odaklandığında (focus) stil verin:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Kullanıcı bu giriş alanına tıkladığında veya sekme tuşuyla bu alana odaklandığında, kenarlık rengi maviye dönecek ve etrafında hafif mavi bir gölge belirecektir.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Görev

Kolay

Bir metin girişine odaklanıldığında (focus) özel stil uygulayan bir CSS kuralı oluşturun.

Odaklanıldığında, kenarlığı turuncu "rgb(255, 152, 0)" olarak değiştirir
Odaklanıldığında, sarı bir arka plan rengi "rgb(255, 243, 224)" ekler

Kopya kağıdı

:focus sözde sınıfı, bir öğe odaklandığında (tıklandığında veya sekme tuşuyla gelindiğinde) öğeyi stillendirir:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Bu, giriş odaklandığında kenarlık rengini değiştirir ve bir gölge ekler.

Kendin dene

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.