4:54 a. m.
by María Isabel Ferreira
0
comentarios
4:21 a. m.
by María Isabel Ferreira
1 comentarios
Educación y tecnología
4:16 a. m.
by María Isabel Ferreira
0
comentarios
Suscribirse a:
Entradas (Atom)
.coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;} .hotspot { /* es el texto que sirve de lanzador */ color: #94D5FD; cursor: pointer; font-weight: bold; font-family: tahoma; font-size: 13px; } #tt { /* es el contenido del tooltip y el único obligatorio */ background: CornflowerBlue; color: #FFF; display: block; font-family: Arial; font-size: 16px; padding: 5px 10px; position: absolute; -moz-border-radius: 10px; } /* los otros tres bloques son opativos y tiene sentido usarlos sólo si le colocamos un fondo con imágenes */ #tttop { /* la parte superior */ } #ttcont { /* la parte central */ } #ttbot { /* la parte inferior */ } * {margin:0; padding:0} body {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; background:#FFF} #text {margin:50px auto; width:500px} .hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer} #tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat} #tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden} #ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF} #ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden} speech-bubble { background: #6495ED; /* el color de fondo */ color: #FFF; /* el color del texto */ font-family: Arial, Sans-serif; font-size: 12px; padding: 20px 10px 10px 10px; text-align: center; width: 200px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .speech-bubble:after { border: solid 10px transparent; border-top-color: #6495ED; /* igual al color de fondo */ border-bottom: 0; bottom: -20px; /* igual al borde + el padding-bottom de la definición anterior */ content: ""; display: block; height: 0; margin: auto; overflow: hidden; position: relative; width: 0; } /* Tooltip 1 con CSS ----------------------------------------------- */ a.tt{ position:relative; z-index:24; color:#3CA3FF; /* Color del texto que tiene el tooltip */ font-weight:bold; text-decoration:none; } a.tt span{ display: none; } a.tt:hover{ z-index:25; cursor:help;} a.tt:hover span.tooltip{ display:block; position:absolute; top:0px; left:0; padding: 15px 0 0 0; width:200px; color: #000; /* Color del texto de la descripción */ text-align: center; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90; } a.tt:hover span.top{ display: block; padding: 30px 8px 0; background: url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TYoqcSszUVI/AAAAAAAABK0/Ifsdrjbp7vA/bubble.gif) no-repeat top; } a.tt:hover span.middle{ display: block; padding: 0 8px; background: url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TYoqcHKlteI/AAAAAAAABKo/PsTi6YPRYzA/bubble_filler.gif) repeat bottom; text-decoration:none; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; background: url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TYoqcSszUVI/AAAAAAAABK0/Ifsdrjbp7vA/bubble.gif) no-repeat bottom; }