Bu makalede, CSS kullanarak arka plan resimlerine uygulanabilecek farklı efektlerden bahsettim Opaklık konusunda background-color, opacity ve :before/:after öğeleri kullanılabiliyor Blur efekti için filter ve -webkit-filter özellikleri kullanılabilir Bu efekti daha da güçlendirmek için Border Radius ve Box Shadow özellikleri de kullanılabilir Bu özellikler sayesinde arka plandaki resimlere yuvarlatılmış köşeler ve gölge efektleri eklenebilir Bu efektler, web sayfanızın görsel kalitesini arttırır ve daha profesyonel bir görünüm kazandırır

CSS kullanarak web sitelerimizi tasarlarken, arka plan resimleri kullanmak oldukça yaygın bir yöntemdir. Bu resimler, web sayfanızın görünümünü güzelleştirmede ve etkileyici bir ambiyans yaratmada önemli bir rol oynarlar. Ancak, CSS kullanarak arka plan resimlerine farklı efektler uygulayarak daha da çarpıcı bir tasarım oluşturmanız mümkündür. Bu makalede, CSS'de arka plan resimleriyle oluşturulabilecek farklı efektleri inceleyeceğiz ve her birini nasıl oluşturabileceğiniz hakkında detaylı bilgiler vereceğiz.

1. Opaklık

CSS kullanarak arka plan resimlerine Opaklık vermenin birkaç farklı yolu vardır. Bunlardan bazıları şunlardır:

• background-color: rgba() kullanarak, Opaklık verilmesi gereken arka plan renginin belirtilmesi ve belirlenen rgba değeri ile şeffaflık değerlerinin ayarlanması.
• opacity özelliği kullanarak, hem arka plan rengine hem de elementin içinde bulunan tüm içeriklere Opaklık verilmesi.
• :before veya :after öğesi kullanarak, içeriğin önüne veya arkasına bir katman eklenip, belirlenen rgba değeri kullanılarak şeffaflık ayarlanabilir.

Opaklık konusunda kullanılacak kod parçacıklarının detaylarını ödevlerinizde daha detaylı bir şekilde inceleme şansınız olacaktır.

2. Blur Efekti

CSS ile arka plan resimlerine farklı efektler kazandırmak mümkündür. Blur efekti, arka plandaki resme bulanık bir görünüm kazandırmak için kullanılan bir efekt olarak öne çıkmaktadır. Bu efekti uygulamak için kullanılabilecek CSS kodları şu şekildedir:

• filter: blur(5px);
• -webkit-filter: blur(5px);

Bu kodlar ile arka plan resmine bulanık bir görünüm kazandırmak mümkündür. Ancak, sadece bu kodlarla resmi bulanık hale getirmek yerine, farklı CSS özelliklerini de kullanarak daha etkili bir görünüm elde edilebilir.

Arka plandaki resme daha etkili bir görünüm kazandırmak için kullanılabilecek CSS özellikleri arasında Border Radius ve Box Shadow özelliklerine de yer verilebilir.

Box Shadow özelliği, arka plandaki resimlere gölgelendirme efekti vermek için kullanılabilir. Bu özellik sayesinde resmin çevresine bir gölge verilerek, bulanıklık etkisi daha da vurgulanabilir. Box Shadow kodları aşağıdaki gibi olabilir:

Border Radius özelliği, arka plandaki resimlere yuvarlatılmış köşeler vermek için kullanılır. Bu özellik sayesinde, resmin çevresindeki sert kenarlar yumuşatılarak bulanık efekt daha da hissedilir hale getirilebilir. Border Radius kodları aşağıdaki gibi olabilir:

Bulanık efekt vermek için kullanılabilecek diğer bir CSS özelliği de Filter özelliğidir. Bu özellik sayesinde, resme farklı efektler verilerek, bulanık efekt daha da vurgulanabilir. Filter özelliğini kullanarak arka plandaki resme bulanık bir efekt vermenin yolları şu şekildedir:

