Dale estilo a tus apps v7 con QT Stylesheet y Colorzilla gradient creator

Pues bien ando de vuelta programando a full con v7 desarrollando mi primera app seria,  he comenzado a juagar un poco con las posibilidades de las Styles Sheets que provee Qt para sus controles y a las que Velneo nos permite acceder en v7.

De momento hay serias limitaciones en cuanto a selectores, pues no puedes asignar el css a un form y referirte a sus controles por su ID o clase (“# ó “.” para Css)  y tampoco puedes indicar que no quieres subcontroles de no hereden las propiedades que estas indicando.

Pero limitaciones a parte, este caracteristica tiene muchas posibilidades y asumo que de momento no es una prioridad para Velneo (No los culpo hay componentes que requieren mas trabajo, rejilla espero mucho de ti en v7.5 ;))  ya veremos en futuras versiones.

Ahora lo que si se puede hacer … Degrades !

Una propiedad interesante que me encontre jugando es “qlineargradient” que nos permite configurar un degradado, el cual podemos utilizar como fondo en los controles mediante la propieda background, pero  antes de entrar en lo estético primero hay que entender como funciona esta propiedad:

sintaxis => qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #COLOR1, stop: 1 #COLOR2);

parametros:

Las propiedades x1, y1, x2 y y2 nos permiten establecer de donde a donde dentro del control va a ser aplicado el degradado, por ejemplo: tal vez nos interese que el degrado se haga de todo el ancho del control pero solo hasta la mitad vertical del mismo, en diagonal, en horizontal, etc.

En este orden de ideas X1 – Y1, corresponden a las coordenadas de inicio del degradado tomando como referencia la esquina superior izquierda y X2 – Y2 corresponderian hasta donde va el degradado, en nuestro ejemplo del degradado hasta la mitad del control, el degrade iría desde la esquina superior izquierda (x1: 0,  y1:0) hasta la mitad vertical y todo el ancho horizontal (x2: 0, y2:0.5), el truco es imaginarse el gradiente como una flecha que va desde al punto1  (x1:- y1) al punto2  (x2-y2).

Unos ejemplos para enteder la direcciones:

Ahora, una vez establecido de donde a donde va el degrade hay que establacer como se comportará, esto se hace con los stops, los stops definen los colores que se van a degradar y en que puntos, por ejemplo normalmente vas a querer que un degrade vaya de un color a otro simplemente, lo cual puede definirse asi:

sintaxis => stop: porcentaje #color,

para ir de blanco a un gris escribes:

stop: 0 #FFFFFF,  stop: 1 #DCDCDC

Nota: lo ideal es escribir los colores en Hexadecimal.

Pero los programadores  no somo artistas

Normalmente los programdores no tenemos vena artistica y no nos queremos liar con eso (yo tome 3 años de clases de pintura en mi niñes pero a hoy PhotoShop me come jejeje),  aqui es donde entra ColorZilla Gradient creator, una pagina con un set variado de degradados de muy buen gusto, que nos permite tomar algunos predifinidos y nos da tambien la posibilidad de ponernos creativos, pero lo importante son los stops que nos entrega el generador, los cuales facilmente podemos traspasar a “qlineargradient”.

por ejemplo para el primer degrade:

nos entrega:

background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */

que pasado pasado  “qlineargradient” quedaría:

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #1E5799, stop: 0.5 #2989D8, stop: 0.51 #207cca, stop: 1 #7db9e8);

Esta linea es la que podemos utilizar en v7 mediante la instruccion “Intefaz: Set Hoja de estilo CSS”, tambien puede utilizarse dentro de algún selector, por ejemplo dentro de nuestro form hay una caja de grupo a la que queremos aplicarle el degradado entonces:

QGroupBox { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #1E5799, stop: 0.5 #2989D8, stop: 0.51 #207cca, stop: 1 #7db9e8);}

Como puede verse es solo pasar los colores y los porcentajes de un formato al otro obteniedo como resultado por ejemplo un boton que se ve asi:

Mas potencia ?

Por supuesto esta propiedad se la puedes aplicar a casi todos los controles que tengan una propieda background, dos ejemplos:

1. Mi OneButton menu, boton personalizado y menu con gradiente y letra mas grandes:

2. Dale un estilo mas Web a tus edits con algo de degrades:

Bueno esta es solo una primera aproximación de las posibilidades  Css de QT, en la media en la que encuentre comportamientos interesantes los iré compartiendo.

3 thoughts on “Dale estilo a tus apps v7 con QT Stylesheet y Colorzilla gradient creator

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s