Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements

Botones sólidos en 3D de Orman Clark: La versión CSS3

by
Read Time:8 minsLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
Orman Clark's Vertical Navigation Menu: The CSS3 Version

Spanish (Español) translation by steven (you can also view the original English article)

¡Hoy crearemos algunos botones CSS3 increíbles! Se basan en el popular PSD freebie que Orman Clark hizo para su sitio web Premium Pixels. Intentaremos hacer una copia CSS de ellos, de la manera más precisa y con el menor marcado HTML posible.


Nota del editor: Orman nos ha permitido, de forma lúdica, aplicar CSS a cualquiera de sus obsequios de Premium Pixel que elijamos. Estos botones gruesos son solo uno de los muchos obsequios disponibles, así que espera más tutoriales como este en el futuro. ¡Hurra!


Paso 1: Delinear el documento HTML

Comenzaremos creando un nuevo documento HTML. Basé el mío en el modelo HTML5, solo para poder comenzar rápidamente y con el marcado de documento perfecto. También utilicé el documento de normalización css que viene con él. Luego agregaremos una lista con algunos anclajes básicos en ella. Así de simple, no necesitamos spans o divs adicionales, nuestro buen amigo CSS3 se encargará de eso.

Para poder darle algunos estilos CSS, le damos a la lista una clase 'buttons'. Y como vamos a mostrar todos los colores que usó Orman en su diseño, le daremos a cada enlace un color diferente como clase.

Eso es todo lo que necesitamos por ahora, ¡nuestro documento HTML está listo!Así es como debería verse cuando lo ves en tu navegador hasta ahora:

Simple HTML Markup

Paso 2: Un poco de estilo CSS básico

Antes de comenzar con estilos como degradados, esquinas redondeadas, etc., primero aplicaremos algunos estilos básicos.Nada especial aquí, solo las cosas habituales de CSS2.

También podemos alterar fácilmente los colores de los botones, ya que agregamos clases. Así que lo haremos para todos los demás colores, por ejemplo, el gris. Puedes comprobar todos los códigos de color en el archivo de demostración.

Si hiciste todo bien, deberías tener algo como esto. Lo cual es bueno... ¡si viviéramos en 2008!

Looking good. Bit boring though!Looking good. Bit boring though!Looking good. Bit boring though!

Paso 3: ¡Bordes dobles hasta el final!

Ahora, si observas un poco más de cerca el archivo de Photoshop, notarás que no solo hay un borde más grueso en la parte inferior, sino también uno más delgado en todo el contorno y una pequeña línea adicional entre la parte gruesa y el borde actual. Para traducir ese último detalle a CSS, usaremos un truco CSS2, los pseudoelementos :before y :after.

Colocaremos estos elementos, que podemos ver como cuadros separados, exactamente detrás de nuestro botón real con la propiedad de posición. Para guardar algunas líneas CSS, primero aplicaremos estilo a ambos elementos y luego agregaremos los valores solo para el elemento anterior.

¡Las cosas comienzan a verse bien cuando agregamos los colores correctos!

Added some detailsAdded some detailsAdded some details

Paso 4: Agregar la magia de CSS3 

Ahora, lo que todos ustedes han estado esperando, la parte de CSS3. Comenzaremos agregando esquinas redondeadas a todos nuestros botones:

Y luego, por supuesto, nuestros elementos :before y :after también necesitan esquinas redondeadas para que los bordes se ajusten. Sin embargo, el elemento :before no necesita que se redondeen las esquinas superiores, de lo contrario veremos un pequeño error. Dado que el elemento :before es el que tiene la posición más baja, agregaremos la sombra del cuadro a este elemento en lugar de al principal.

Por último, aplicaremos algunos fondos degradados, una sombra interior y algo de sombra de texto para cada color por separado. Agregaremos el estado :visited también para evitar errores en IE6.

Este debería ser nuestro resultado. Se ve bien, ¿no?

Our final result!Our final result!Our final result!

Paso 5: ¿No olvidamos algo?

Hay una cosa importante que aún debemos hacer; Orman también hizo un diseño para el estado activo. ¡Así que, por supuesto, agregaremos eso a nuestra versión css!

Pondremos el código para el estado activo debajo de todas nuestras definiciones de color, ya que algunos de estos valores deben sobrescribirse. La primera diferencia con los otros estados es que no tiene bordes. También está un poco más abajo para sugerir sangría. Y necesitaremos usar 2 sombras en lugar de una: una normal, blanca y una segunda, interna que es transparente. Por último, ya no necesitamos los pseudo-elementos :before y :after

Así es como deberían verse nuestros botones en estado activo:

Active buttons = happy buttonsActive buttons = happy buttonsActive buttons = happy buttons

Paso 6: (Opcional) navegadores más antiguos

Ahora tenemos algunos buenos botones CSS3 que funcionan en todos los navegadores modernos. Pero, ¿qué pasa con Internet Explorer, por ejemplo? IE8 y versiones inferiores no son compatibles con sombras de cuadro o texto, ni degradados.

Para poder diseñar nuestros elementos específicamente para estos navegadores, podríamos usar Modernizr, una biblioteca de javascript que detecta si tu navegador puede manejar propiedades CSS3 y HTML5. No soluciona los problemas de los navegadores más antiguos, agrega clases a la etiqueta html (informa las capacidades que están y no están disponibles) para permitir estilos alternativos.

Otra opción sería hacer que estos navegadores se comporten con algunas otras bibliotecas de JavaScript (esas se llaman polyfills), pero eso es algo que no vamos a cubrir en este tutorial. En su lugar, solo usaremos una imagen para navegadores más antiguos.

Primero crearemos nuestra versión de compilación personalizada de Modernizr, de esa manera no tendremos que llevar todo el javascript superfluo con nosotros. Podemos hacerlo fácilmente en su sitio web. Cuando implementamos el javascript en nuestro archivo html, solo necesitamos definir el estilo alternativo para clases html específicas. Vamos a utilizar una imagen para navegadores que no son compatibles con (uno de) los 2 efectos CSS3 más notables que usamos, bordes redondeados y gradientes css. Y dado que algunos navegadores más antiguos ni siquiera admiten el contenido generado (:before y :after), también lo mencionaremos.

Para mejorar el rendimiento, utilizamos un Sprite CSS para el estado activo y de desplazamiento. Y el estado :visited todavía se incluye para evitar el error de IE6.


Conclusión

Bien, ¡ahora tenemos nuestros botones CSS3 que funcionan en varios navegadores! Probablemente pensarás que esto parece mucho código para 10 botones, pero, por supuesto, esto es solo una demostración de lo que puedes o no puedes hacer con CSS3. ¡Eres libre de hacer lo que quieras con él!

Hasta ahora mi primer tutorial... Espero que les haya gustado, ¡gracias por leer!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.