Filter özelliğinin Blur efektini kullanarak arka plandaki resme bulanık bir görünüm kazandırmak mümkündür. Bu özellik sayesinde, resim üzerindeki detaylar yok olurken, bulanık görüntü daha belirgin hale gelir. Blur efektini kullanarak arka plan resmine bulanık efekt vermek için kullanılabilecek CSS kodu şu şekildedir:

• filter: blur(5px);

Filter özelliğinin Hue Rotate efektini kullanarak arka plandaki resmin tonunu değiştirmek mümkündür. Bu özellik sayesinde, resmin renkleri farklı tonlara bürünürken, bulanık efekt daha belirgin hale gelir. Hue Rotate efektini kullanarak arka plan resmine bulanık efekt vermek için kullanılabilecek CSS kodu şu şekildedir:

• filter: hue-rotate(90deg);

2.1. Border Radius ve Box Shadow

Arka plan resimleri sayfanızda özellikle estetik açıdan önemli bir yer tutuyorsa, onlara farklı efektler vererek daha göz alıcı hale getirebilirsiniz. Bu efektlerden biri de Blur efektidir. Sadece Blur efekti ile arka plandaki resimler oldukça yavan kalabilir, bu nedenle arka plan resimlerine daha iyi bir görünüm kazandırmak için "Border Radius" ve "Box Shadow" özellikleri kullanılabilir.

"Border Radius" özelliği kullanarak, arka plandaki resmin köşelerini yuvarlatabilirsiniz. Bu özellikle özellikle modern ve minimal tasarımlarda sıklıkla kullanılır. "Box Shadow" özelliği, arka plandaki resimlere gölgelendirme efekti vermek için kullanılır. Bu özellikle daha derin ve üç boyutlu bir etki yaratmak istediğinizde kullanışlıdır.

Bu özellikleri kullanarak, bulanık arka plan resimlerine daha etkili bir görünüm kazandırabilirsiniz. Böylece sayfanızın görsel kalitesini arttırabilir ve daha profesyonel görünebilirsiniz.

2.1.1. Box Shadow

CSS'de arka plan resimleriyle uygulanabilecek birçok efekt bulunmaktadır. Bunlardan biri de Box Shadow efektidir. Box Shadow özelliği, arka plandaki resme gölgelendirme efekti verilmesini mümkün kılar. Bu özellik ile ekranda derinlik hissi yaratan bir efekt oluşturulabilir.

Box Shadow efektini kullanarak arka plan resmine gölgelendirme etkisi vermek oldukça basittir. Öncelikle bu efekti kullanmak istediğimiz resmi belirlemeliyiz. Daha sonra CSS kodları içinde "box-shadow" özelliğini kullanarak resme gölge efekti ekleyebiliriz. Bu özelliği kullanırken gölgenin boyutunu, rengini, konumunu belirleyebilmekteyiz.

Box Shadow özelliği kullanılarak arka plandaki resme gölgelendirme etkisi vermek mümkündür. Bu sayede sayfa tasarımında derinlik hissi yaratılabilir ve görsel bir zenginlik eklenir.

2.1.2. Border Radius

CSS tasarımlarında arka plan resimleri kullanımı oldukça yaygındır. Ancak düz bir arka plan için yeterli olmayabilir. Bu nedenle CSS kodlarından biri olan Border Radius özelliği, arka plan resimlerine yuvarlatılmış köşeler vermek için kullanılır. Bu özellik, sadece resimler için değil, diğer öğeler için de kullanılabilir. Bu özellik sayesinde, web tasarımcılar arka plan resimlerini daha etkileyici bir hale getirebilirler.

Border Radius özelliği, kullanılması oldukça kolaydır. Özelliği kullanmak için, border-radius özelliğine ihtiyacınız vardır. Bu özellik, bir veya birden fazla köşenin yuvarlatılmasına izin verir. Bu özellik şu şekilde işlev görür:

