Cursores e implementação

Vários tipos de Cursores e a sua implementação.

Funcionalidade: Cursores
Plataforma: Web Sites, Blogger, etc.
Dificuldade de Implementação: Baixa

Implementação no Blogger

Passo 1 - Escolher o cursor a ser utilizado.
Passo 2 - Abrir o painel principal do Blogger.
Passo 3 - Entrar na zona do HTML do Blogger; Modelo > Editar HTML.
Passo 4 - Procurar pela DIV onde o cursor irá aparecer.
Passo 5 - Atribuir uma CLASS a essa DIV, ou se já existir acrescentar um nome, por exemplo cursor_grabbing.

Exemplo de uma DIV já com CLASS:

<div class="header"></div>

Acrescentar a esta CLASS a cursor_grabbing;

<div class="header cursor_grabbing"></div>

Exemplo de uma DIV sem CLASS:

<div ></div>

Acrescentar a esta DIV uma CLASS neste caso a cursor_grabbing;

<div class="cursor_grabbing"></div>

Passo 6 - Pesquisar a zona do CSS e colocar lá o código abaixo (Caixa CSS).
Passo 7 - Guardar o modelo e verificar se está tudo bem, caso exista algum problema verificar se foi efectuado todos os passos correctamente, caso seja necessário repetir todos os passos.

Para copiar o código clicar no ícone abaixo

#cursor_grabbing {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
}

Importante: Alterar o nome do cursor para o que se deseja utilizar. (ver abaixo)

Implementação num Web Site

Passo 1 - Escolher o cursor a ser utilizado.

Passo 2 - Abrir o HTML do Web Site

Passo 3 - Procurar pela DIV onde o cursor irá aparecer.

Passo 4 - Atribuir uma CLASS a essa DIV, ou se já existir acrescentar um nome, por exemplo cursor_grabbing.

Exemplo de uma DIV já com CLASS:

<div class="header"></div>

Acrescentar a esta CLASS a cursor_grabbing;

<div class="header cursor_grabbing"></div>

Exemplo de uma DIV sem CLASS:

<div ></div>

Acrescentar a esta DIV uma CLASS neste caso a cursor_grabbing;

<div class="cursor_grabbing"></div>

Passo 5 - Editar a página do CSS e colocar lá o código abaixo (Caixa CSS).

Passo 7 - Guardar e verificar se está tudo bem, caso exista algum problema verificar se foi efectuado todos os passos correctamente, caso seja necessário repetir todos os passos.

Para copiar o código clicar no ícone abaixo

#cursor_grabbing {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
}

Vários cursores

Importante: Alterar o nome do cursor para o que se deseja utilizar.

Para copiar o código clicar no ícone abaixo

  
  #cursor_auto { cursor:auto }
  #cursor_inherit { cursor:inherit }
  #cursor_crosshair { cursor:crosshair }
  #cursor_default { cursor:default }
  #cursor_help { cursor:help }
  #cursor_move { cursor:move }
  #cursor_pointer { cursor:pointer }
  #cursor_progress { cursor:progress }
  #cursor_text { cursor:text }
  #cursor_wait { cursor:wait }
  #cursor_e-resize { cursor:e-resize }
  #cursor_ne-resize { cursor:ne-resize }
  #cursor_nw-resize { cursor:nw-resize }
  #cursor_n-resize { cursor:n-resize }
  #cursor_se-resize { cursor:se-resize }
  #cursor_sw-resize { cursor:sw-resize }
  #cursor_s-resize { cursor:s-resize }
  #cursor_w-resize { cursor:w-resize }
  #cursor_none { cursor:none }
  #cursor_context-menu { cursor:context-menu }
  #cursor_cell { cursor:cell }
  #cursor_vertical-text { cursor:vertical-text }
  #cursor_alias { cursor:alias }
  #cursor_copy { cursor:copy }
  #cursor_no-drop { cursor:no-drop }
  #cursor_not-allowed { cursor:not-allowed }
  #cursor_ew-resize { cursor:ew-resize }
  #cursor_ns-resize { cursor:ns-resize }
  #cursor_nesw-resize { cursor:nesw-resize }
  #cursor_nwse-resize { cursor:nwse-resize }
  #cursor_col-resize { cursor:col-resize }
  #cursor_row-resize { cursor:row-resize }
  #cursor_all-scroll { cursor:all-scroll }
  #cursor_grab { cursor: -webkit-grab;cursor: -moz-grab; }
  #cursor_grabbing { cursor: -webkit-grabbing; cursor: -moz-grabbing; }
  #cursor_zoom-in { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; }
  #cursor_zoom-out { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; }
  #cursor_custom { cursor:custom }

Chamar ficheiro das imagens

Pode-se chamar o ficheiro das imagens dos cursores, para isso teremos que incluir o código abaixo no CSS;

Para copiar o código clicar no ícone abaixo

.cursor[cursor="custom"] {
  cursor: url('https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/Cursors/cursor.cur'), auto ;
}

As DIV também deverão ser alteradas, passando a ficar assim;

Para copiar o código clicar no ícone abaixo

<div class="cursor cursor_grabbing" cursor="grabbing"></div>

Nota: Deve-se utilizar o mesmo nome da CLASS, neste caso foi cursor_grabbing, em todas as DIV onde se queira este cursor.

Exemplo dos cursores

(Passar o ponteiro por cima dos quadrados).

Browsers support

Algumas funcionalidades não são suportadas por todos os Browsers, consulte Aqui;