Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de cursor özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

37 views

CSS'de cursor özelliği, bir öğe üzerine fare işaretçisi geldiğinde gösterilecek imleç tipini belirlemenize olanak tanır. Bu, kullanıcı arayüzünde gezinirken kullanıcıya ekstra görsel ipuçları sağlayarak, öğelerin etkileşimli olduğunu veya belirli bir işlevi yerine getirdiğini belirtmek için kullanışlıdır.

cursor özelliği için çeşitli değerler kullanılabilir, bunlar arasında en yaygın olanları şunlardır:

auto: Tarayıcının duruma göre otomatik olarak bir imleç seçmesini sağlar.

default: Varsayılan işaretçi imleci.

pointer: El imleci, genellikle bir bağlantı üzerine gelindiğinde görüntülenir.

text: I-ışını imleci, metin üzerine gelindiğinde görüntülenir ve metnin seçilebileceğini gösterir.

wait: Bir işlemin devam ettiğini gösteren saat veya kum saati imleci.

help: Soru işareti veya başka bir "yardım" imleci, yardım veya daha fazla bilgi mevcut olduğunu gösterir.

crosshair: Nişan almak için kullanılan artı şeklinde bir imleç.

move: Taşınabilir bir öğe olduğunu belirten bir imleç.

not-allowed: Etkileşimde bulunulamayacak bir öğe üzerine geldiğinde görüntülenir, genellikle bir yasak işareti veya çarpı şeklindedir.

Örnek kullanımlar:

.button {
  cursor: pointer;
}

.disabled-button {
  cursor: not-allowed;
}

.custom-cursor {
  cursor: url('custom-cursor.png'), auto;
}

 

TailwinCSS:

Class
Properties
Preview 
cursor-auto cursor: auto; cursor-auto.svg
cursor-default cursor: default; cursor-default.svg
cursor-pointer cursor: pointer; cursor-pointer.svg
cursor-wait cursor: wait; cursor-wait.svg
cursor-text cursor: text; cursor-text.svg
cursor-move cursor: move; cursor-move.svg
cursor-help cursor: help; cursor-help.svg
cursor-not-allowed cursor: not-allowed; cursor-not-allowed.svg
cursor-none cursor: none;  
cursor-context-menu cursor: context-menu; cursor-context-menu.svg
cursor-progress cursor: progress; cursor-progress.svg
cursor-cell cursor: cell; cursor-cell.svg
cursor-crosshair cursor: crosshair; cursor-crosshair.svg
cursor-vertical-text cursor: vertical-text; cursor-vertical-text.svg
cursor-alias cursor: alias; cursor-alias.svg
cursor-copy cursor: copy; cursor-copy.svg
cursor-no-drop cursor: no-drop; cursor-no-drop.svg
cursor-grab cursor: grab; cursor-grab.svg
cursor-grabbing cursor: grabbing; cursor-grabbing.svg
cursor-all-scroll cursor: all-scroll; cursor-all-scroll.svg
cursor-col-resize cursor: col-resize; cursor-col-resize.svg
cursor-row-resize cursor: row-resize; cursor-row-resize.svg
cursor-n-resize cursor: n-resize; cursor-n-resize.svg
cursor-e-resize cursor: e-resize; cursor-e-resize.svg
cursor-s-resize cursor: s-resize; cursor-s-resize.svg
cursor-w-resize cursor: w-resize; cursor-w-resize.svg
cursor-ne-resize cursor: ne-resize; cursor-ne-resize.svg
cursor-nw-resize cursor: nw-resize; cursor-nw-resize.svg
cursor-se-resize cursor: se-resize; cursor-se-resize.svg
cursor-sw-resize cursor: sw-resize; cursor-sw-resize.svg
cursor-ew-resize cursor: ew-resize; cursor-ew-resize.svg
cursor-ns-resize cursor: ns-resize; cursor-ns-resize.svg
cursor-nesw-resize cursor: nesw-resize; cursor-nesw-resize.svg
cursor-nwse-resize cursor: nwse-resize; cursor-nwse-resize.svg
cursor-zoom-in cursor: zoom-in; cursor-zoom-in.svg
cursor-zoom-out cursor: zoom-out; cursor-zoom-out.svg

 

1.png

 

 

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...