CSS ile Resim Efektleri

Web sitemize eklediğimiz resimlere CSS ile ne gibi etkiler yapabiliriz burada bunlardan bahsedeceğim. Aklıma gelenlerden bir liste yapmaya çalışırsam, CSS ile resme:

  • Çerceve içine alma
  • Şeffalıklık
  • Köşelerini oval yapma
  • Gölgelendirme
  • Siyah-beyaz veya sepya yapma
  • Bulanıklaştırma
  • Kontrast ayarlama

gibi birçok işlem uygulayabiliriz. Şimdi bu işlemlerimizi nasıl uyguladığımızı görelim.

Orijinal resmimiz aşağıdaki gibidir.

orijinal resim

CSS ile Resmi Çerçeve İçine Alma (Border)

Kullanımı şu şekildedir:

border: kalınlık renk stil;
Örnekler:

resim

border: 2px black solid;

resim

border: 1px red dotted;

resim

border: 2px #53CCAA dashed;

resim

border: 3px #AA3D11 double;

resim

border: 3px orange groove;

resim

border: 3px orange ridge;

resim

border: 4px #00CDCD inset;

resim

border: 4px #00CDCD outset;

 

CSS ile Resmi Şeffaf Yapma (Opacity)

Kullanılacak kod aşağıdaki gibidir, yüzde değeriyle istediğiniz şekilde oynayabilirsiniz:

-webkit-filter: opacity(50%);

Örnek:

resim

-webkit-filter: opacity(75%);

 

CSS ile Resmin Köşelerini Oval Yapma (Border-radius)

Kullanacağımız kod aşağıdadır, ovalliği arttırmak isterseniz piksel değerini yükseltebilirsiniz:

border-radius: 10px;

Örnek:

resim

border-radius: 10px 2px 10px 2px;

 

CSS ile Resmi Gölgelendirme (Box-shadow)

Önce kodumuzu görelim:

box-shadow: 1px 2px 3px 4px #000;

İlk piksel değerimiz gölge konumunun yatay konumunu belirlemek için, ikincisi dikey konumunu belirlemek için kullanılmaktadır. Üçüncü piksel değerimiz ise bulanıklığı ve dördüncü değerimiz ise gölgemizin dağılma değerini belirliyor. Son değerimiz ise gölgemizin rengini belirliyor. Bir örnekle daha iyi anlaşılabilir.

Örnek:

resim

box-shadow: 3px 2px 5px 1px #000;

 

CSS ile Resmi Siyah-Beyaz Yapma (Grayscale)

Burada kullanacağımız kod şeffalık için kullandığımız koda benzer:

-webkit-filter: grayscale(100%);

Örnek:

resim

-webkit-filter: grayscale(80%);

 

CSS ile Resmi Sepya Yapma (Sepia)

Tek fark sepia olarak kullanmamız:

-webkit-filter: sepia(100%);

Örnek:

resim

-webkit-filter: sepia(80%);

 

CSS ile Resmi Bulanıklaştırma (Blur)

Burada da blur kullanırken yüzde olarak girdiğimiz değeri piksel olarak giriyoruz:

-webkit-filter: blur(2px);

Örnek:

resim

-webkit-filter: blur(3px);

 

CSS ile Resmin Kontrastını Ayarlama (Contrast)

Değer 100%’e yaklaştıkça resim orijinal haline döner.

-webkit-filter: contrast(50%);

Örnek:

resim

-webkit-filter: contrast(30%);

CSS sayesinde fotoğrafçılardan bayağı bir rol çalmış oluyoruz ama elbette yapabileceklerimiz bunlarla sınırlı değil. Yaratıcılığınızı kullanarak birkaç efektin bir araya gelmesiyle daha farklı resimler de oluşturabilirsiniz. Ben size yumurta, un, şeker vermiş olayım; nasıl bir kek yapacağınıza siz karar verin… :)

20.04.2014 CSS 1 yorum

,

1 yorum

Apk Yeri28.08.2016

Çok yararlı oldu teşekkürler ayrıca sitemi ziyaret edebilirsiniz

Yorum Yazın

kod.gen.tr