Kutu Gölgesi

Coddy'nin HTML Journey'sinin Styling with CSS 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 "fırlamış" gibi görünmesini sağlayan veya derinlik ve boyut kazandıran görsel olarak çekici efektler oluşturmanıza olanak tanır.

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

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 olur (bulanıklık yok).

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. İsimlendirilmiş renkler, 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 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 offset, 5px dikey offset, 10px blur yarıçapı ve gray renkte bir box shadow değerine sahiptir. button sınıfına sahip öğeler ise 2px yatay offset, 2px dikey offset, 5px blur yarıçapı, 2px spread yarıçapı ve yarı saydam black renkte (rgba(0, 0, 0, 0.5)) bir box shadow değerine sahiptir.

Görev

Kolay

Bir bölme (<div>) ve bir paragraf (<p>) içeren bir HTML belgesi veriliyor. 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>