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>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</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:.

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}
  • Metin
    • Bir dizeyi doğrudan çift tırnak işaretleriyle ("") çevreleyerek metin ekleyebilirsiniz.
1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}
  • Görsel
    • Bir görseli url() fonksiyonunu kullanarak ekleyebilirsiniz.
 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}
  • Sayaç
    • Bir sayacı görüntülemek için counter() fonksiyonunu kullanın.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Öznitelik
    • attr() fonksiyonu, bir HTML öğesinin öznitelik değerini göstermek için kullanılabilir. Örneğin, title özelliğini görüntüleyebilirsiniz.
1/* None */
2.content-none::before {
3    content: none;
4}
  • yok
    • Hiçbir içeriğin görüntülenmemesi gerektiğini belirtir. Bu, varsayılan durumdur.

Kullanım Notları

content özelliğini kullanırken aşağıdaki noktalara dikkat edin:.

  • 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.

cursor Özelliği

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:.

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }
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ı gösteren bir yeniden boyutlandırma imleci.

  • s-resize: Aşağıyı gösteren bir yeniden boyutlandırma imleci.

  • e-resize: Sağı gösteren bir yeniden boyutlandırma imleci.

  • w-resize: Solu gösteren bir yeniden boyutlandırma imleci.

  • ne-resize: Sağ üst köşeyi gösteren bir yeniden boyutlandırma imleci.

  • nw-resize: Sol üst köşeyi gösteren bir yeniden boyutlandırma imleci.

  • se-resize: Sağ alt köşeyi gösteren bir yeniden boyutlandırma imleci.

  • sw-resize: Sol alt köşeyi gösteren bir yeniden boyutlandırma imleci.

Ö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.

Değer Türleri

  • Resize (yeniden boyutlandır) özelliği, bir öğenin hangi yönlerde yeniden boyutlandırılabileceğini belirtir. Aşağıdaki değerleri belirtebilirsiniz.
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.
none
  • none belirtildiğinde, elementin yeniden boyutlandırılması devre dışı bırakılır. Bu varsayılan değerdir.
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 ÖzellikleriFloat ile ilgili CSS Özellikleri