Cursor

W CSS3, właściwość cursor pozwala na kontrolę wyglądu kursora myszy, gdy znajduje się on nad elementem. Jest to użyteczne w interfejsach użytkownika, gdzie chcemy dać wskazówkę użytkownikowi, że element jest klikalny, można nad nim przeciągnąć elementy, lub wskazać inną akcję. CSS3 oferuje szereg wartości dla cursor, umożliwiając dostosowanie kursora do różnych kontekstów użytkowania.

Przykłady użycia różnych wartości cursor w CSS3

Poniżej przedstawiono kompletny plik HTML z przykładami różnych wartości dla właściwości cursor. Każdy przykład pokazuje inny typ kursora, z opisem w komentarzach wyjaśniającym kontekst jego użycia.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykłady kursorów w CSS3</title>
    <style>
        /* Styl bazowy dla elementów demonstracyjnych */
        .cursor-example {
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #000;
            background-color: #e0e0e0;
            text-align: center;
        }

        /* Kursor w postaci strzałki */
        .default { cursor: default; }

        /* Kursor w postaci ręki (używany przy linkach) */
        .pointer { cursor: pointer; }

        /* Kursor w postaci oczekującego zegara */
        .wait { cursor: wait; }

        /* Kursor w postaci krzyżyka (używany przy przeciąganiu) */
        .move { cursor: move; }

        /* Kursor w postaci tekstu (używany przy zaznaczaniu tekstu) */
        .text { cursor: text; }

        /* Kursor w postaci niedostępności (używany przy nieaktywnych elementach) */
        .not-allowed { cursor: not-allowed; }

        /* Kursor w postaci pomocy (używany przy elementach z pomocą) */
        .help { cursor: help; }

        /* Kursor w postaci krzyża z czterema strzałkami (używany do zmiany rozmiaru) */
        .all-scroll { cursor: all-scroll; }

        /* Kursor w postaci pionowej kreski (używany do zmiany rozmiaru w pionie) */
        .ns-resize { cursor: ns-resize; }

        /* Kursor w postaci poziomej kreski (używany do zmiany rozmiaru w poziomie) */
        .ew-resize { cursor: ew-resize; }
    </style>
</head>
<body>
    <div class="cursor-example default">Default</div>
    <div class="cursor-example pointer">Pointer</div>
    <div class="cursor-example wait">Wait</div>
    <div class="cursor-example move">Move</div>
    <div class="cursor-example text">Text</div>
    <div class="cursor-example not-allowed">Not-allowed</div>
    <div class="cursor-example help">Help</div>
    <div class="cursor-example all-scroll">All-scroll</div>
    <div class="cursor-example ns-resize">NS-resize</div>
    <div class="cursor-example ew-resize">EW-resize</div>
</body>
</html>

Każdy z powyższych przykładów demonstruje różne wartości właściwości cursor, które można zastosować do elementów HTML, aby zmienić wygląd kursora. Użycie odpowiedniego kursora w kontekście działania użytkownika może znacznie poprawić doświadczenie użytkownika i intuicyjność interfejsu.

Podsumowanie

Właściwość cursor w CSS3 jest potężnym narzędziem, które pozwala twórcom stron internetowych na dostosowanie kursora myszy do kontekstu akcji użytkownika. Dzięki różnorodności dostępnych wartości, deweloperzy mogą precyzyjnie wskazać funkcję elementu, nad którym znajduje się kursor, poprawiając tym samym użyteczność i dostępność stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top