de que puedo puedo: Crea fácilmente botones 3D con CSS3 y Ruby

lunes, 6 de febrero de 2012

Crea fácilmente botones 3D con CSS3 y Ruby

Alexis ha creado una fórmula para poder realizar botones en tres dimensiones con CSS3 y Compass, una extensión de Ruby, de forma sencilla y rápida. Únicamente hay que seguir estos pasos:

Instalación de la extensión

Cuando hayas descargado la extensión, únicamente será necesario incluirla en el sitio y realizar una referencia a ella:

Ver en texto planoCopiar al portapapelesImprimir
@import "fancy_3d_buttons";  

Configurando las variables

f3d_button(background color, font size, font weight, line height, border radius, border top, border left)

Como podéis comprobar, existen muchas variables, pueden elegirse las que se deseen.

Para declarar las propiedades del botón, basta con seguir estas reglas, cambiando los valores y propiedades por las que se deseen, claro está:

Ver en texto planoCopiar al portapapelesImprimir
a.green{  
@include f3d_button(#63bb4a);  
}  
a.blue{  
@include f3d_button(#2992DF, 50px, bold, 1.5em, 10px, 2px, 2px);  
}  