CSS 'te karartma efekti yapmak

CSS 'te karartma efekti yapmak

  Aralık 12, 2017    Gökhan Krl

---

Karartma Öncesi

Karartma Sonrası

Çok kolay bir yöntemle CSS kullanarak karartma efekti yapacağız. İhtiyacımız olan sadece iki adet HTML etiketi olacak. Örneğin bir adet div açalım ve bu etikete bir arka plan resmi belirleyelim.

<div id="header-panel">
<div class="container">
<p style="text-align:center;color:#fff;"> Gokhankrll </p>
</div>
</div>

HTML etiketinden sonra CSS 'leri ekleyelim. #header-panel 'e position:relative; ekliyoruz. Daha sonra aynı etikete ::before ile aşağıdaki değerleri atıyoruz. Burada dikkat edilmesi gereken alan .header-panel yani hemen önceki (veya :before yada :after eklenmemiş olanına) etikete position:relative; özelliğinin eklenmesi gerektiğidir.

#header-panel {
        position:relative;
        background-image:url(/resim.jpg);
        width:100%;
        height:500px;
}

#header-panel::before {
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        background:#000;
        opacity:.4;
}

İsterseniz ::before yerine herhangi bir HTML etiketi kullanıp absolute değeri atayarak da aynı sonucu elde edebilirsiniz.İşlemler tamanlandıktan sonra yazının başındaki gibi bir görüntü elde edeceksiniz.