CSS ile karartı efekti nasıl yapılır?

joxey · 23 Temmuz 2019

Siteme resmin alt kısmına CSS ile karartı efekti eklemek istiyorum. Karartı effekti ne? Diyorsanız bu verdiğim site temalarının slider bölümlerindeki resimlerin üzerine gelince çıkan karartı.

Temalar:

Interactive Theme | MyThemeShop

demo.mythemeshop.com

KFMagazine – Bir başka WordPress sitesi

Bu sitelerdeki gibi resmin üzerine gelince karartı çıkmasını nasıl salarım yardımcı olur musunuz?

dincer degre · 24 Temmuz 2019

Gölgeleme mi yani, ben benim ilgisel.com da kullanıyorum. Bunun gibi mi? Oradan bir bak oysa kodunu aşağıdaya yazdım.

CSS:

.golge {-moz-box-shadow: 1px 1px 3px 0 #444444;
-webkit-box-shadow: 1px 1px 3px 0 #444444;
    box-shadow: 1px 1px 3px 0 #444444;}

kullandığım kodu yazdım bu koddaki pixel büyüklüğü ve #444444 diye belirlenen renk koduyla oynayarak istediğin gibi ayarlayabilirsin.

joxey · 25 Temmuz 2019

dincer degre dedi:
Gölgeleme mi yani, ben benim ilgisel.com da kullanıyorum. Bunun gibi mi? Oradan bir bak oysa kodunu aşağıdaya yazdım.
Eki Görüntüle 419543

CSS:

.golge {-moz-box-shadow: 1px 1px 3px 0 #444444; -webkit-box-shadow: 1px 1px 3px 0 #444444; box-shadow: 1px 1px 3px 0 #444444;}

kullandığım kodu yazdım bu koddaki pixel büyüklüğü ve #444444 diye belirlenen renk koduyla oynayarak istediğin gibi ayarlayabilirsin.

Hayır hocam box-shaodw değil ama bak yine sitende kullandığın birşey,

Orda videolar bölümünde içeriğin başlığını beyaz yazmışsın fakat resmin üzerine olduğu için belli olması için resmin alt kısmına karartı effekti vermişsin bunun nasıl yapıldığını arıyorum.

Box-shadow kutunun dışına gölge veriyor benim aradığım kutunun içine ve alt kısmına üstelik kutunun %30 luk alt kısmına geliyor duman gibi

dincer degre · 26 Temmuz 2019

joxey onu oradan css dosyasına da bakıp alabilirsin. tam kodu bulup atmaya çalışırım. Uzun zaman önce yazmıştım onu.

Anteros · 27 Temmuz 2019

Kapsayıcı bir div açtıktan sonra div'in arkaplanını resim yap. Sonrasında içine bir div daha açıp width ve height değerini 100%, 100% olarak ayarla, sonrasında arkaplana gradient ayarlayabilirsin. CSS Gradient — Generator, Maker, and Background Buradan bir tarafı transparan olarak ayarla, diğer tarafı siyah olarak ayarla, yönünü nasıl yapmak istersen yapabilirsin.

Farklı bir durum olduğunda yardımcı olabilirim.
https://codepen.io/anon/pen/rXWdRY Burda da örnekledim. Umarım kastettiğin budur.

dincer degre · 28 Temmuz 2019

HTML:

<div class="videopost">
    <a href="https://www.ilgisel.com/icerik/populer-hirsizlik-yontemiyle-luks-araci-saniyeler-icinde-caldilar/" title="Popüler Hırsızlık Yöntemiyle Lüks Aracı Saniyeler içinde Çaldılar" rel="bookmark">
    <img src="https://www.ilgisel.com/wp-content/uploads/2019/03/hırsız.png" alt="Popüler Hırsızlık Yöntemiyle Lüks Aracı Saniyeler içinde Çaldılar">
    <span class="playside"></span>

    <h3>Popüler Hırsızlık Yöntemiyle Lüks Aracı Saniyeler içinde Çaldılar</h3>
    <span class="videodate">22 Mart 2019</span></a>
</div>

CSS:

.videopost {width:90%;position:relative;margin:0 auto 15px auto;overflow:hidden;-moz-box-shadow:1px 1px 3px 0 #444444;-webkit-box-shadow: 1px 1px 3px 0 #444444;box-shadow:1px 1px 3px 0 #444444;}
.videopost:after {padding-top: 52.25%;display: block;content: '';}
.videopost img {width:100%;}
.videopost a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /* fill parent */
    background-color:#fff;
    /* let's see it! */
    color: white;
}
.videopost h3 {font-family: "Open Sans", "Arial", "Helvetica", sans-serif;;font-weight: bold;font-style: normal;z-index:5;position:absolute;overflow:hidden;background:none;bottom:12px;color:#FFF;text-decoration:none;padding:5px 5px 5px 5px;font-weight:bold;}
.videopost h3:hover {text-decoration:underline;}
span.videodate {color:#ccc;z-index:5;position:absolute;overflow:hidden;background:none;bottom:0;padding:0 5px 3px 5px;font:11px "Open Sans", "Arial", "Helvetica", sans-serif;}
.playside {position:absolute;overflow:hidden;z-index:2;width:100%;height:63%;left:0;bottom:0;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 50%,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(50%,rgba(0,0,0,0.7)),color-stop(100%,#000));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 50%,#000 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 50%,#000 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 50%,#000 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 50%,#000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#f0000000',GradientType=0);display:block;}

Senin için alıp kopyaladım. Bunları kullandığında çalışması gerek. Burada önemli olan videopost un position:relative i, videopost:after da yazan kodlar ve siyahlığı yapıp dışarı taşmayanda .playside

Fatalis · 28 Temmuz 2019

Bunu bir pseudo (sahte) eleman vasıtasıyla yapabilirsin, şu an buradan anlatması zor olabilir ancak resmin üzerine opak bir siyah arkaplan eklemen gerekiyor, tabii verdiğin örneklerde bir gradyan var düz siyah değil. Örneğin: background: linear-gradient(to top, rgba(0,0,0,0.25), transparent) Bu stilin ekli olduğu bir elemanı resmin üstüne çıkarmanız gerekiyor. İsterseniz bir örnek hazırlayabilirim.

Düzenleme: Senin için ufak bir örnek tasarladım, kodlarına ve örneğin nasıl gözüktüğüne buradan göz atabilirsin. Aklına takılan bir şey olursa sorabilirsin!

Her ne kadar yorumda pseudo elemanlardan bahsetmiş olsam da kod içerisinde kafanı karıştırmasını istemediğimden ötürü pseudo eleman kullanmadım, ben olsam pseudo elemanlarla yapardım ama böyle de bir fark yaratmıyor gönül rahatlığıyla kullanabilirsin.

CSS ile karartı efekti nasıl yapılır?

Ayrıntılı düzenleme

joxey

Centipat

Interactive Theme | MyThemeShop

dincer degre

Hectopat

joxey

Centipat

Dosya Ekleri

dincer degre

Hectopat

Anteros

Kilopat

dincer degre

Hectopat

Fatalis

Megapat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz