Articles
CSS'e Giriş
Filtre Efektleriyle İlgili CSS Özellikleri

Filtre Efektleriyle İlgili CSS Özellikleri

Bu makale, filtre efektleriyle ilgili CSS özelliklerini açıklar.

filter ve transform gibi özelliklerin nasıl yazılacağını ve ne işe yaradıklarını öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-effect.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(100px, 50px, 30px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin-left-top">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156                <header><h4>transform-origin: 50% 50% 50px</h4></header>
157                <section class="sample-view">
158                    <div class="transform-box transform-origin-3d">Transform<br>3D</div>
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Filtre efektleri

filter özelliği 

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

filter özelliği, öğelere görsel efektler uygulamak için kullanılır. Görüntüleri veya öğeleri bulanıklaştırma, parlaklığı ayarlama ve kontrastı değiştirme gibi çeşitli efektleri kolayca ekleyebilirsiniz.

  • filtered-image-sepia sınıfına sepya efekti uygulanmıştır.
  • filtered-image-opacity sınıfına opaklık efekti uygulanmıştır.
  • filtered-image-multiple sınıfına parlaklık, kontrast ve sepya efektleri uygulanmıştır.

Temel Sözdizimi 

1filter: none | <filter-function> [<filter-function>]*;

filter özelliği için none veya bir filter-function belirtin.

  • none belirtildiğinde hiçbir filtre efekti uygulanmaz.
  • <filter-function> içinde uygulanacak filtre fonksiyonunu belirtin. Birden fazla filtre, aralarına boşluk koyarak belirtilebilir.

Filtre fonksiyon türleri

blur() 
1filter: blur(5px);

blur() fonksiyonu bir bulanıklık efekti uygular.

  • Değer, piksellerle (px) belirtilir ve değer ne kadar büyükse bulanıklık derecesi o kadar güçlü olur.
brightness() 
1filter: brightness(1.5);

brightness() fonksiyonu parlaklığı ayarlar.

  • Değer, 0 (tamamen karanlık) ile 1 (orijinal parlaklık) arasında belirtilir. 1'den büyük bir değer belirlemek öğeyi daha parlak yapar.
contrast() 
1filter: contrast(2);

contrast() fonksiyonu kontrastı ayarlar.

  • Değer, 0 (gri tonlama) ile 1 (orijinal kontrast) arasında belirtilir ve 1'den büyük değerler kontrastı artırır.
grayscale() 
1filter: grayscale(1);

grayscale() fonksiyonu öğeyi siyah-beyaza dönüştürür.

  • 0 (orijinal renk) ile 1 (tamamen monokrom) arasında bir değer belirtilir.
hue-rotate() 
1filter: hue-rotate(90deg);

hue-rotate() fonksiyonu renk tonunu döndürür.

  • Değerler derece (deg) cinsinden belirtilir ve renk tonunu döndürerek renk değişiklikleri uygulanır. Renk tonu 0deg ile 360deg arasında döner.
invert() 
1filter: invert(1);

invert() fonksiyonu renkleri tersine çevirir.

  • Değerler 0 (orijinal renk) ile 1 (tamamen ters çevrilmiş) arasında belirtilir.
opacity() 
1filter: opacity(0.5);

opacity() fonksiyonu bir öğenin saydamlığını değiştirir.

  • Değerler 0 (tamamen saydam) ile 1 (opak) arasında belirtilir.
saturate() 
1filter: saturate(2);

saturate() fonksiyonu doygunluğu ayarlar.

  • Değerler 0 (monokrom) ile 1 (orijinal doygunluk) arasında değişir ve 1'den büyük değerler belirtilerek doygunluk artırılabilir.
sepia() 
1filter: sepia(1);

sepia() fonksiyonu görüntüyü sepya tonuna dönüştürür.

  • Değerler 0 (orijinal renk) ile 1 (tam sepya tonu) arasında belirtilir.

Birden Fazla Filtrenin Uygulanması 

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

Birden fazla filtre, aralarına boşluklar eklenerek uygulanabilir.

filter Özelliğinin Avantajları

filter özelliği, görsel olarak çekici ögeleri kolayca oluşturmak için güçlü bir araçtır. Şu avantajları vardır:.

  • Görsel efektler kolayca eklenebilir.
  • Görüntüler, herhangi bir resim düzenleme yazılımı olmadan yalnızca CSS kullanılarak ayarlanabilir.
  • Animasyonlarla birleştirilerek dinamik efektler oluşturulabilir.

transform Özelliği 

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

transform özelliği, ögelere 2D veya 3D dönüşümler uygulamak için kullanılır. CSS ile konum, döndürme, ölçeklendirme (büyütme/küçültme) ve eğme gibi çeşitli görsel dönüşümler belirtilebilir. transform özelliği genellikle animasyonlarla birlikte kullanılır ve dinamik kullanıcı arayüzü öğelerinin oluşturulmasına yardımcı olur.

  • transform-scale sınıfında, elementin üzerine gelindiğinde genişliği 1.5 kat, yüksekliği ise 2 kat büyütülür.

  • transform-skew sınıfında, elementin üzerine gelindiğinde X ekseni boyunca 30 derece, Y ekseni boyunca 20 derece döndürülür.

  • transform-rotate sınıfında, elementin üzerine gelindiğinde 45 derece döndürülür ve boyutu 1.5 kat büyütülür.

Temel Sözdizimi 

1transform: none | <transform-function> [<transform-function>]*;

transform özelliği ya none ya da bir transform-function belirtir.

  • none belirtildiğinde, hiçbir dönüşüm uygulanmaz.
  • Dönüşüm türünü <transform-function> ile belirtin. Birden fazla dönüşüm, aralarına boşluk konularak uygulanabilir.

Ana Dönüşüm Fonksiyonları

translate() 
1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */
  • translate(x, y) fonksiyonu, bir elementi X ve Y eksenleri boyunca belirtilen mesafelere taşır. x ve y değerlerini px veya % gibi birimlerle belirtin. translateX() veya translateY() ile ayrı ayrı da belirtebilirsiniz.
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • rotate(angle) fonksiyonu, bir elementi belirtilen açıyla derece cinsinden (deg) döndürür.
scale() 
1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */
  • scale(x, y) fonksiyonu, bir elementi X ve Y eksenleri boyunca ölçeklendirir. x ve y, orijinal boyuta göre ölçekleme faktörleridir. Örneğin, scale(2, 2) boyutu iki katına çıkarır. scaleX() veya scaleY() ile ayrı ayrı belirtebilirsiniz.
skew() 
1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);
  • skew(x-angle, y-angle) fonksiyonu, bir elementi X ve Y eksenleri boyunca belirtilen açılarla eğriltir. skewX() veya skewY() ile ayrı ayrı belirtebilirsiniz.
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • matrix() fonksiyonu, birden fazla dönüşümü bir araya getirmek için bir matris belirtir. Genellikle diğer dönüşüm fonksiyonlarıyla birlikte kullanılır.