Bu özellikle, arka plana yuvarlatılmış köşeler verilebilir ve sayfadaki diğer öğelerden ayrılabilir.

2.2. Filter Özelliği

CSS'in Filter özelliği, arka plan resimlerine birçok farklı efekt vermenizi sağlar. Bu özelliği kullanarak arka plan resminizde blur efekti oluşturabilirsiniz. Blur etkisi, resmi bulanık yaparak arka plandaki öğeleri homejenize eder ve site yükseklik duygusu kazandırır. Blur efekti, 5 farklı değere sahip olan değerlerle değiştirilebilir. Bu değerler arasında çıktınızı optimize etmek için oynamak isteyebileceğiniz güçlük derecesini belirleyen 'px', '%', 'em', 'rem' ve 'vw' tiplerinde ölçü birimleri bulunur.

Filter özelliğinin bir başka kullanışlı özelliği de, Hue Rotate efektidir. Bu efektle arka plan resminizin tonunu ve rengini kolayca değiştirebilirsiniz. Bu özellik için kullanabileceğiniz anahtar kelimeler: bir cam filtresi, bir kıpkırmızı renk, 180 derecelik bir dönüş. Hue Rotate etkisi, arka plan resminizdeki tüm renkleri değiştirir.

2.2.1. Blur

Blur efekti, CSS'de arka plan resimlerine uygulanabilen bir görüntü efektidir. Bu efekt, arka plandaki resmin bir bulanık etki yaratmasını sağlar. Bu efekti CSS'de sağlamak için Filter özelliği kullanılır.

Filter özelliği, birçok farklı efekti içerir. Blur efektini kullanmak için, filter özelliğinin içine blur() fonksiyonu yerleştirilir. Blur fonksiyonuna değer olarak verilen piksel miktarı, efektin ne kadar bulanık olacağını belirler.

Blur efekti, web tasarımında sıklıkla kullanılan bir efekttir. Bu efekti kullanarak, web sayfanızın arka plan resmini, hafif bir bulanıklıkla daha güzel bir hale getirebilirsiniz.

2.2.2. Hue Rotate

Filter özelliği, CSS'de arka plan resimlerine farklı efektler uygulamak için oldukça kullanışlı bir özelliktir. Bu özellik sayesinde arka plan resimlerine çok çeşitli görünümler kazandırabilirsiniz. Hue Rotate efekti, bu çeşitlilik arasında oldukça popüler olan bir seçenektir. Hue Rotate, arka plandaki resmin tonunu veya rengini değiştirmenizi sağlar.

Bu efekti kullanmak oldukça kolaydır. İlk adım olarak, resmin uygulanacak olduğu HTML öğesini seçin. Daha sonra CSS kodları içerisinde filter özelliğini kullanın ve değer olarak "hue-rotate" belirleyin. Bu değeri belirlerken derece cinsinden açı girilir. Örneğin, "hue-rotate(90deg)" ifadesi kullanarak arka plandaki resmin turuncu tonunun kırmızı tonuna dönüşmesi sağlanabilir.

Bunun yanı sıra, hue rotate değerleri iki farklı rengi birbirine karıştırarak yeni bir renk tonu oluşturabilir. Örneğin, "hue-rotate(45deg)" ifadesi ile turuncu ve sarı renkleri karıştırarak arka plandaki resmi farklı bir tonlu sarıya dönüştürebilirsiniz.

Bu efekti farklı açılarla ve farklı derecelerle deneyebilirsiniz. Ayrıca, efekti diğer CSS özellikleriyle birlikte kullanarak daha da geliştirebilirsiniz. Örneğin, Hue Rotate efektini Box Shadow ve Border Radius gibi özelliklerle birlikte kullanarak arka plandaki resme daha etkileyici bir görünüm kazandırabilirsiniz.

Bu şekilde, arka plandaki resimlere uygulanabilecek efektlerden biri olan Hue Rotate ile resmin tonunu veya rengini değiştirmek oldukça kolay. CSS içerisinde filter özelliğini kullanarak işlemlerinizi gerçekleştirebilir, resminize farklı bir görünüm kazandırabilirsiniz.

3. Parallax Scrolling

Parallax scrolling, modern website design concepts, and advancements in CSS have made this unique scroll feature popular. Parallax scrolling includes a technique that creates an illusion of depth and movement in the graphics of a website by distorting and overlaying different layers. Parallax scrolling creates motion and depth on the website, and it enables site owners to emphasize the background and foreground.

Parallax scrolling creates the illusion of depth by scrolling the background image more slowly than the rest of the page content, creating a 3D effect that helps draw the user's attention. This effect gives the website a modern feel, improves the user experience, and can help increase user engagement.

To make use of parallax scrolling, web developers need to create multiple layers and then apply different scrolled speed rates to each of these layers. The topmost layer should be the foreground area, while the subsequent ones should be layers behind it. This way, when a user scrolls down, the foreground remains in place, while the rest of the website, including the background, moves around it.

Overall, Parallax scrolling is an effective means of engaging users, creating an immersive experience on webpages, and providing more creative design options. While it takes a certain amount of technical know-how to implement, it's well worth it for those looking to add modern design elements to their websites.

3.1. Örnek Kod Parçacıkları

Parallax Scrolling efekti, web tasarımlarında sıkça kullanılan bir tekniktir. Bu efekt, arka plan resmi ve sayfada yer alan diğer öğeler arasındaki farklı hızlarda kaydırma özelliğini kullanır. Bu sayede, sıradan bir web sayfasına göre daha dinamik ve hareketli bir tasarım elde edilir.

Parallax Scrolling efektini CSS kodları kullanarak oluşturmak oldukça kolaydır. Aşağıda, bu efekti sağlamak için kullanılan örnek kod parçacıklarını bulabilirsiniz:

        .parallax {          background-attachment: fixed;          background-position: center;          background-repeat: no-repeat;          background-size: cover;          height: 100%;          position: relative;         }                .parallax-inner {          position: absolute;          top: 0;          left: 0;          width: 100%;          height: 100%;        }      

Bu örnek kod parçacıkları, parallax efektine sahip bir sayfa oluşturmanızı sağlar. Kodun içindeki ".parallax" sınıfı, efektin uygulanacağı konteyneri tanımlar. ".parallax-inner" sınıfı ise, konteyner içindeki içeriğin yer alacağı bölümü tanımlar.

Ayrıca, parallax efekti için başka örneklere de aşağıdaki kodlardan örnek alarak ulaşabilirsiniz:

• .parallax {    background-image: url(bg.jpg);    height: 100vh;    background-attachment: fixed;    background-position: center;    background-repeat: no-repeat;  }    .parallax h1 {    font-size: 60px;    font-weight: bold;    text-align: center;    color: white;    margin-top: 200px;  }    .parallax p {    font-size: 24px;    text-align: center;    color: white;    margin-top: 100px;  }

