El Blog de Ayuda: Css

martes, 20 de octubre de 2015

Tooltips con Estilo

Los tooltips son estás pequeñas etiquetas emergentes que se muestran cuando el cursor del ratón queda parado durante unos instantes encima de un componente visual de una ventana. Son muy prácticos para suministrar una información adicional relacionada a este componente o inclusive mostrar la dirección a la que manda en el caso que sea un Link. En HTML es fácil crear un tooltip con el atributotitle. El atributo title es válido para todos los elementos de HTML, por lo cual se puede poner un tooltip a absolutamente todo, inclusive a un simple texto

<button title="este es un ejemplo de tooltip" >BOTON</button>

El ejemplo es bastante útil pero si deseamos podemos hacer un tooltip con el estilo que deseamos y mejoraría la presentación de nuestra Web. Ahora les mostraré como darles un estilo propio y de lo más simple de aplicar usando Css. Ejemplo:

<html>
<head>
<style type="text/css">
.tooltip {
text-decoration: none;
display: inline;
position: relative;
transition: all 0.5s;
}
.tooltip:hover:after {
bottom: 35px;
content: attr(title);
left: -35%;
position: absolute;
background:red;
border-radius: 5px;
color: white;
font-size:12px;
text-align: center;
width: 150px;
}
.tooltip:hover:before {
bottom: 18px;
left: 35%;
position: absolute;
content:"";
border-top: 9px solid red;
border-bottom: 9px solid transparent;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<button title="este es un ejemplo de tooltip sencillo" class="tooltip">un ejemplo </button>
</center>
</body>
</html>

sábado, 17 de octubre de 2015

Poner Estilos Css a un Input "file"

Al momento de trabajar con un input tipo "file" notamos que no podemos aplicar estilos ni modificar el texto del boton eso hace que se pierda la estética en nuestro proyecto si tenemos botones personalizados

Pero lo bueno es que tenemos una alternativa que nos puede salvar el día, podemos hacer que un boton "button" que si puede ser modificado con estilos simule el click del input tipo "file", esto es de mucha utilidad y fácil de implementar usando Javascript, aparte ocultaremos en input "file" para que solo quede el "button" Ejemplo:

<html>
<head>
<style>
.modificar{
width:130px;
height:40px;
background-color: blue;
color:white;
border:0;
}
</style>
<head>
<body>
<input id="botonArchivo"
type="file"
style="display:none;">
<button onclick="document.getElementById('botonArchivo').click()" class="modificar">ABRIR</button>
</body>
</html>

martes, 20 de octubre de 2015

Tooltips con Estilo

sábado, 17 de octubre de 2015

Poner Estilos Css a un Input "file"

Traducir