Workshop – Despliegue de información por botón en CSS3

En este nuevo tips de tutosytips vamos a hacer algo un poco interesante con CSS3, sabiendo que con CSS3 podemos hacer algunas cosas muy atractivas y útiles, cosas que antes eran un poco complicadas, solíamos utilizar JavaScript o Flash para obtener resultados llamativos, hoy vamos a seguir experimentando con CSS3 y vamos a hacer algo practico para cualquier proyecto, algo llamativo. Se trata de un botón que despliega una información de interés en cualquier parte del sitio, ya sea en el contenido o en alguna sección, esto lo vamos a hacer con un par de DIVS y CSS y un par de características de CSS3.
Esto es lo que vamos a conseguir:

Para Una perfecta Visualización:

visualizacion-navegadores

Manos a la Obra!!

El HTML

Bueno, acá tenemos el código HTML, es muy fácil de entender, tenemos un contenedor general con un Id=botons dentro de este Id principal tenemos el div con la que es el botón que despliega el contenido que lleve ese div, dentro tenemos un titulo en h5 y el contenido, repetimos ese div para tener un segundo botón, Luego tenemos un div con Id=contenido donde se encuentra el contenido central del bloque, todo el texto.

EL CSS

En el código anterior podemos apreciar el CSS empleado para este ejercicio, vemos también que es muy sencillo de entender, solo resaltamos el #botons h5, que es que nos simula el botón, que también es el titulo del botón, el código utilizado aquí es el que nos hace ver de forma elegante el botón ya que es el que contiene las sombras, tanto de texto como del botón, y el degradado, ya que no estamos utilizando imágenes, ¿Cómo obtenemos este código para hacer degradados?, Para esto podemos utilizar las herramientas de CSS3 que nos hacen la vida mas fácil, la que utilizamos esta vez fue
http://www.colorzilla.com/gradient-editor/

herramienta-css

Y por ultimo tenemos el div que esta en el #boton, que es el contenedor que se despliega y que a la vez hace una transición y para eso utilizamos la propiedad transform con los respectivos prefijos de los principales navegadores. Y de igual manera una transición para hacer mas vistoso este ejercicio.

Y eso es todo, Claro esta, podemos seguir añadiendo funcionalidades a este ejercicio y seguir aprovechando las características de CSS3, pero por hoy dejemos aquí.

—————

No vemos en otro tutosytips!!

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

8 Respuestas

  1. Anartz dice:

    Voy a leer el artículo con detenimiento y poco a poco, gran tutorial!! Felicidades!

  2. marcos dice:

    me estoy iniciando fuertemente en esto del diseño web y creo que por la calidad del material que existe aqui, no puedo dejar de felicitarlos. Exelente material!!!

  3. Laura dice:

    Hola, debo admitir que no visito demasiado este sitio, en cambio, de ahora en adelante te
    diria que vendré más veces.
    😉

  4. Marie dice:

    This is amazing!

  5. When I first saw this title Workshop – Despliegue de información por botón en CSS3 | Tutos y Tips – tutoriales de diseño web on google I just whent and bookmark it.Thanks for your marvelous posting! I genuinely enjoyed reading it, you could be a great author.I will be sure to bookmark your blog and definitely will come back from now on. I want to encourage you continue your great writing, have a nice weekend!

  6. You made some clear points there. I did a search on the issue and found most guys will approve with your website.

  7. Merier dice:

    Buen tips, Gracias..