Descargar ejemplo de ToolTip con CSS en español

Descargar ejemplo de ToolTip con CSS en español

para poder crear un ToolTip necesitamos dos apartados: El CSS y el HTML

si quieres puedes descargar el ejemplo completo de este tooltip para poder utilizarlo en tu web haciendo clic aquí

Descargar ToolTip con CSS

el apartado HTML es muy simple tenemos definido un div con una clase asignada tooltip y dentro de este div tenemos una etiqueta span que es la que aparecerá  y tiene asignada una clase que se llama tooltiptexto

<body>
<h1>Ejemplo de ToolTip</h1>
<div class="tooltip">Situate encima de mi
<span class="tooltiptexto">Hola cybernauta</span>
</div>

</body>

y en el apartado CSS tenemos definidas unas clases para el tooltip y para el tooltiptexto los cuales en principio están ocultos y tienen definido un color de texto, color de fondo, márgenes, etcétera

y al final del todo tenemos una clase para que cuando pase el cursor por encima del texto , pone visible el tooltip junto con el texto que hay dentro de la etiqueta span con la opacidad igual a 1

<!DOCTYPE html>
<html>
<style>
.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black;
}
.tooltip .tooltiptexto {
 visibility: hidden;
 width: 120px;
 background-color: #555;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -60px;
 opacity: 0;
 transition: opacity 1s;
}
.tooltip .tooltiptexto::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptexto {
 visibility: visible;
 opacity: 1;
}
</style>

con esto has visto lo simple que es poner un tooltip en tu página web y solo utilizando estilos CSS recuerda que puedes descargar el código completo en el enlace que hay en la parte de arriba de esta entrada

Descargar ejemplo de ventana modal con CSS y JavaScript en español

Descargar ejemplo de ventana modal con CSS y JavaScript en español

para poder crear una ventana modal necesitamos tres apartados

el primero es definir los estilos CSS para el diseño de la ventana modal,

el siguiente apartado es el HTML en el que se define con qué elemento haremos que aparezca la ventana modal y también se define el diseño de la propia ventana modal

y para finalizar el tercer apartado en el cual ponemos la programación en Javascript

veamos que se tiene que escribir en cada uno de estos apartados y recuerda que si quieres descargar el código completo de esta ventana modal pulsa aquí ….

descargar ventana modal

en el apartado CSS tenemos definidas diferentes clases

la primera es la mascara qué será un div que ocupará toda la pantalla, será de color negro con un poco de opacidad para que nos oculte la página en sí cuando aparezca la ventana modal, tenemos definido que esté oculta , que este en la posición 0 y que ocupe el 100%

también tenemos el contenido qué es la pequeña cajita donde pondrás el texto que quieres que aparezca en la ventana modal

y después tenemos unas clases para el botón de cerrar la ventana modal

<!DOCTYPE html>
<html>
<head>
<style>
.mascara {
 display: none; 
 position: fixed; 
 z-index: 1; 
 padding-top: 100px; 
 left: 0;
 top: 0;
 width: 100%; 
 height: 100%; 
 overflow: auto; 
 background-color: rgb(0,0,0); 
 background-color: rgba(0,0,0,0.4); 
}
.contenido {
 background-color: #fefefe;
 margin: auto;
 padding: 20px;
 border: 1px solid #888;
 width: 80%;
}
.cerrar {
 color: #aaaaaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}
.cerrar:hover,
.cerrar:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}
</style>
</head>

en el apartado del HTML tenemos definido un botón en el que pulsaremos para que aparezca la ventana modal y la ventana modal en sí que consta de dos divs uno para la máscara y otro para el contenido

aquí es donde puedes personalizar que quieres que aparezca dentro de la ventana modal

<body>
<button id="Btn">Abrir ventana modal</button>
<div id="lamascara" class="mascara">
 <div class="contenido">
 <span class="cerrar">&times;</span>
 <p>Hola cybernauta ...</p>
 </div>
</div>

