Saydamlıkla ilgili CSS özellikleri

Articles

CSS'e Giriş

Bu makale, saydamlıkla ilgili CSS özelliklerini açıklar.

opacity, z-index ve clip-path özelliklerinin kullanımını ve sözdizimini öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-opacity.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-opacity.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties Related to Transparency</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>CSS Properties Related to Transparency</h2>
20        </header>
21        <article>
22            <h3>opacity</h3>
23            <section>
24                <header><h4>opacity: 1</h4></header>
25                <section class="sample-view">
26                    <div class="opaque-box">Opaque</div>
27                </section>
28                <header><h4>opacity: 0.5</h4></header>
29                <section class="sample-view">
30                    <div class="semi-transparent-box">Semi-transparent</div>
31                </section>
32                <header><h4>opacity: 0</h4></header>
33                <section class="sample-view">
34                    <div class="transparent-box">Transparent</div>
35                </section>
36                <header><h4>transition: opacity 2s ease-in-out</h4></header>
37                <section class="sample-view">
38                    <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39                </section>
40                <header><h4>Parent & Child Element</h4></header>
41                <section class="sample-view">
42                    <div class="opacity-parent">
43                        Parent Element & <span class="opacity-child">Child Element</span>
44                    </div>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>z-index</h3>
50            <section>
51                <div class="z-index-box1">1</div>
52                <div class="z-index-box2">
53                    <div class="z-index-box2-1">2-1</div>
54                    2
55                </div>
56                <div class="z-index-box3">3</div>
57            </section>
58        </article>
59        <article>
60            <h3>clip-path</h3>
61            <section>
62                <h4>Clip-path Property Examples</h4>
63                <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64                <section class="sample-view">
65                    <div class="clip-path-circle">Circle</div>
66                </section>
67                <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68                <section class="sample-view">
69                    <div class="clip-path-ellipse">Ellipse</div>
70                </section>
71                <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72                <section class="sample-view">
73                    <div class="clip-path-polygon">Polygon</div>
74                </section>
75                <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76                <section class="sample-view">
77                    <div class="clip-path-inset">Inset</div>
78                </section>
79                <header><h4>clip-path: url(#myClip)</h4></header>
80                <section class="sample-view">
81                    <div class="clip-path-url">Url</div>
82                </section>
83            </section>
84            <svg width="0" height="0">
85                <clipPath id="myClip">
86                    <circle cx="50" cy="50" r="40" />
87                </clipPath>
88            </svg>
89        </article>
90    </main>
91</body>
92</html>

Filtre efektleri

`opacity` Özelliği

 1.opaque-box {
 2    background-color: skyblue;
 3    opacity: 1; /* completely opaque */
 4    border: 1px solid black;
 5}
 6
 7.semi-transparent-box {
 8    background-color: skyblue;
 9    opacity: 0.5; /* semi-transparent */
10    border: 1px solid black;
11}
12
13.transparent-box {
14    background-color: skyblue;
15    opacity: 0; /* completely transparent */
16    border: 1px solid black;
17}
18
19.opacity-transition-box {
20    background-color: orange;
21    transition: opacity 2s ease-in-out;
22    border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26    opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30    background-color: blue;
31    opacity: 0.5;
32}
33
34.opacity-child {
35    background-color: red;
36}

opacity özelliği, bir öğenin saydamlık seviyesini ayarlamak için kullanılır. Bu özellik, tüm öğenin saydamlık seviyesini belirtir; 0'a daha yakın değerler daha saydam, 1'e daha yakın değerler ise daha opak olur. opacity özelliği, açılma ve kapanma efektleri oluşturmak için animasyonlarla birleştirilebilir.

opacity özelliği, yalnızca uygulanmış olduğu öğeyi değil, aynı zamanda onun alt öğelerini de etkiler. Bu, bir üst öğe yarı saydam olarak ayarlandığında, onun alt öğelerinin de bu saydamlığı miras alacağı anlamına gelir.

Bu örnekte, ayarlar aşağıdaki gibi yapılandırılmıştır.

opacity özelliği 1 olarak ayarlandığında, öğe tamamen opak olur, tıpkı normal bir öğe gibi.
opacity özelliği 0.5 olarak ayarlandığında, öğe yarı saydam olur.
opacity özelliği 0 olarak ayarlandığında, öğe tamamen saydam hale gelir ve hiç görünmez.
transition özelliği opacity olarak ayarlanmıştır, bu nedenle fare imleci öğenin üzerine geldiğinde, 2 saniye sonra yavaşça kaybolur ve tamamen saydam olur.
Eğer üst öğede opacity özelliği 0.5 ise, alt öğeler de yarı saydam hale gelir.

`z-index` Özelliği

 1.z-index-box1 {
 2    position: relative;
 3    width: 100px;
 4    height: 100px;
 5    background-color: red;
 6    top: 10px;
 7    left: 10px;
 8    z-index: 1; /* Displayed in the foreground */
 9}
10
11.z-index-box2 {
12    position: relative;
13    width: 100px;
14    height: 100px;
15    background-color: blue;
16    top: -100px;
17    left: 90px;
18    z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22    position: relative;
23    width: 100px;
24    height: 100px;
25    background-color: green;
26    top: -160px;
27    left: 80px;
28    z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32    position: relative;
33    width: 50px;
34    height: 50px;
35    background-color: skyblue;
36    top: 0px;
37    left: 0px;
38    z-index: 4;
39}

z-index, öğelerin üst üste sıralanma düzenini kontrol etmek için kullanılan bir CSS özelliğidir. Bu özellik, bir öğenin diğerlerinin önünde mi yoksa arkasında mı görüntüleneceğini belirler.

Kırmızı kutuda, z-index 1 olarak ayarlanmıştır, bu yüzden bu öğe diğer öğelerin önünde görünür.
Mavi kutuda, z-index 0 olarak ayarlanmıştır, bu yüzden bu öğe kırmızı kutunun arkasında görünür.
Yeşil kutuda, z-index 2 olarak ayarlanmıştır ve en önde görünür.
Açık mavi kutuda, en yüksek z-index olan 4 belirtilmiştir, fakat üst öğede z-index 0 olduğundan en önde görünmez.

Temel Mekanizma

z-index özelliği sayısal bir değer alır ve daha büyük bir değere sahip elemanlar, daha küçük bir değere sahip elemanların önünde görüntülenir. Varsayılan olarak, z-index değeri belirtilmeyen elemanlar HTML'de göründükleri sıraya göre sıralanır.

Ancak, z-index'in etkili olabilmesi için elemanın position özelliği relative, absolute, fixed veya sticky olarak ayarlanmalıdır. Eğer position değeri static ise, z-index hiçbir etkisi olmaz.

Değerler

z-index'e pozitif bir tamsayı atanırsa, eleman daha önde görüntülenir. Sayı ne kadar büyükse, eleman diğer elemanların önünde o kadar fazla görüntülenir.
- z-index 0 olarak ayarlandığında, varsayılan sıralama düzeni korunur.
- z-index 1 olarak ayarlandığında, eleman diğer elemanların bir katman önünde görüntülenir.
z-index'e negatif bir tamsayı atanırsa, eleman daha geride görüntülenir. Sayı ne kadar küçükse, eleman diğer elemanların arkasında o kadar fazla görüntülenir.
- z-index -1 olarak ayarlandığında, eleman diğer elemanların bir katman arkasında görüntülenir.

Notlar

z-index, üst elemanın z-index değerine bağlıdır. Eğer üst eleman için bir z-index belirtilmişse, bu üst elemanın içerisindeki bağıl sıralama düzeni uygulanır. Bu, sıralama bağlamı (stacking context) olarak adlandırılır. Bu nedenle, bir alt elemanın z-index değeri yüksek olsa bile, üst elemanın z-index değeri düşükse, eleman diğer elemanların önünde görünmez.

`clip-path` Özelliği

CSS'deki clip-path, elemanları belirli şekillerde kırpmak için kullanılan bir özelliktir. Normalde, elemanlar dikdörtgen kutular olarak görüntülenir, ancak clip-path ile elemanlar daireler veya çokgenler gibi karmaşık şekillerde görüntülenebilir. Bu, görsel tasarımlar veya etkileşimli efektler oluşturmak için oldukça kullanışlı bir araçtır.

clip-path özelliği, bir elemanın görüntüleme alanını kısıtlar ve belirtilen şeklin dışında kalan kısımları gizler. Sonraki adımda, sıkça kullanılan şekillerin nasıl belirtileceğini açıklayacağız.

Ana Kırpma Şekilleri

`circle()`

1.clip-path-circle {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: circle(50% at 50% 50%);
6}

circle() bir elemanı dairesel bir şekle dönüştürür. Şekli, dairenin merkezi ve yarıçapını belirleyerek kontrol edebilirsiniz.

İlk 50%, dairenin yarıçapıdır (elemanın genişliğinin ya da yüksekliğinin yüzdesi olarak).
Sonraki at 50% 50%, dairenin merkezi konumudur (elemanın genişliği ve yüksekliğinin yüzdesi olarak).

Burada, elemanın boyutlarının yarısı kadar bir yarıçapa sahip, elemanın merkezinde bulunan bir daire belirtilir.

`ellipse()`

1.clip-path-ellipse {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: ellipse(50% 30% at 50% 50%);
6}

ellipse(), bir elemanı eliptik bir şekle kırpar. Genişlik ve yüksekliğin yarıçaplarını ve merkezin konumunu belirlersiniz.

İlk 50% 30%, genişlik ve yüksekliğin yarıçaplarıdır.
Sonraki at 50% 50%, elipsin merkez konumudur.

Bu örnekte, genişliği %50 ve yüksekliği %30 olan, elemanın merkezine yerleştirilmiş bir elips tanımlanmıştır.

`polygon()`

1.clip-path-polygon {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}

polygon() belirli bir dizi köşeyi birleştirerek bir çokgen oluşturur. Her köşe, eleman içindeki göreceli koordinatlarla belirtilir.

Bu örnekte, üç köşe (üst merkez, alt sağ, alt sol) belirtilmiştir ve eleman bir üçgen şeklinde kırpılmıştır. polygon(), oldukça esnektir ve herhangi bir şekil oluşturabilir.

`inset()`

1.clip-path-inset {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: inset(10% 20% 30% 40%);
6}

inset(), bir elemanın dış kenarlarından içeriye doğru kırpma yapar. Dört kenarın her birinden olan mesafeyi belirleyerek bir dikdörtgen tanımlayın.

10%, üst kenardan olan mesafedir.
20%, sağ kenardan olan mesafedir.
30%, alt kenardan olan mesafedir.
40%, sol kenardan olan mesafedir.

Bu tanım, elemanın içinde küçülen bir dikdörtgen oluşturur.

SVG kullanarak `clip-path`

 1/*
 2<svg width="0" height="0">
 3  <clipPath id="myClip">
 4    <circle cx="50" cy="50" r="40" />
 5  </clipPath>
 6</svg>
 7*/
 8.clip-path-url {
 9    width: 100px;
10    height: 100px;
11    background-color: green;
12    clip-path: url(#myClip);
13}

CSS clip-path, yalnızca temel şekilleri değil, aynı zamanda bir SVG <clipPath> öğesi kullanarak karmaşık şekilleri de kırpabilir.

Bu örnekte, SVG içinde myClip kimliğine sahip dairesel bir kırpma yolu bir HTML öğesine uygulanmıştı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

`object-fit` ve `object-position` Özellikleri Filtre Efektleriyle İlgili CSS Özellikleri

Saydamlıkla ilgili CSS özellikleri

YouTube Video

Önizleme için HTML

Filtre efektleri

opacity Özelliği

z-index Özelliği

Temel Mekanizma

Değerler

Notlar

clip-path Özelliği

Ana Kırpma Şekilleri

circle()

ellipse()

polygon()

inset()

SVG kullanarak clip-path

YouTube Video

`opacity` Özelliği

`z-index` Özelliği

`clip-path` Özelliği

`circle()`

`ellipse()`

`polygon()`

`inset()`

SVG kullanarak `clip-path`