Articles
CSS'e Giriş
Kullanıcı Arayüzü ile İlgili CSS Özellikleri

Kullanıcı Arayüzü ile İlgili CSS Özellikleri

Bu makale, kullanıcı arayüzü ile ilgili CSS özelliklerini açıklar.

content, cursor, pointer-events ve resize özellikleri ile bunların kullanım durumlarını ve nasıl yazıldıklarını öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-ui.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-ui.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>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</html>

Kullanıcı Arayüzü ile İlgili

content özelliği 

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

content özelliği, ağırlıklı olarak ::before veya ::after olan pseudo-elementlere içerik eklemek için kullanılır. Bu özellik, elementin içinde doğrudan görüntülenmeyen metinler, görseller, sayaçlar vb. tanımlamak için kullanılır. Ana rolü, doğrudan HTML'de yazılmayan dekoratif içerik veya ek bilgileri stil sayfalarıyla kontrol etmenize izin vermektir.

Bu örnekte, elementin önüne "Note: " ve sonuna "(End)" eklenmiştir. Bunlar sırasıyla ::before ve ::after pseudo-elementlerini kullanır.

content özelliğinin değerleri 

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

content özelliği aşağıdaki değerleri alabilir:.

  • Metin: Dizeleri "" içine alarak doğrudan belirtin. Metin ekler.
  • Görsel: Görseller eklemek için url() fonksiyonunu kullanın.
  • Sayaç: Sayaçları görüntülemek için counter() fonksiyonunu kullanın.
  • Özellik: HTML elementlerinin özellik değerlerini görüntülemek için attr() fonksiyonunu kullanın. Örneğin, title özelliğini görüntüleyebilirsiniz.
  • none: Hiçbir içeriğin görüntülenmeyeceğini belirtir. Bu, varsayılan durumdur.

Kullanım Notları

  • content özelliği yalnızca pseudo-elementlere uygulanır, normal elementlere değil.
  • DOM'a eklenmediği için doğrudan JavaScript ile manipüle edilemez.
  • Düzeni etkileyebileceğinden, genellikle dekoratif veya ek bilgi görüntülemek için kullanılır.

Örnek 

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

Bu, bir <p> etiketinin önüne bir simge ekleme örneğidir. Bu şekilde, stil sayfalarıyla içeriği görsel olarak tamamlayabilirsiniz.

cursor Özelliği 

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

cursor özelliği, fare imleci bir öğe üzerine geldiğinde görüntülenecek imleç türünü belirtmek için kullanılır. Çeşitli imleç stilleri belirtebilirsiniz ve bu özellik, kullanıcı deneyimini iyileştirmek için genellikle etkileşimli öğelere uygulanır.

Ana İmleç Türleri

Aşağıdaki değerler imleç türleri olarak belirtilebilir:.

default 
- `default`, normal ok imlecidir (tarayıcının varsayılan imleci).
pointer 
- `pointer`, bir bağlantının üzerine gelindiğinde görüntülenen el şeklindeki imleçtir.
text 
- `text`, metnin seçilebileceği alanlarda görüntülenen I-şeklindeki imleçtir.
move 
- `move`, bir öğenin sürüklenebileceği durumlarda kullanılan çapraz şeklindeki imleçtir.
crosshair 
- `crosshair`, hassas seçimler için kullanılan bir artı işareti şeklindeki imleçtir.
not-allowed 
- `not-allowed`, izin verilmeyen bölgeler veya işlemler için kullanılan bir imleçtir.
help 
- `help`, yardım bilgisi sağlayabilecek öğelerin üzerinde beliren soru işareti simgeli bir imleçtir.
wait 
- `wait`, işleme durumunu temsil eden kum saati veya dairesel bir imleçtir.
progress 
- `progress`, işlemde olan bir durumu temsil eden bir imleçtir. Ancak, kullanıcının diğer işlemleri gerçekleştirebileceğini belirtir.
grab 
- `grab`, sürüklenebilir öğeleri tutmak için kullanılan bir imleçtir.
grabbing 
- `grabbing`, bir öğenin sürüklenmekte olduğunu belirten bir imleçtir.
resize 
- `resize`, bir pencerenin veya öğenin boyutlandırılabileceği durumlarda kullanılan bir imleçtir. Yöne bağlı olarak farklı türler vardır.
    - **`n-resize`**: yukarı yönde yeniden boyutlandırma.
    - **`s-resize`**: aşağı yönde yeniden boyutlandırma.
    - **`e-resize`**: sağa doğru yeniden boyutlandırma.
    - **`w-resize`**: sola doğru yeniden boyutlandırma.
    - **`ne-resize`**: sağ üst köşeye doğru yeniden boyutlandırma.
    - **`nw-resize`**: sol üst köşeye doğru yeniden boyutlandırma.
    - **`se-resize`**: sağ alt köşeye doğru yeniden boyutlandırma.
    - **`sw-resize`**: sol alt köşeye doğru yeniden boyutlandırma.

Özel imleç 

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

url() kullanarak özel bir imleç belirtmek de mümkündür.

  • Bu örnekte, custom-cursor.png imleç için kullanılan resim dosyasıdır. Bu resim mevcut değilse, tarayıcının varsayılan imleci auto ile gösterilir.