3D Dönüşüm Fonksiyonları

translate3d() 
1/* Move 100px right(X-axis), 50px down(Y-axis),
2   30px forward(Z-zxis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Preserve 3D positioning of children */
6transform-style: preserve-3d;
7
8/* Add 3D depth with 600px perspective */
9perspective: 600px;
  • translate3d() fonksiyonu, 3D uzayda taşıma işlemi gerçekleştirir.
    • Bu işlem X, Y ve Z eksenleri olmak üzere üç boyutta belirtilebilir.
  • transform-style özelliğini preserve-3d olarak ve perspective özelliğini 600px olarak ayarlayarak, alt öğelere derinlikli üç boyutlu bir hareket efekti uygulanır.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • rotate3d() fonksiyonu, 3D uzayda dönme işlemi gerçekleştirir.
    • Bir elementi X, Y ve Z eksenlerine göre döndürür.

Birden fazla dönüşümün birleştirilmesi 

1transform: rotate(45deg) scale(1.5);

transform özelliği aynı anda birden fazla dönüşümü uygulayabilir. Örneğin, döndürme ve ölçeklendirme işlemlerini birleştirebilirsiniz.

Kullanım için Anahtar Noktalar

transform özelliği, öğeleri görsel olarak dönüştürmek için CSS'te güçlü bir araçtır. Çeşitli işlevleri birleştirerek etkileşimli ve dinamik kullanıcı arayüzleri oluşturabilirsiniz.

  • transform özelliği, öğeleri doğrudan dönüştürmenizi sağlar ve DOM düzenini değiştirmeden görsel düzenlemeler yapmanıza imkan tanır.
  • transition veya animation ile birleştirildiğinde, animasyonlar ve etkileşimli öğeler oluşturmak için çok kullanışlıdır; dinamik tasarımları mümkün kılar.

