GTCss
Saturday, 20 November 2010 22:06
What is it?
GTCss is the new css code GTMagic provides you with him, you can try to design aspects dynamically.
How do I use?
Just add the code to a CSS file after this, gtmagic file, xml declarative your extension, specify that this file is dynamic so that GTMagic interpreter.
Definition
GTCss code in version 0.6 allows the following syntax:
@color(type, par)
Color system
-
type: string (base or text)
par: integer (0 to 9)
@image(width, scale, recut)
Image system
-
width: integer
scale: integer
recut: boolean (false or true / 0 or 1) (false by default)
@gradient(width, height, color, inv, orientation, top)
Graphic gradient transparent rectangular
-
width: integer
height: integer
color: type_par (example: "base_2")
inv: boolean (false or true / 0 or 1) (false by default)
orientation: horizontal or vertical (vertical by default)
top: boolean (false or true / 0 or 1) (false by default)
@fill(image, color0, color1, color2, color3, color4..., color9)
Fill an image, replaces colors in it
-
image: string ( image name you want to use, no extension, should be located in the images folder and be a PNG )
color0: type_par (example: "base_2")
color1: type_par (example: "base_4")
...
color9: type_par (example: "base_1")
The first statement GTCss: @color, we can specify a color dynamic, ie, one of the X colors taken from the main image of our set. We suggest that this color is "base" or "text." The first is the natural color of choice, and the second a reverse black and white.
The second statement GTCss: @image, we will print the image that the user has uploaded to the system. We indicate the width for it and the pixels in which we resize it and if we cut it out.
The third statement GTCss: @gradient, allows us to create a rectangular figure, with a degradation of a transparent background color specified.
The fourth statement GTCss: @fill, is the most powerful. We open the picture with it and change the colors specified in it to which it is our design.
It is working on adding one more function:
@ Custom: To enable additional features including user-defined
Example Usage
In the file template.css a template, we have:
body {
background-color: @color(base,5);
color: @color(text,5);
background-image: @image(800,400,1);
background-position: top;
}
The system, for example, replaced @color(base, 5) chosen in the current set: #893789;