Kutu Gölgesi

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 42 / 76.

CSS'te box-shadow özelliği, bir öğenin kutusuna gölge efektleri eklemek için kullanılır. Bu özellik, öğelerin sayfadan "dışarı çıkmış" gibi görünmesini veya derinlik ve boyut oluşturmasını sağlayan görsel açıdan çekici efektler oluşturmanıza olanak tanır.

box-shadow özelliğini kullanmanın temel söz dizimi şöyledir:

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

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

vertical-offset: Gölgenin öğeden dikey uzaklığı. Pozitif değerler gölgeyi aşağıya, negatif değerler ise yukarıya taşır.

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. Belirtilmezse 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 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 dönüştürür.

Ö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

Size bir HTML belgesi veriliyor; bu belgede bir bölüm (<div>) ve bir paragraf (<p>) bulunuyor. 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.

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>