sábado, 19 de mayo de 2018

barras de desplasamiento estilo mac osx usando -webkit-scrollbar


agregar barras de despalsamiento estilo osx a tui pagina web blog blogger wordpress


bueno solo deve copiar el sieguiente codigo en un gadget en el caso de blogger en el html/javascript

en el caso de una web propia ponlo en el css de tu pagina

el codigo incluye todo solo es copiar pegar


<style>
a:hover{cursor: url(tu cursor png), progress !important;
-webkit-user-select:none}
body{

cursor: url(tucursor.png), progress !important;

 
   }


 ::-webkit-scrollbar {
 width: 12px;
 height:12px;
}

::-webkit-scrollbar-track:vertical
{
background: gray url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAABCAIAAABlidhuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAuSURBVHjaYty0aRMzMzM3NzcnDLCzs7OzszMzMzMwMPz58+fHjx8AAAAA//8DAGzyCKKiF0U9AAAAAElFTkSuQmCC)

}
::-webkit-scrollbar-track-piece:vertical:start {
margin-top: -4px;
}
::-webkit-scrollbar-track-piece:vertical:end {
margin-bottom: -4px;
}

::-webkit-scrollbar-track:horizontal {
 background: gray url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAIAAAAs6UAAAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAA1SURBVHjaBMEhCgBACEVB3v1vI9it1q0WMSn8Q+wM3c3uIglJ3B0zQ1Xx3iMziQjcHTP7AwD3fh4lLcMvAAAAAABJRU5ErkJggg==);
}

::-webkit-scrollbar-thumb:vertical {
/*-webkit-linear-gradient(left, #547c90, #002640,);*/
 background:blue url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADdSURBVHjaRM1RSgRBDIThP9XpgRUWFxUEwet5KY/jNXzxGDOdTnzoWTaPyZcq+/r+q88bXK6dI4yf353L05WP9xsvr+L5DeYBDqBmNBkm8Ca2LrqLbtANWjuhyZDAzHAX3rSOHbrDzDs0cBNdhgMu6AJ36A24J6JV7QKX0QTeVloToBOmGVghGX0TmzfcodlKpUCwFjmNLMgssHU01lSe0KqoSmYWEcU+khFwBETAjLN6zsd7VhGziITIBxZAzSKqiJmMSGYtOMbCyQnJYkYxAsYsjiMZsfAM2A/4HwArMGx/PB1qwgAAAABJRU5ErkJggg==);
 border: 1px solid #1148b9;
 border-radius: 10px;
 box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.0);
}




/*horizontal*/
::-webkit-scrollbar-thumb:horizontal{
 background: blue url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADdSURBVHjajJBLSkRBEAQjq6vfMKjgzErceDsv5YG8heApxNf1cfEGZmtuchMBSer947v5Z/ztApjQEGOIlsgG64ZquqGrqWz8/DgZLlyCBsmw0dAiq4kuqiCr8Z8lZkMOATAMLEUVRIlVorvpEv75tTOHmG6YhLswE2svopoAIorIws8PT2ybMSR8iNM0aNhPSRZEQWSxr8JfX56ZLtzADaYDggiIhFWQCSsKv14PcM4D3hwayIYVN2nBasMvVxh+B92PTyMgC1Ye0mrw/RdODQFYQifIINd9Qt36bwCAMn5EGLtHXAAAAABJRU5ErkJggg==);
 border: 1px solid #1148b9;
 border-radius: 10px;
 box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.0);}


 ::-webkit-scrollbar-track-piece:horizontal:start {
margin-left: -4px;
}
::-webkit-scrollbar-track-piece:horizontal:end {
margin-right: -4px;
}

::-webkit-scrollbar-button{width: 12px;
height:12px;}



