caja de busqueda search box en html5 css3

como crear una caja de busqueda personalisada en html5

Ejemplo de codigo
<style>
#buscar{
background: gray; padding: 5px; width:250px; height: 35px; border-radius: 5px;
}
input[type=submit]{height: 25px; background:rgb(220,220,220);box-shadow:inset 0px 2px 1px rgba(5,5,5,0.9), inset 0px -2px 1px rgba(255,255,255,0.9); border-radius:10px; size: 250px; padding-left: 6px; border: solid 1px gray }
input[type=submit]:hover{background:rgb(220,220,255); border-radius:10px; size: 250px; padding-left: 6px; border: solid 1px gray }
input[type=search]{ height: 25px; background:rgb(255,255,255);box-shadow:inset 0px 2px 1px rgba(5,5,5,0.9), inset 0px -2px 1px rgba(255,255,255,0.9); border-radius:10px; size: 250px; padding-left: 6px; border: solid 1px gray }
input[type=search]:hover{background:rgb(220,220,255); border-radius:10px; size: 250px; padding-left: 6px; border: solid 1px gray }
</style>

<div id=buscar>
<form  action=search.php>
<input id="busqueda" type="search" placeholder="Buscar..." />
<input type=submit value=buscar />
</form>
<div>

Leer más...

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>

Leer más...

Agregar tooltips anychart a tus enlaces, aplicable a blogger wordpress

poner enlaces es bueno pero con una descripcion flotante aun mas ya que provees informacion descriptiva y personalizada de este

bueno la forma de aplicarlo es agregando una clase al enlace y con css y un bloque span manipularlode tal forma que al pasar el raton se muestre el bloque span
 lo priimero clreamos la clase en est e caso tooltip
asemos una referencia al bloque span desde el css   con el metodo hover aremos visible el bloque span
para lograr  que este bloque span se aline al pasar el raton, y flote  le agregamos una posicion absoluta y display inline
 codigo iria asi:

el bloque span debe estar fuera de pantalla si no se pasado el raton soble el enlace
A.tooltip SPAN {
  border-radius: 5px;
  BORDER-BOTTOM: #053138 1px solid;
  POSITION: absolute;
  overflow: hidden;
  BORDER-LEFT: #053138 1px solid;
  PADDING-BOTTOM: 5px;
  background: rgba(255,255,255,0.9) ;
  MARGIN: 0px 0px 0px 0px; PADDING-LEFT: 5px; WIDTH: 200px; PADDING-RIGHT: 5px; DISPLAY: none; COLOR: black;
  BORDER-TOP: #053138 1px solid; FONT-WEIGHT: normal; BORDER-RIGHT: #053138 1px solid; PADDING-TOP: 5px
}

cuando pasemos el raton por el enlace
es cuando debe mostrarse el bloque span con display: inline
A.tooltip:hover SPAN {
 DISPLAY: inline
}

aora para el enlace agregamos dentro y junto con el texto la etiqueta span y entre esta la descripcion del enlace

<a  class="tooltip" href="#"> enlace <span>descripcion del enlace</span></a>

mira el ejemplo corriendo abajo

acontinuacion el codigo css:

<style> A.tooltip SPAN { border-radius: 5px; BORDER-BOTTOM: #053138 1px solid; POSITION: absolute; overflow: hidden; BORDER-LEFT: #053138 1px solid; PADDING-BOTTOM: 5px; background: rgba(255,255,255,0.9) ; MARGIN: 0px 0px 0px 0px; PADDING-LEFT: 5px; WIDTH: 200px; PADDING-RIGHT: 5px; DISPLAY: none; COLOR: black; BORDER-TOP: #053138 1px solid; FONT-WEIGHT: normal; BORDER-RIGHT: #053138 1px solid; PADDING-TOP: 5px } A.tooltip:hover SPAN { DISPLAY: inline } </style>

aqui les dejamos un demo del codigo corriendo
kpop noticias sitio de noticias kpop y fanfics y mucho mas








....

Leer más...

Aprende a crear botones con css

los botones  son basicos en las paginas web. y que mejor que tengan un buen estilo

para crear botones estilo plastico con css usamos el metodo sombra interior  
box-shadow:inset 0px 2px 1px rgba(55,55,55,0.5),
que agrega una sombra interior al contenedor o bloque espan
aunque tambien puede usarse en bloques contenedor como div  o listas li

<style>
/*stylo 1*/
.bt{background: rgb(200,200,200); display: inline-block; padding: 3px; margin-left:3px;  border-radius: 5px; box-shadow:inset 0px 2px 1px rgba(55,55,55,0.5), inset 0px -2px 1px rgba(255,255,255,0.5);}
.bt:hover{display: inline-block; padding: 3px; margin-left:3px;  border-radius: 5px; box-shadow:inset 0px 2px 1px rgba(5,5,5,0.9), inset 0px -2px 1px rgba(255,255,255,0.9);}

/*estylo 2*/
.bt2{background: rgb(200,200,200);display: inline; padding: 5px; margin-left: 2px; margin-right: 2px;  box-shadow:inset 0px 8px 10px rgba(255,255,255,0.2),inset 0px -8px 10px rgba(0,0,0,0.2);border: solid 1px rgb(120,120,120); border-radius: 5px;}
.bt2:hover{display: inline;padding: 5px; box-shadow:inset 0 8px 10px rgba(120,120,120,0.2),inset 0 -8px 10px rgba(0,0,0,0.2);border: solid 1px rgb(120,120,120); border-radius: 5px;}
</style>

<div class='bt'><a href="#" onclick="alert('1')">inicio</a> </div>
<div class='bt2'><a href="#" onclick="alert('2')">inicio2</a> </div>

puedes aplicarlo igual para listas en la etiqueta <li> 

en ambos casos solo deves cambiar el fondo del contenedor, para que quede a tu gusto
aqui un demo abajo

inicio

inicio2

Leer más...