Compound Rules

All Compound rules may take Fixed and List Values

Explanation

There are certain CSS properties that may include various parameters. For example, border is the combination of width, style and color and box-shadow includes values for hshadow, vshadow, blur, spread and color. In the case of border there are some specific css properties that let you modify the different parameters: border-width, border-style and border-color; however in the case of box-shadow there are not. For this type of CSS properties we have compound rules.

textShadow

textShadow may take either an object or an array of objects with the following required rules:

hShadow

Is a rule of type numeric.

vShadow

Is a rule of type numeric.

blurRadius

Is a rule of type numeric.

color

Is a rule of type color.

Example

Shadow: a dark area or shape produced by a body coming between rays of light and a surface.
JS

var rules = {
    textShadow: {
        hShadow: {
            min: -5,
            max: 5,
            steps: true,
        },
        vShadow: {
            min: 4,
            max: -4,
            steps: true,
        },
        blurRadius: "2px",
        color: {
            r: {
                min: "66",
                max: "00",
                steps: true,
            },
            g: {
                min: "66",
                max: "00",
                steps: true,
            },
            b: {
                min: "66",
                max: "00",
                steps: true,
            }
        }
    },
}

var opts = {
    split: "wrapped",
}

var movingTextShadows = new generativeText(rules, opts);
movingTextShadows.applyToElementById("example1");

filterDropShadow

Takes the same rules as textShadow

boxShadow

may take either an object or an array of objects with the following required rules:

inset

Boolean.

hShadow

Is a rule of type numeric.

vShadow

Is a rule of type numeric.

blur

Is a rule of type numeric.

spread

Is a rule of type numeric.

color

Is a rule of type color.

Example

Mushroom Field
JS CSS

var rules2 = {
    boxShadow: [
        {
            hShadow: "1px",
            vShadow: "1px",
            blur: "1px",
            spread: "1px",
            color: {
                r: {
                    min: "44",
                    max: "bb",
                    steps: true,
                },
                g: {
                    min: "66",
                    max: "00",
                    steps: true,
                },
                b: {
                    min: "bb",
                   max: "00",
                    steps: true,
                }
            }
        },
        {
            hShadow: "3px",
            vShadow: "3px",
            blur: "1px",
            spread: "1px",
            color: {
                r: {
                    min: "22",
                    max: "99",
                   steps: true,
                },
                g: {
                   min: "99",
                    max: "22",
                    steps: true,
                },
                b: {
                    min: "77",
                    max: "33",
                    steps: true,
                }
            }
        },
        {
            hShadow: "5px",
            vShadow: "5px",
            blur: "1px",
            spread: "1px",
            color: {
                r: {
                    min: "bb",
                    max: "33",
                    steps: true,
                },
                g: {
                    min: "22",
                    max: "88",
                    steps: true,
                },
                b: {
                    min: "99",
                    max: "00",
                    steps: true,
                }
            }
        },
        {
            hShadow: "7px",
            vShadow: "7px",
            blur: "1px",
            spread: "1px",
            color: {
                r: {
                    min: "00",
                    max: "88",
                    steps: true,
                },
                g: {
                    min: "22",
                    max: "88",
                    steps: true,
                },
                b: {
                    min: "aa",
                    max: "33",
                    steps: true,
                }
            }
        },
        {
            hShadow: "9px",
            vShadow: "9px",
            blur: "4px",
            spread: "4px",
            color: {
                r: {
                    min: "55",
                    max: "ee",
                  steps: true,
                },
                g: {
                    min: "ee",
                    max: "88",
                    steps: true,
                },
                b: {
                    min: "ff",
                    max: "00",
                    steps: true,
                }
            }
        },
        {
            hShadow: "11px",
            vShadow: "11px",
            blur: "2px",
            spread: "2px",
            color: {
                r: {
                    min: "33",
                    max: "ee",
                    steps: true,
                },
                g: {
                    min: "cc",
                    max: "88",
                    steps: true,
                },
                b: {
                    min: "dd",
                    max: "00",
                    steps: true,
                }
            }
        },

    ],
}

var opts2 = {
    textSpaces: "nostyleorwrap",
}

var boxshadows = new generativeText(rules2, opts2);
boxshadows.applyToElementById("example2");

            

#example2 span { width: 1.2em; margin-left: 14px; font-family: 'Playfair Display'; border-radius: 12px; color: white; background-color: #808033; }

backgroundPosition, backgroundSize, perspectiveOrigin

Takes the following rules

x

Is a rule of type numeric.

y

Is a rule of type numeric.

transformOrigin

Takes the following rules

x

Is a rule of type numeric.

y

Is a rule of type numeric.

z (optional)

Is a rule of type numeric.