quinta-feira, 7 de janeiro de 2016


Hoje temos uma dica bem diferente para vocês! Vamos falar sobre CSS (caso você não se lembre o que é isso, clique aqui) e como ele poderá mudar o cursor (ou a seta do mouse, como preferir) em seu site.
Para começar vamos ao código base CSS que permite a mudança do cursor, aqui abaixo temos o cursor padrão aplicado em todo o corpo do site:
Seta Padrão
Seta Padrão




 body{cursor:default;}
Abaixo também podemos ver que é possivel aplicar diferentes tipos de cursores em elementos diferentes na página; nesse caso iríamos ver uma mão sobre os links do site.
Mão ao invés da seta
Mão ao invés da seta








a:link{cursor: pointer;}

Agora caso você deseje colocar algo personalizado, basta criar uma imagem ou uma animação, se atentando ao formato deles (.cur ou .gif para imagens ou .ani para animações) e colocar esse arquivo em uma pasta em seu servidor, especificando-o no código CSS:
.cursor_personalizado{
cursor: url(http://www.blogwebdesignmicrocamp.com.br/images/lupa_personalizada.cur), default;}
Cursor personalizado
Cursor personalizado







Para que isso funcione perfeitamente, é necessário fazer alguns testes, mas o resultado pode ser interessante. Aproveite e aumente seus conhecimentos, até a próxima!

Esse foi mais um post do Blog do Curso de Web Design Microcamp.