Özet

  • cursor özelliği, bir kullanıcı bir öğenin üzerindeyken hangi imlecinin gösterilmesi gerektiğini belirtir.
  • Kullanıma bağlı olarak farklı imleç stilleri mevcuttur ve özel imleçler de ayarlanabilir.
  • Etkileşimli unsurlar ve kısıtlı işlemler için uygun imleç stilleri seçilerek, daha kullanıcı dostu bir arayüz sağlanabilir.

pointer-events özelliği 

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

pointer-events özelliği, fare, dokunma ve kalem gibi işaretçi cihazlardan gelen olayların bir öğe tarafından nasıl işleneceğini kontrol etmek için kullanılır. Normalde, bir öğeye kullanıcı tarafından tıklanıldığında veya üzerine gelindiğinde işaretçi olayları alınır, ancak bu davranış bu özellik kullanılarak değiştirilebilir.

  • pointer-events-auto sınıfında, pointer-events özelliği auto olarak ayarlanır ve normal tıklama ve üzerine gelme olaylarının işlenmesine olanak tanır. Bu öğe tıklanabilir, bu yüzden üzerine tıklandığında bir mesaj görüntülenir.
  • pointer-events-auto sınıfında, pointer-events özelliği none olarak ayarlanır, bu nedenle öğe işaretçi olaylarını almaz. cursor özelliği pointer olarak ayarlansa bile, fare imleci değişmez ve altındaki diğer öğeler tıklanabilir hale gelir.

Değer Türleri

  • pointer-events özelliği, bir öğenin işaretçi olaylarını alıp almayacağını ve nasıl alacağını belirtir. Aşağıdaki değerleri belirtebilirsiniz.
auto
  • auto, varsayılan değerdir ve element normal olarak işaretçi olaylarını alır.
none
  • none belirtildiğinde, element işaretçi olaylarını almaz. Element, tıklama ve fare üzerine gelme gibi etkileşimleri devre dışı bırakır, ancak altındaki diğer elementler işaretçi olaylarını alabilir.
visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit 
1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;
  • Bu değerler esas olarak SVG elementleri için kullanılır. Her bir değer, bir elementin belirli bölümlerinin (örneğin, dolgu, kontur, vb.) işaretçi olaylarına yanıt verip vermediğini kontrol eder. Genellikle normal HTML elementleriyle kullanılmaz.

Kullanım için Anahtar Noktalar

pointer-events özelliğinin nasıl kullanılacağına dair bazı örnekler.

  1. Devre dışı bırakmak istediğiniz elementlerin seçilmesi

    • none değeri, butonlar veya bağlantılar gibi elementleri geçici olarak devre dışı bırakmak için faydalıdır.

  2. Üst üste binen elementlerle kullanım

    • position özelliği absolute olarak ayarlandığında veya z-index özelliğiyle elementler tabakalandığında, üstteki element için pointer-events özelliğini none olarak ayarlamak, işaretçi olaylarının altındaki elemente gönderilmesini sağlar.

resize özelliği 

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

resize özelliği, bir elementin kullanıcı tarafından hangi yönde yeniden boyutlandırılabileceğini belirten bir CSS özelliğidir. Bu özelliği kullanarak, elementlerin dikey veya yatay olarak sürüklenerek yeniden boyutlandırılmasını veya tamamen devre dışı bırakılmasını sağlayabilirsiniz.

Bu örnekte, bir metin alanının yeniden boyutlandırılabileceği yön resize özelliği kullanılarak belirtilmiştir.

  • resize: both; ile bir element hem yatay hem de dikey olarak yeniden boyutlandırılabilir.
  • resize: horizontal; ile bir element yalnızca yatay olarak yeniden boyutlandırılabilir.
  • resize: vertical; ile bir element yalnızca dikey olarak yeniden boyutlandırılabilir.
  • resize: none; ile bir element yeniden boyutlandırılamaz.

Değer Türleri

  • resize özelliğine, bir elementin hangi yönde yeniden boyutlandırılabileceğini belirten bir değer atanır. Aşağıdaki değerleri belirtebilirsiniz.
none
  • none belirtildiğinde, elementin yeniden boyutlandırılması devre dışı bırakılır. Bu varsayılan değerdir.
both
  • both belirtildiğinde, element hem dikey hem de yatay yönde yeniden boyutlandırılabilir.
horizontal
  • horizontal belirtildiğinde, element yalnızca yatay yönde (genişlik) yeniden boyutlandırılabilir.
vertical
  • vertical belirtildiğinde, element yalnızca dikey yönde (yükseklik) yeniden boyutlandırılabilir.
inherit
  • inherit değerini belirtmek, bir öğenin resize özelliğini ebeveyninden miras almasını sağlar.

Notlar

  • Bir öğeyi yeniden boyutlandırılabilir hale getirmek için resize özelliği ile birlikte overflow özelliğini de ayarlamanız gerekir. Yeniden boyutlandırılabilir öğeler bir kaydırma çubuğu gerektirebilir ve genellikle overflow: auto ayarlanır.
  • Yeniden boyutlandırma genellikle div ve textarea gibi blok öğeleriyle kullanılı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

3D Animasyonla İlgili CSS Özellikleri