::-webkit-scrollbar-button:horizontal:increment{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAMCAIAAADgcHrrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAH1SURBVHjaZJLP6zFRFMbfyzVKahYoQ8mGhIWyYSEpK5SUlb/Dlo3/SOm7tUCRDTYiZMb4USS55o5xf7yL26tvvWf1dOpzzul5Dvj5+UEIcc4dDofT6QQAMMYAAH/+legITQhhjJmmCXa73fl8VlX18XgEAoFwOAwh5Jx/sf/1drsF1+sVIXQ+n1er1fP5zGQy0WjUZrOJPTabjTHGOeecixMYY9PpFFyv19frhRA6nU6LxUKW5UKhoCgKhFDTtNPplEqlJEkihIhBpmkOBgNwuVwwxgih+/2+Wq0ej0cul4tEIrIsj0ajTqdTqVRqtZrf7+ecU0pvt9tkMgGqqhqGYZomQmi/3+u6ns/nFUXxeDzD4bDZbEqSlEwmG41GOp0mhNxut81mA9brtWEY7/f79Xodj8fD4VAul91uN4RwMpm0223GmM/nq9frxWIRQmhZ1vF4BPP5HGNsWZZhGLquY4xLpZLL5ZIkaTQatVqtbDZbrVYTiQQAgBBCCNF1HYzH4y+maVowGCwUChBCu92+XC5ns1mxWPR6vQKglH4+n8PhAPr9PsZYuMIYy+fzoVBI5EMpBQBACCmlwnpKqWVZmqaBXq+HMX6/3xDCWCwWj8ftdrvARFAitC9GCNnv96Db7X4+H1mWFUURcf1+i9/1xVRV/TsAI3Vk3V4HxSAAAAAASUVORK5CYII=') gray;width: 18px; height:12px;}
::-webkit-scrollbar-button:horizontal:increment:hover{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAMCAIAAADgcHrrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAIvSURBVHjaLJK9T1NRHIbf37m32PLRqHwYjJQgRggiiRIBN10cdDDRuBgnE2dnBxcH/wfddHBxMA4EHUwqDNooBItKtZZLaz9obXtpOPfe9t57zs+hvOPz5tke+pBcXc9WMvu9n3aMg+YRAmmlQUQEZoDBxGCAQQSAtWIVKLIsq2k3y6XKj6299Q2EwWj/QEwQCyGYSWvNWjOYAQIRQOAwDKlerzuOY9v2rmV9z1RS1vD41ExipC9isGYmEgCBmVkzAIYAyQP/UJNS1mq17e2f7zLBBs/dvDx5drS/03Fy6VS0N56YviCEEYSBIBZEVtGharXqeZ6U0rbtXC6XKTSe/UpMnpu+tTQ2FA1ePH34Z+vL1TsPFq/dPj40Ah02pL+SblKhUHBdt91uSynz+XyxWHxuTewY43OnhxNxnX75KL/2Ohrrm1m4cv76fZy6ZDXbaatF2WzWdd1Op+M4TqlUKpdKr+pTv2lMiZgZep33T8KttzB6jPGlyPw9JBYElFaK0um053m+73e1YnV/xZtt9Jw0zSh8t/jmsfd3c3DxbnzuhugfYq3Ayg81pVKprialrJTL262eb+ZF3zxqmGbou63sZyMWH5iYF4apQ18pZrDSoGQy6XXnuntSbYjZRt8ZkCAwAJAAEcBgzXwYQMBMy8vLnucppVqIbtLEv/i0jkS6NwEQAKHbierWoqEB+ri6Zrv+rj72VZ8oGoNaCAEAIAYTNEBAlzAhYCgNxfR/AGf8ZnbmsGtcAAAAAElFTkSuQmCC')gray}
::-webkit-scrollbar-button:horizontal:decrement{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAMCAIAAADgcHrrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAH5SURBVHjaZJLN6ylhFMfnPM9jzDMeSTYYQ1GykY1mgX/Nhq2/g41CXjbUJAsipbwkNlKMwmJKyniYu5ju797u/a7OOZ3POXW+B2q1miRJCCFCiCAIgiAghGzbFn7Ltm2n8nq93u83ADDGoN1ux+NxQRAA4Kf1n5hzfjgczuezz+eLRqPBYBB0Xc9mswghZzAAAABC6Pv9Oju/3+9ut5tMJl6vN5lMBoNBxhh0u91CoSBJktNECLEsa7FYhEIhVVU554Zh6LpummY6nQ6FQowxj8cDzWZT07RAIIAxBoDL5dJoNDqdTrFYzOVypmnu9/vRaOTz+ZLJpN/vZ4xRSqHdbicSiUAgQAiZz+fVanW1WlmWValU8vn8/X43DGM4HCqKEovFGGOSJMmyDP1+PxwOi6LIOR8MBvV6/Xq9IoRKpZKmaZzzx+PR7XYjkUg4HPZ4PG63W5ZlGI1GiqIQQgghtm2v1+tWqzUej8vlci6Xsyzr+Xz2ej1KqaIosiyLokgphdlsFolEXC4XxtiBb7fbYDDIZDKpVOrz+XDOdV0/nU6qqv7BlsulqqqiKGKMHRswxpxz27Yxxo5vx+NxOBwihJx7UEphtVrFYjFCyA/mWOfY6KSfz2ez2Wy3W8652+2mlMJ0Oo1Go39j/8t5FMMwDMMwTdPlcv0aAGn15o+V5TYuAAAAAElFTkSuQmCC')gray;width: 18px;
 height:12px;}
::-webkit-scrollbar-button:horizontal:decrement:hover{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAMCAIAAADgcHrrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAJASURBVHjaRNLNSxRxHMfxz/c3D7u/mZF1XaOZdXRbbZZQXK0UvXQJJHqA6FAHD3WqWxAdgzrUIehWhy5BBEWXKOhggpe65QNiGW3bg6lrJNkmta7u4s78vh0M+gPep9ebWo+NkU5CCADMAAEEYgKBCMwAs9AEgxOpxnBnI9dUPRB4NHpmXNd1BjHA4J2KhBBCELFSSjFVN2q6vtrXF3YFCdd1Pc+j63c/Ok2mAoNAAJEAEcDMShA1IiqtbS4VC4OZ1c5McxDkXNd1HIcuPljI+rZiVkyGbigVlYpz9a1KV34oFrM/rVafv17Yz29HcqK7u8fzPMdxbNumkTsfjuZbUo4Joa+X16Ymnr58cm9v7+C5K7fLdePZ5MrC++L5YGlfRyoIgmQy6TiOlJKaL8/ks4lsSxzfZt69uF+YflWvbWYOnc6fvVmqiPmvPzuj5QvZRd/3M5mM4zjxeNyyLIpfmhaapqChNN2YfRQtTyLa1ntPxo5cC3WpqVqOV0Zbi21+ezqdtm07FotZlkV7rs6ZugBpJDRVLVfmx35NPZbt/f6pGzCtMKyntr8ftwv+7kQ63WZZlmmaUkrqv/VZEyCQppHQTRWFG4uzUa2SCIZ104rC0Ax/90dvepIN1/P+Z4cf/jHoHy4RQAIgMIMVAAaBVevml4NcSCcMwzSllFJKOjHBAiABAjQCAUwAAwqMHXuIRmNXpTggSo7aEkJIKWloPDR0oREMAWIAiAAABIidawAFkFJ+WB7QfnTwerPU/w4ARbvVsqXIBBsAAAAASUVORK5CYII=') gray}
::-webkit-scrollbar-button:vertical:increment{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAIAAADgy6hbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAHvSURBVHjaVJKx7vFQGMb7/s9pT9tTxSioImKwcAEGt2B1DXaJzYWIXYh0wOIWJEaTWASRqLanlOr5hv4/vu+df3mfPL88YFkWQohSqvw9QgghBCEkCEIYho/HA8bjMQB8IFmWCSGyLAOAIAjP5zMIAphOp4wxSqmmafEbSZIwxgAQhqHjOLIsg2VZx+MRIZROp1VVJYSIosg5D8PQdV3OebVahcVi8X6/9/t9EAS6rsdBz+eTMZZIJOr1ej6fh+VymcvlgiDYbDa2bYdhyDnXNC2TyTQajVwud7/fYT6fl0qlbDZ7uVwul0sURZRSSmkqldJ1HQBc14XFYmGapmEYCKHH4+E4ThRFiqKoqqooCgB4nveFYje+71+vV0ppXPM/qFAonE6nw+HAGPM8jxCSyWRqtZooit+4YrG4Xq8Hg8HhcIiiSJKkbrfb6XQwxq7rwnK5NAzDNE1BEIbD4Wg08n2/1Wr1er1sNss59zwP5vN5HEcIOZ1O/X5/t9v1+/1msxl7Z4z9QoZhYIxFUVytVtvttt1uf8R+oUKhgBDCGN9ut/P5nEwmYwu/kGVZ5XLZNE2MsSAItm07jkMIUVX1C81ms0qlYhhGFEWMMdu2OeefbSGEGGMwmUxkWdY07X6/v14vjPG/q/r5+fF9/88Ahi8DFY1ls2sAAAAASUVORK5CYII=');width: 12px; height:18px;}
::-webkit-scrollbar-button:vertical:increment:hover{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAIAAADgy6hbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAKASURBVHjaBMFLaxNBAADgnc3O7szszm4em53dtqYhtaaotQ9BVBAUNDHxlVooHvSqF/HgL9BD8SB4ELwLvdhTAz5IKvQgHpRWRVRolUJiW6S2SZNsEtMkm/H7wIOnc3FL0oiqahohBGOMEJJlWRRF3uP7+631ShfcepS9GGnqlGCiYYwVBckylCAUOPe6nZpb//DPBPHbr26wjfiIpht+pCAFIQgh59zzvKbrFprgvToJ7On8ae93fLQ5dEAxdENGCACx095vNOp/W3A9OPYzcBg404snu52W2Wj7No5aXh/lQOC1trQr6C473o6MlqAEWCaX0GRjgmUL241yKUg5pTJCGGohdWBYtfWqwAGbyl/UpCOJoaIPfCzUPm01sSr1UzlIcMBhxNJqgAP7ej5F5WPJqOjoDe6b/1Je3WnFDBgg0AgHcZi6gAM2lU9RZTQZ8UKSX8cvf1SX1qoRKlECQ/0DJEwrIgcsk09qcDwdW9tc/v5uYbPa2aq0sY/3ncjEzs0QS90TOLCmckksTVweLpZXXzy+u138JQiCFIocuvlk8FSKWGSPc2Blcgnim7w0zBlZzj3PPnvYandY8n40cSdoh9WwWhU4YNdy51XfZHpI7DOEbmVu9t7XDTc2M2v2R/2mQSxaEzhgmdwFIo2nYz2LMFNders4v1IaHDvjV+UACyOL1gEHLJNLEGksFRNsHA6gpTV3/nM5Ykg6QSHHQozucQ+Er7xJUTieOig4WJBA9lt1peAO6BJViWkzxaK73ANm+nVCE0fOxnaItFprLxfqrR63KfRTLehYhOk7vR6IXF2I/inJpl30wV3F1yNQ9CtIgwFKTMfBNt3mvf8DABaM5yPNbCouAAAAAElFTkSuQmCC') gray}
::-webkit-scrollbar-button:vertical:decrement{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAIAAADgy6hbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAIlSURBVHjaTM9LTttAHIBx//2Yh8cOlmqlSmTZQEC4IpwAiTUn4AQs2HASLoDUBaoi0TZtBIiHaHcs2LNEcIAmYFQ3nngmju3pIqh0/1t8H3z81G96DqWsKEtRFLphYIwJwTazbUo1TT2LEvrfT1c7Ubvd1nWdc8451zQNY+w4DiGkrut0ImFwerked6IoIoQURZFlWZ7nhmEwxiildV0nmYDB2dWH1cUgCBzHqaoqSZI0TT3Pc10XIaSUevofua6bpunNzc14PN7c3AzDEADqun5DS0tLCKG7u7uDgwMhxP7+/tbWlmVZRVE8cwkn59fxShTH8Wg0Ojo66vV6ZVnu7Ozs7u5GUTSbzZ4yASfn1924E0XR7e3t4eHh4+NjXddhGO7t7W1vbyulfqUcTi9+rK8tt1qt0Wh0f3+f57kQwrKsjY2NOI4B4BXFK1EQBIwxTdOm06kQAiFkmqZhGK/hcxSGoWmanPMsy3RdZ4wxxhBCb03ra8u+76dpOhwOlVKUUtd1fd9vNBpKqeGfCZxd/uxEbc75w8PDy8sLAAAAISQMw26322q1nsYCBmdXpjZLkmQymdi2jTEGgKIoyrJsNptxHNvv3sNx/0Ty31VVNRqNhYUFjLFpmmVZ5nkupfQ8zw8WoXf8VasKxpjneZRShNB8DQCyLJNSItuB489fMLLmO5RSQghCCGM8/5dSCjmF/rcBsow5sm37n7MsSyklpZTT4u8Aw/oeJNQSytcAAAAASUVORK5CYII=') gray;width: 12px; height:18px;
 }
::-webkit-scrollbar-button:vertical:decrement:hover{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAIAAADgy6hbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAJ6SURBVHjaLM47bBJhAMDx77v7vnvAwR1wDw5apDVWUy2aQp82LsapSRdjYuts4uKgY2cTE0zqYmKcdDCuVhONqYmxNdZobAsnxEcrbbClUMrRQuHg4MCB7r/k/4c357TUxz+2Oip73CkIjzAEDsRw2M3bZVUhRMFkALx2L5b/tjPYL9KnxV/V5tpOJXvU4FlSdnGSqmBFOEIAXr8fL8byF4cU/4hXB2A1XX2XLNthw8vbRFVGilBDAM5EtcJKLjIgBcZU6MD/8saTpW2MaFXgRK8HKYKJO2h1LzIgdo8HmthMJbRnCzE2OOwP9IgyjyTewgBOR7X91dzIBTk4cXKvsPXh+cNPS59dl28HhidlVSJdNosCcCaq5VeyE8MnxJDr+9e3rx/NFnJZPnw1OHmnOzSCnESzk9tfy18a6zXo9PyLaHLxDQAAsnxwavbM1C3G56xDAGeimh4vjIZVJJeSyeXNrZ1EziRalq9/PDh6he0Sax1UjBciIXdgSK5RKJ4xX2o6B1oKz4iqiGV3Ax+j/dHzkhxWN+twcb0c260qLOnjGbckINF5PH4Qz4dDUkl1vE8d/s5UsB15OUpy2kWfTMl8EwN444F2ECvyHrwOy5li+pSjybGgTdKmvYsKnCP8qoUBnIkmtr+kRVte8Je8LsvrZBAB6mazaADd0Zvxhcu8DKfnfhzGE4M+va+P8rh5mmZJErUsy6hUdKOdRIEN4Sy8+3SNyP6MdDVlxYUYB0UxmKJIkoStVqNy8LfUSqAe+Hh+majsdguIYTmWtTEMQ9M0xphEmLAaxYqxUSbgq4Ulo6Q7bRTHcXa7vYNomkYIgXa7WjN1w/w/ACOm/iwjt6xyAAAAAElFTkSuQmCC')gray}
[draggable=true]{-khtml-user-drag:element;-webkit-user-drag:element;-khtml-user-select:none;-webkit-user-select:none}
</style>


¿Te gustaría ayudar a esta página?

PayPal
Patreon





Translate