• .parallax {    background-image: url(bg2.jpg);    background-attachment: fixed;    background-size: cover;    min-height: 100%;    padding-bottom: 50px;  }    .caption {    color: white;    text-align: center;    margin-top: 150px;    font-size: 60px;    text-shadow: 1px 1px #333;  }

Bu örnek kodlar, parallax efektini uygulamanız için size fikir verebilir ve başlangıç noktası olabilir.

4. Diğer Efektler

CSS ile tasarım yaparken arka plan resimlerine yeni efektler eklemek oldukça popüler bir tekniktir. Eğer opaklık, blur efekti veya parallax scrolling gibi efektler CSS kullanarak oluşturulabiliyorsa, neden farklı tasarımlarda kullanılmaya çalışılmasın?

- Duotone: Bu efekt, arka plan resimlerinin tonunu değiştiren bir tekniktir. İki farklı rengin tonu kullanılarak, resimdeki farklı bölgeler belirginleştirilir veya vurgulanır. Bu efekti oluşturmak için CSS'de background-blend-mode: multiply; kullanılır.- Gradyan Arka Plan: Bu efekt, farklı tonlardaki bir renk paletinin arka plan resmi olarak kullanılmasıdır. Bu birkaç farklı renk olabileceği gibi, aynı renk tonunun farklı tonları da olabilir. Bu efekti CSS'de oluşturmak için, linear-gradient() kullanılır.

Yukarıdaki efektler, CSS kullanarak arka plan resimleri oluştururken uygulanabilecek birkaç popüler efektin sadece birkaç örneğidir. Farklı efektler oluşturmak, tasarımcının hayal gücüne bağlıdır.

4.1. Duotone

Duotone efekti son dönemde popüler olan bir tasarım trendidir. Bu efekt, bir arka plan resmini siyah ve beyaz tonlarında değiştirmek ve bunu birkaç rengin tonlarını kullanan efektlerle birleştirmek anlamına gelmektedir. Bu tasarım, özellikle kullanıcıların bir noktada odaklanmasını sağlamak için etkili bir yöntemdir.

Duotone efektini CSS ile uygulamak oldukça kolaydır. Arka plan resminin yüklenmesi için <div> etiketi kullanılır. Bu etiketi kullanarak background-image özelliğine, arka plan resminin bağlantısını ekleyebilirsiniz. Ardından, filter özelliğini kullanarak Duotone efektini uygulayabilirsiniz. filter özelliği url özelliği ile birlikte kullanılarak arka plandaki resme efektler eklenebilir.

Daha sonra, arka plan resmin toplam üç adet özelliği kullanılarak özelleştirilebilir. Bu özellikler; background-blend-mode, background-color ve opacity özellikleridir. background-blend-mode özelliği, arka plan resminin tonunu ayarlayan bir özelliktir. background-color özelliği arka plan resmine eklenen rengin tonunu belirler ve opacity özelliği arka plan resmine uygulanan efektin saydamlık değerini belirler.

Duotone efekti, sitenizin veya tasarımınızın şık ve modern görünmesini sağlar. Bu nedenle, arka plandaki resimleri farklı renk tonlarına bölerek Duotone efektini uygulayabilirsiniz. Bu yöntem sayesinde kullanıcıların sitenize, özellikle de ürünlere odaklanması daha kolay hale gelir.

4.2. Gradyan Arka Plan

Gradyan arka plan, web tasarımında sıkça kullanılan bir efekt olup, arka plan renginin bir renkten diğerine geçiş yapması ile oluşur. CSS'de, arka plan rengini gradayan yapmak için öncelikle linear-gradient() fonksiyonu kullanılır. Bu fonksiyon, arka plan renginin başlangıç ve bitiş renkleri arasında geçiş yapmasını sağlar.

Örneğin, aşağıdaki kod parçası, arka plan rengini mavi ile yeşil renkler arasında gradayan yapar:

Gradyan Arka Plan Örneği

"to right" ifadesi ise, geçişin sağdan sola yapılacağını belirtir. Bu ifade farklı yönler için de değiştirilebilir.

Ayrıca, opacity özelliği kullanılarak, gradayan rengin şeffaflığı da ayarlanabilir. Bu özellik sayesinde, arka plan resmi daha az belirgin hale getirilerek, diğer öğelerin ön plana çıkması sağlanır.

Gradyan Arka Plan Örneği (opacity ayarlanmış)

Burada, "rgba" fonksiyonu kullanılarak, her iki rengin de şeffaflığı %75 olarak ayarlanmıştır.

Sonuç olarak, CSS'de gradyan arka plan efekti oldukça kullanışlıdır ve web tasarımına farklı bir görsellik sağlar. Özellikle, diğer efektlerle birlikte kullanıldığında, daha etkileyici sonuçlar elde edilebilir.