Trucos y efectos de CSS3 - Tutoriales En Linea

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Trucos y efectos de CSS3 - Tutoriales En Linea</title>
</head>
<body>
<style>
 main {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 }
 main > span {
 width: 100px; height: 100px;
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 8px;
 border-radius: 50%;
 font-weight: 600;
 transform: translate3d(0, 0, 0);
 transition: all .3s ease-in-out;
 background: #eee url("data:image/svg+xml,\
 <svg xmlns='http://www.w3.org/2000/svg' width='90' height='9'>\
 <rect width='90' height='8' fill='#f2f2f2'/>\
 <rect width='90' height='2' fill='#e7e7e7'/>\
 <rect y='2' width='90' height='3' fill='#ececec'/>\
 </svg>");
 background-size: 12px 12px;
 }
 main > span:hover {
 transform: translate3d(-1px, -1px, 0) scale(1.05);
 box-shadow: -2px -2px 6px 2px rgba(108, 108, 108, 0.1) inset, 
 0 0 0 5px rgba(255, 255, 255, .6) inset, 
 0 0 0 1px rgba(139, 139, 139, 0.1), 
 2px 2px 10px rgba(0,0,0,.2);
 }
 main > span:nth-of-type(1) {
 cursor: default;
 }
 main > span:nth-of-type(2) {
 cursor: crosshair;
 }
 main > span:nth-of-type(3) {
 cursor: help;
 }
 main > span:nth-of-type(4) {
 cursor: move;
 }
 main > span:nth-of-type(5) {
 cursor: pointer;
 }
 main > span:nth-of-type(6) {
 cursor: progress;
 }
 main > span:nth-of-type(7) {
 cursor: text;
 }
 main > span:nth-of-type(8) {
 cursor: wait;
 }
 main > span:nth-of-type(9) {
 cursor: e-resize;
 }
 main > span:nth-of-type(10) {
 cursor: ne-resize;
 }
 main > span:nth-of-type(11) {
 cursor: nw-resize;
 }
 main > span:nth-of-type(12) {
 cursor: n-resize;
 }
 main > span:nth-of-type(13) {
 cursor: se-resize;
 }
 main > span:nth-of-type(14) {
 cursor: sw-resize;
 }
 main > span:nth-of-type(15) {
 cursor: s-resize;
 }
 main > span:nth-of-type(16) {
 cursor: w-resize;
 }
 main > span:nth-of-type(17) {
 cursor: context-menu;
 }
 main > span:nth-of-type(18) {
 cursor: none;
 background: #eee url('data:image/svg+xml,\
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill-opacity=".15" >\
 <rect x="30" width="30" height="30" />\
 <rect y="30" width="30" height="30" />\
 </svg>');
 background-size: 18px 18px;
 }
 main > span:nth-of-type(19) {
 cursor: cell;
 }
 main > span:nth-of-type(20) {
 cursor: vertical-text;
 }
 main > span:nth-of-type(21) {
 cursor: alias;
 }
 main > span:nth-of-type(22) {
 cursor: copy;
 }
 main > span:nth-of-type(23) {
 cursor: no-drop;
 }
 main > span:nth-of-type(24) {
 cursor: not-allowed;
 }
 main > span:nth-of-type(25) {
 cursor: ew-resize;
 }
 main > span:nth-of-type(26) {
 cursor: ns-resize;
 }
 main > span:nth-of-type(27) {
 cursor: nesw-resize;
 }
 main > span:nth-of-type(28) {
 cursor: nwse-resize;
 }
 main > span:nth-of-type(29) {
 cursor: col-resize;
 }
 main > span:nth-of-type(30) {
 cursor: row-resize;
 }
 main > span:nth-of-type(31) {
 cursor: all-scroll;
 }
 main > span:nth-of-type(32) {
 cursor: zoom-in;
 }
 main > span:nth-of-type(33) {
 cursor: zoom-out;
 }
 main > span:nth-of-type(34) {
 cursor: -webkit-grab;
 }
 main > span:nth-of-type(35) {
 cursor: -webkit-grabbing;
 }
</style>

<main>
 default
 crosshair
 help
 move
 pointer
 progress
 text
 wait
 e-resize
 ne-resize
 nw-resize
 n-resize
 se-resize
 sw-resize
 s-resizes
 w-resize
 context-menu
 none
 cell
 vertical-text
 alias
 copy
 no-drop
 not-allowed
 ew-resize
 ns-resize
 nesw-resize
 nwse-resize
 col-resive
 row-resize
 all-scroll
 zoom-in
 zoom-out
 grab
 grabbing
 </main>

</body>
</html>