transform-origin özelliği 

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}
22
23.transform-origin-3d:hover {
24    /* Specify the Z-axis as well */
25    transform-origin: 50% 50% 50px;
26    transform: rotate(45deg) scale(1.2);
27}

transform-origin özelliği, transform özelliğiyle uygulanan dönüşümler için referans noktasını ayarlamak için kullanılır. Öğenin dönüşümleri için referans noktasını belirleyebilirsiniz; böylece döndürme veya ölçeklendirme gibi efektlerin hangi pozisyon etrafında uygulanacağını kontrol edebilirsiniz.

Bu örnekte, fareyi öğenin üzerine getirdiğinizde, transform-origin özelliğiyle belirlenen nokta temel alınarak öğe aynı anda döner ve ölçeklenir.

Temel Sözdizimi 

1transform-origin: x y z;

transform-origin özelliği için x, y ve z eksenlerini şu şekilde belirtebilirsiniz.

  • x için, X eksenindeki (yatay yöndeki) referans noktasını belirtin. Değerler, anahtar kelimeler (left, center, right) veya uzunluk (px, %, vb.) kullanılarak belirtilebilir.
  • y için, Y eksenindeki (dikey yöndeki) referans noktasını belirtin. Değerler, anahtar kelimeler (top, center, bottom) veya uzunluklar kullanılarak belirtilebilir.
  • z için, Z eksenindeki (derinlik yönündeki) referans noktasını belirtin. Bu, yalnızca 3D dönüşümlerle kullanılabilir. Opsiyoneldir ve varsayılan değer 0dır.

Varsayılan Değer 

1transform-origin: 50% 50%; /* Center of the element */

transform-origin özelliği için varsayılan değer, X ve Y eksenleri için öğenin merkezi olarak belirlenmiştir. Bu, dönüşümlerin varsayılan olarak öğenin merkezi referans noktası alınarak uygulandığı anlamına gelir.

Değerler Nasıl Belirtilir

transform-origin özelliği için değerler, anahtar kelimeler, yüzdeler ve px, em gibi uzunluk birimleri kullanılarak belirtilebilir.

  1. Anahtar Kelime Belirleme

    • left: X ekseni referansını elemanın sol kenarına ayarlar.
    • right: X ekseni referansını elemanın sağ kenarına ayarlar.
    • top: Y ekseni referansını elemanın üst kenarına ayarlar.
    • bottom: Y ekseni referansını elemanın alt kenarına ayarlar.
    • center: X veya Y ekseni referansını elemanın merkezine ayarlar.

  2. Yüzde Belirtilmesi

    • 0%: Sol ya da üst kenara ayarlar.
    • 50%: Merkeze ayarlar.
    • 100%: Sağ ya da alt kenara ayarlar.

  3. Uzunluk Belirtimi

    • px, em gibi belirli uzunlukları kullanarak referans noktasını ince şekilde ayarlayabilirsiniz.

3D Dönüşümlerde transform-origin 

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin 3D dönüşümler için de kullanılabilir. 3D dönüşümlerde, Z ekseni üzerindeki referans noktasını da belirtebilirsiniz. Örneğin, derinlik yönünde dönüş merkezini belirterek derinlik hissine sahip dönüşümler yapmak mümkündür.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Saydamlıkla ilgili CSS özellikleriAnimasyonla İlgili CSS Özellikleri