y para finalizar en el apartado de JavaScript tenemos definidos los diferentes eventos que queremos que ocurra

cuando hacemos clic en el botón queremos que se visualice la máscara que es la ventana modal

y cuándo hacemos  clic en el botón de cerrar queremos que se oculte la máscara es decir la ventana modal

<script>
var mascara = document.getElementById('lamascara');
var btn = document.getElementById("Btn");
var cerrar = document.getElementsByClassName("cerrar")[0];

btn.onclick = function() {
 mascara.style.display = "block";
}
cerrar.onclick = function() {
 mascara.style.display = "none";
}
window.onclick = function(event) {
 if (event.target == mascara) {
 mascara.style.display = "none";
 }
}
</script>
</body>
</html>

como ves es muy fácil crear una ventana modal utilizando solo CSS y JavaScript y recuerda que en la parte de arriba de esta entrada tienes un enlace para descargar el código completo y adaptarlo a tu página web

ejemplo de botón cargando animado con CSS en español

ejemplo de botón cargando animado con CSS en español

en este ejemplo te muestro cómo puedes hacer un botón de cargando animado es decir  se ejecute una pequeña animación para llamar la atención y todo esto utilizando solo estilos CSS

veamos cómo funciona:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.botoncargando {
background-color: #4CAF50; 
border: none; 
color: white; 
padding: 12px 24px; 
font-size: 16px; 
}

.fa {
margin-left: -12px;
margin-right: 8px;
}
</style>
</head>
<body>

<h2>Botón cargando animado</h2>

<button class="botoncargando">
<i class="fa fa-spinner fa-spin"></i>Cargando
</button>

</body>
</html>

como puedes ver en el código anterior en el apartado del Body simplemente tenemos un elemento de tipo button con una clase aplicada llamada botóncargando y después un elemento <i> con tres clases aplicadas cuya definición está en la hoja de estilos que tienes definida en la parte del head

y es en realidad la responsable del aspecto del iconito y de su animación el aspecto del botoncito lo tiene la clase fa-spinner y la animación lo tiene la clase fa-spin

si quieres ver más ejemplos de los diferentes iconos que tiene esta hoja de estilos pública te dejo el siguiente enlace

ejemplo de botón animado con CSS en español

ejemplo de botón animado con CSS en español

en este ejemplo te muestro cómo puedes hacer un botón animado es decir que cuando si podemos el cursor encima de él se ejecute una pequeña animación para llamar la atención y todo esto utilizando solo estilos CSS

veamos cómo funciona:

<!DOCTYPE html>
<html>
<head>
<style>
.boton {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.boton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.boton span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.boton:hover span {
padding-right: 25px;
}

.boton:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>

<h2>Botón animado</h2>

<button class="boton"><span>Encima </span></button>

</body>
</html>

 

empezaremos la explicación por la parte de abajo en el apartado body de la página web en la que tenemos un botón con una clase llamada botón

como ves no me he matado mucho 😉

dentro de este botón tenemos el texto que está envuelto en la etiqueta span para poder identificarlo y animarlo cuando situemos el cursor encima

y ahora vamos a hablar de los estilos CSS que es dónde se diseña el botón animado y es dónde se define qué propiedades de los estilos quieres animar

primero definimos la clase boton la cual tiene el aspecto básico de nuestro botón … el borde el fondo los colores etcétera

y después viene la definición del texto que está dentro del botón, recuerda que está puesto con la etiqueta span para que podamos animar este texto

también tenemos una clase para indicar el pequeño icono que aparecerá después del texto y si te fijas la opacidad es 0 es decir en principio no lo veremos

y para que se ejecute la animación del botón tenemos dos clases más :

una para el botón en si el cual pondremos un poco de padding a la derecha para desplazar el texto y en la etiqueta span hacemos que el pequeño iconito se visualice poniendo la opacidad en 1

cómo has visto en este pequeño ejemplo es muy fácil tener botones animados en nuestra página web haciendo que llame más la atención al visitante