Como Crear Tips de Ayuda con CSS

Como Crear Tips de Ayuda con CSS

Muchas veces una pagina web necesita mostrar un poco de información de ayuda a los lectores, es por eso que hoy te presento este tutorial sobre como crear tips de ayuda haciendo uso de css y por supuesto html. Estos tips de ayuda son importantes porque limpian un poco la estética de la web al no tener toda la información amontonada en un solo lugar, en cambio, si el usuario considera oportuno deja de ser oculta para ser mostrada elegantemente, esto es lo que haremos el día de hoy. Te mostraremos el resultado final de estos tips de ayuda con css así como el código detrás, ¿Estas listo? vamos ya sunglasses

Lo que haremos

El codigo y ejemplo

Vamos a realizar este ejemplo de tips de ayuda con css que viste en el video anterior , para lo cual necesitamos lo siguiente.

  • Un archivo html (index.html)
  • Un archivo de estilo css (style.css)
  • Una imagen cualquiera para mostrarla dentro un tip de ayuda

Lo primero sera editar el archivo html, primero asegurate de enlazar con el archivo css.

Ahora crearemos dos divs anidados, uno para el cuadro de texto y otro para el icono de tip de ayuda, dentro de este ultimo ira el texto que queremos ocultar en primera instancia del usuario.

Ten en cuenta que el primer div para el texto regular pertenece a una clase llamada cuadro y el segundo div pertenece a una clase llamada tip-ayuda.


Suscríbete!

Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

Pasemos ahora al código css, el codigo de la clase cuadro es el siguiente.

simplemente es código de estilo y centrado del objeto nada del otro mundo, el código relacionado al div que funciona como tip de ayuda es el siguiente.

Como vez estos tips de ayuda con css hacen uso de una animacion llamada FadeIn, la cual se crea de la siguiente manera.

esto da un poco de elegancia al tip de ayuda.

Ahora simplemente agrega los cuadros que quieras en tu archivo html, puedes incluir código html, enlaces, imágenes, videos y lo que quieras incluir.

Puedes ver el ejemplo en funcionamiento en el Lab del blog – Laboratorio Como crear tips de ayuda con css – o descargar el proyecto completo.

Descargar Proyecto Completo

Eso fue todo, un mini tutorial fácil, rápido y bastante vistoso sunglasses No olvides que si tienes una duda puedes dejarnos un comentario o contactarme a traves de g+.

Saludos!

Como Crear Tips de Ayuda con CSS

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *