Kurzor myši - je nedílnou součástí uživatelského rozhraní, které nám pomáhá komunikovat s počítačem. Ve výchozím nastavení je kurzor znázorněn vodorovně, ale co když jej chcete změnit na vertikální? V tomto článku vám řekneme, jak snadno a rychle to udělat.
Změna vzhledu kurzoru může být užitečné, pokud chcete vytvořit jedinečný design pro svůj web nebo aplikaci. Vertikální kurzor může přidat na stránku zajímavý důraz a učinit ji stylovější. Než začnete se změnou, musíte pochopit, že se to provádí pomocí CSS.
Chcete-li změnit kurzor z horizontálního na vertikální, budete muset použít vlastnost cursor v CSS. K vytvoření vertikálního kurzoru můžete použít hodnotu ew-resize. Tento kurzor bude prezentován jako vertikální dvojitá šipka a bude vypadat skvěle na vaší stránce.
Co je kurzor?
Kurzor hraje důležitou roli ve vizuální navigaci a interakci s počítačovými programy a rozhraními. Pomáhá uživateli identifikovat aktuální pozici na obrazovce, Vybrat objekty, přesouvat je, zadávat text a provádět další akce.
Kurzor může mít různé tvary a styly, které lze upravit podle požadavků uživatele nebo aplikace. Pomocí kurzoru můžete také ukazovat na různé prvky rozhraní, označovat aktivní oblasti a signalizovat aktuální stav systému nebo programu.
Druhy kurzorů
Webové prohlížeče nabízejí různé možnosti kurzorů, které označují různé akce, když najedete na prvky webové stránky. Pomocí CSS-vlastnosti cursoru lze nastavit nejen běžný ukazatel (šipku), ale i další tvary kurzoru.
Mezi nejčastěji používané odrůdy kurzorů lze rozlišit následující:
- auto prohlížeč sám určuje vhodný kurzor na základě aktuálního kontextu;
- default je běžný ukazatel, který se používá ve výchozím nastavení;
- pointer-ukazatel se zdviženým ukazováčkem, který ukazuje na možnost kliknutí;
- crosshair-kříž, který označuje možnost zvýraznění konkrétní oblasti;
- text-vertikální vlastnost, která označuje možnost zadávání textu;
- move-kurzor se šipkami, ukazuje, že prvek lze přesunout;
- wait-Kruhový kurzor s hodinovou šipkou označující čekání;
- pomoc-otazník v kruhu, který naznačuje možnost získání pomoci;
- not-allowed je zakázaná značka, která ukazuje na nemožnost provedení akce.
Každý z těchto kurzorů poskytuje uživatelům informace o tom, jakou akci lze provést, když najedete na položku webové stránky.
Změna kurzoru
Weboví vývojáři mohou změnit vzhled kurzoru, aby vytvořili intuitivnější uživatelský zážitek a zdůraznili konkrétní funkčnost webové stránky. Jednou z možností, jak změnit kurzor, je převést jej z horizontální polohy do vertikální.
Chcete-li změnit horizontální kurzor na vertikální, musí developer použít vlastnost cursor s potřebným významem. V tomto případě použijeme hodnotu ew-resize, který označuje vertikální velikost:
cursor: ew-resize;Po aplikaci této vlastnosti CSS na požadovaný prvek bude kurzor zobrazen jako obousměrná šipka, která označuje možnost změny velikosti položky vodorovně. Změna kurzoru z horizontálního na vertikální tedy umožňuje uživateli snadno provádět horizontální změnu velikosti prvků na webové stránce.
Změna kurzoru na vertikální pomocí CSS
Existuje několik způsobů, jak pomocí CSS změnit kurzor myši na vertikální. Níže jsou uvedeny dva příklady:
1. Použití vlastnosti cursor:
Pro změnu kurzoru na vertikální lze použít následující CSS kód:
V tomto příkladu nastavíme vlastnost cursor s hodnotou col-resize pro prvek body. Tato hodnota ukazuje prohlížeči, že používá kurzor jako dvojitou svislou šipku běžně používanou ke změně velikosti sloupců.
Poznámka: tuto vlastnost lze použít na jakýkoli jiný prvek, pokud chcete změnit kurzor na vertikální pouze pro konkrétní prvek.
2. Použití vlastnosti cursor s url:
Pokud potřebujete použít jiný styl kurzoru, můžete využít možnost nahrát vlastní obrázek pro kurzor pomocí vlastnosti cursor a funkce url:
cursor: url('vertical_cursor.png'), auto;
V tomto příkladu uvedeme cestu k obrázku vertical_cursor.png ve funkci url, která bude použita jako kurzor pro prvek body. Hodnota auto na konci je uvedena tak, aby prohlížeč používal standardní kurzor, pokud není k dispozici obrázek.
Poznámka: pro správné zobrazení vlastního kurzoru musí být obrázek ve formátu .cur nebo .png s průhledností.
To jsou jen dva způsoby, jak pomocí CSS změnit kurzor myši na vertikální. Můžete si vybrat ten správný pro vaše potřeby a styl.
Pomocí JavaScriptu
Pokud potřebujete na svém webu změnit kurzor z horizontálního na vertikální, můžete pro tento úkol použít JavaScript. Zde je příklad kódu:
Tento kód změní kurzor na vertikální a použije styl "EW-resize" na prvek body stránky. Můžete použít jiné styly kurzoru, podle vašich potřeb. Například:
document.body.style.cursor = "col-resize";Tento kód změní kurzor na oddělovací sloupec.
Je důležité věnovat pozornost tomu , že tento kód musí být umístěn uvnitř značky a musí být umístěn za značkou, aby byl proveden po úplném načtení stránky.
Aplikace kurzoru
Webový vývojář může změnit standardní kurzor na jiný, aby zdůraznil interakci uživatele s prvkem stránky nebo vytvořil určitou atmosféru na webu. Existuje mnoho různých kurzorů, které mohou používat weboví vývojáři.
Některé z nejpoužívanějších kurzorů:
- Výchozí kurzor: standardní kurzor, který označuje, že prvek je klikací a je k dispozici pro interakci.
- Kurzor ukazující prstem: používá se k označení klikacích prvků, které jsou důležité nebo přitahují pozornost uživatele.
- Kurzor přetažení: znamená, že prvek lze přetáhnout na jiné místo.
- Kurzor textového výběru: umožňuje uživateli vybrat text nebo prvky.
- Kurzor stahování: ukazuje, že proces stahování nebo provádění dlouhé operace je aktivní.
Chcete-li změnit kurzor prvku, můžete použít vlastnost cursor CSS . Chcete-li například změnit kurzor ukazujícím prstem, můžete použít následující CSS kód:
.elementTento kód použije na prvek třídy "element" kurzor ukazující prstem. Místo "pointer" můžete použít jiné hodnoty ze seznamu.
Naučit se používat různé kurzory pomůže vytvořit interaktivnější uživatelský zážitek na webové stránce.
Na webové stránce
Na webové stránce můžete změnit pohled kurzoru z horizontálního na vertikální pomocí vlastnosti CSS cursor. K tomu je třeba přidat styl k požadovanému prvku nebo prvkům stránky.
.vertical-cursor Это абзац с вертикальным курсором
V tomto příkladu styl s třídou "vertical-cursor" nastavuje kurzor col-resize, což je svislá šipka s dvojitou čarou. V důsledku toho bude mít tento odstavec vertikální kurzor, když na něj najedete myší.
Pro vlastnosti cursoru lze použít i jiné hodnoty, například:
- row-resize-horizontální šipka s dvojitou čarou
- move - čtyřstranný kurzor používaný k pohybu objektů
- text-vertikální šipka s přímkou, používá se k zvýraznění textu
Pomocí vlastnosti CSS cursor lze snadno změnit vzhled a chování kurzoru na webové stránce přidáním zajímavých efektů a zlepšením uživatelského rozhraní.
V příloze
Změnit kurzor z horizontálního na vertikální v aplikacích lze pomocí CSS vlastnosti cursor . K tomu je nutné použít styly na požadovaný prvek nebo třídu.
Chcete-li například změnit kurzor na vertikální v seznamu položek, můžete použít následující CSS kód:
- Nejprve je třeba vybrat správný prvek nebo třídu. Pokud se například jedná o seznam položek s třídou list , styl bude vypadat takto:
- .list
- Dále pomocí vlastnosti cursor nastavíme hodnotu ew-resize pro horizontální kurzor:
- cursor: ew-resize;
- Výsledný CSS styl:
- .list <
cursor: ew-resize; >
Aplikováním stylu cursor: EW-resize; na požadovaný prvek nebo třídu je tedy možné v aplikacích změnit kurzor z horizontálního na vertikální.