Kutu Gölgesi

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 42 / 76.

CSS'de, box-shadow özelliği bir öğenin kutusuna gölge efektleri eklemek için kullanılır. Bu özellik, öğelerin sayfadan "fırlamış" gibi görünmesini sağlayan veya derinlik ve boyut oluşturan görsel olarak çekici efektler oluşturmanıza olanak tanır.

box-shadow özelliğini kullanmak için temel sözdizimi şöyledir:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: Gölgenin öğeden olan yatay uzaklığı. Pozitif değerler gölgeyi sağa, negatif değerler ise sola hareket ettirir.

vertical-offset: Gölgenin öğeden olan dikey mesafesi. Pozitif değerler gölgeyi aşağı doğru, negatif değerler ise yukarı doğru hareket ettirir.

blur (isteğe bağlı): Gölgenin bulanıklık yarıçapı. Daha büyük bir değer, daha bulanık bir gölge oluşturur. Atlanırsa, varsayılan olarak 0 (bulanıklık yok) değerini alır.

spread (isteğe bağlı): Gölgenin yayılma yarıçapı. Pozitif değerler gölgenin genişlemesine, negatif değerler ise küçülmesine neden olur.

color (isteğe bağlı): Gölgenin rengi. Adlandırılmış renkler, onaltılık (hexadecimal) değerler, RGB değerleri veya HSL değerleri kullanılarak belirtilebilir.
inset (isteğe bağlı): Gölgeyi dış gölgeden (outset) iç gölgeye değiştirir.

Örneğin:

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

Bu örnekte, tüm <div> öğeleri 5px yatay ofset, 5px dikey ofset, 10px bulanıklık yarıçapı ve gri renkte bir kutu gölgesine sahiptir. button sınıfına sahip öğeler 2px yatay ofset, 2px dikey ofset, 5px bulanıklık yarıçapı, 2px yayılma yarıçapı ve yarı saydam siyah renkte (rgba(0, 0, 0, 0.5)) bir kutu gölgesine sahiptir.

Görev

Kolay

Bir bölme (<div>) ve bir paragraf (<p>) içeren bir HTML belgesi size verilmiştir. Göreviniz, bu öğelere gölge efektleri eklemek için box-shadow özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<div> öğesini hedefleyen bir CSS kuralı yazın. box-shadow değerini 10px 10px 5px gray olarak ayarlayın.
<p> öğesini hedefleyen bir CSS kuralı yazın. box-shadow değerini -5px -5px 10px 2px rgba(0, 0, 0, 0.7) olarak ayarlayın.

Kopya kağıdı

box-shadow özelliği, öğelere gölge efektleri ekler:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: Yatay mesafe (pozitif = sağ, negatif = sol)
vertical-offset: Dikey mesafe (pozitif = aşağı, negatif = yukarı)
blur (isteğe bağlı): Bulanıklık yarıçapı (daha büyük = daha bulanık)
spread (isteğe bağlı): Yayılma yarıçapı (pozitif = genişlet, negatif = daralt)
color (isteğe bağlı): Gölge rengi
inset (isteğe bağlı): Dış gölge yerine iç gölge oluşturur

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

Kendin dene

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>