Trucos CSS3 – Efectos con CSS3 simples

Por: Laru | Categoría: HTML & CSS

El nuevo CSS nos ha dejado a todos sorprendidos y queremos aprender todos los trucos ya. Por eso les traemos una recopilación muy interesante que estamos seguros sabrán emplear en sus proyectos. Desde botones hasta menúes les traemos en esta ocasión para que puedan equiparse desde lo más complejo hasta lo más simple.

Botones CSS3 con gradiente, hover y onclick

Los botones con gradientes quedan geniales, pero el problema llega cuando tenemos que hacerlos en varios tamaños. Para simplificar el proceso de diseño Mark de ‘The ZURB blog’ nos explica como crear botones con gradientes de diferentes colores, hover y como si fuera poco un efecto onclick muy interesante. Lo más importante de esta técnica es que los botones son escalables.

Demostración

Efecto Polaroid con hover sólo con CSS

En un nuevo tutorial desarrollado por ‘ZURB’ les mostramos un efecto interesantísimo, la transformación mediante CSS2 y CSS3 de imágenes en fotografías Polaroid ¡con efecto hover! y sin nada de Javascript. Veamos el tutorial y la página de ejemplo con otras tantas explicaciones útiles.

Demostración

Efectos en textos: Letras presionadas y sombra

En este tutorial 2 en 1 realizado por Chris Spooner de Line25 aprenderán a crear en pocos pasos el efecto de letras presionadas en una superficie y el efecto de sombra utilizando CSS3. Con la llegada del nuevo CCS3 no será necesario realizar imagen por imagen y el único defecto es que las personas que utilizan los navegadores que no soportan este lenguaje actualizado verán el texto sin efectos.

Demostración

Menú multinivel o Drop Down Menu con CSS3

Web Designer Wall nos trae este menú multinivel, colapsable o Drop Down de estilo Mac muy elegante y prolijo realizado enteramente en CSS3. Con sus bordes redondeados y los gradientes sutiles este es un menú que tienes que considerar cuando estés renovando tu sitio web.

Demostración

¿Te gustó el artículo?

Recomiendalo a través de las redes sociales

Tal vez te interese...

Comentarios

Si deseas agregar un código a tu comentario por favor usa el siguiente formato: <pre name="code" class="php">Tu código</pre>. Puedes reemplazar la clase con "js", "css", "sql", o "html". Si el código tiene algún "<" o ">" en tu código reemplazalo con: &lt; y &gt; respectivamente.

Este artículo tiene 2 comentarios

  • Jonathan S. Prieto, comento el 07 de julio del 2010:

    Te felicito por la labor de dinvaders, me gusta mucho el contenido que muestran, sigan asi, si me peude enviar a mi mail, lo que cuelgan, perfecto!

  • Laru, comento el 07 de julio del 2010:

    Gracias por visitarnos, pronto estaremos implementando el sistema de newsletters y postearemos nuevo material, no lo hemos podido hacer por la cantidad de trabajo que hemos tenido estos últimos días.
    Por lo pronto, si deseas puedes suscribirte a los RSS que es un modo similar de recibir los contenidos.

    Saludos!!