CSS ile Etkili Resim Efektleri

Eskiden can alıcı görüntüler oluşturmak için Photoshop gibi grafik programlarından faydalanırdık. Günümüzde CSS’e eklenen bir çok özellikle göz kamaştıran resimler ve galeriler oluşturmak mümkün hale geldi. Şimdi size internette gördüğün bir kaç tane güzel resim örneğini HTML ve CSS kodları ile birlikte yazacağım.

Polaroid Potoğraf

DEMO

Polaroid makinaları bilirsiniz. Çekilen fotoğrafı anlık olarak çerçeveli olarak çıkartıp üzerine ilgili not düşmek için küçük bir alan bırakılırdı. İlk CSS efektimiz bu olsun ve kodlamaya başlayalım.

HTML

HTML kodlarımız poloraid sınıfını kullanacak ve ekranda 300px genişliğinde çerçeveli resimler oluşturacaktır. Fotoğraf hakkında bilgi içinde içinde 1 tane p etiket bulunacaktır.

<div class="polaroid">
<p>Kız Kulesi, Kasım '15</p>
<img src="kizkulesi.jpg">
</div>

Standart HTML etiketlerini yazarken Google Font ile çalışmaya dahil ettiğimiz el yazısı fontunu eklemeyi unutmayın.

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

CSS

Şimdi gelelim CSS kodlarının yerleştirilmesine, arkaplan rengini koyulaştırmak için body etiketine renk kodumuzu ekliyoruz.

.Polaroid nesnelerinin ekranda 300px görünmesi ve içerideki p etiketini absolute olarak kullanabilmek için position değerini relative yapıyoruz. float:left değeri ile resimler yan yana gelmesi ve margin ile de resimler arasıda boşluk oluşmasını sağlıyoruz.

.polaraid img  ile resimlere çerçeve ekleyip resmin bulunduğu alana tam sığması için 100% genişlik veriyoruz.

.polaroid p ile şekilli el yazısı oluşturuyoruz.

body{
background: #282838;
height: 100%;
}
.polaroid {
position: relative;
width: 300px;
float: left;
margin:20px;
}

.polaroid img {
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
width: 100%;
}

.polaroid p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
font: 400 18px/1 'Kaushan Script', cursive;
color: #888;
}

Şerit Fotoğraf

Birden fazla gölge ve üzerinde geldiğinde fotoğrafın açıklamasını gösteren fotoğraf örneği

DEMO

HTML

    <div class="polaroid">
      <p>Kız Kulesi, Kasım '15</p>
      <img src="kizkulesi.jpg">
    </div>

CSS

body{
     background: #282838;
    background: #101012 url(arkaplan.jpg) no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
}


 .polaroid {
border-radius: 5px;
background: #fff;
 padding:10px;
position: relative;
width: 300px;
float: left;
margin:20px;     
}

.polaroid img {

  /*border-bottom: 45px solid #fff;*/
          box-shadow:   3px 3px 3px #666,
                        -3px 3px 3px #666,
                        3px -3px 3px #666,
                        -3px -3px 3px #666;
    border-radius: 5px;
    width: 100%;
}

.polaroid p {
opacity: 0;
position: absolute;
text-align: center;
 width: 300px;
box-sizing: content-box;
 top:40%;
font: 400 18px/2 'Kaushan Script', cursive;
color: #fff;
 background: rgba(50,50,50,.5);
transition:  all .5s;  
}
            
  .polaroid:hover p{
     opacity: 1;
}

Kaynak:https://designshack.net/articles/css/4-fun-css-image-effects-you-can-copy-and-paste/