Visor one of the hidden apps CSS3 Builder

Visor has a lot of hidden features, these features are not the core functions of the system, just to test some technology, do some of the novice front-end engineers are still useful features. Let's introduce CSS3 generator today.

Let's introduce the note component:

Note is a component of the basic graphics part. Since visor is a HTML5-based graphic designer, note can also implement some of the effects that need to be HTML5, and we can get a visual effect by setting the Note's properties, and then using the CSS Style introduced in the next paragraph The template provides the user with a reverse generation of the entire CSS implementation.

Note commonly used properties:

Margin: Refers to the margin of the inner text distance border padding

Rotation: The current container rotates at a clockwise angle

Wide: Width of the entire container

High: The height of the entire container

Appearance properties of note:

Text settings: Ability to set the font style, color, size, and whether it is bold, italic, or not.

Background selection: The style of the background can be selected. Color, gradient, picture

Settings for Border effects: You can set the border to color, shadow, and rounded corners.

Text paragraph settings: line spacing and alignment effect of text paragraphs

The CSS Style template is described below

CSS style templates are implemented using a front-end technology Jsrender, which analyzes the attributes of the note, obtains information from it, and finally automates the implementation of a CSS code.

After we have designed the note, by clicking on the template on the right, you can generate a CSS code in reverse. Users can use the CSS effect they have designed to put in their own desired container.

1. Design a personalized container note

Click the template

The CSS code is generated

The resulting CSS applied to the DIV can produce the same effect as the note.

Interested friends can visit http://www.visor.com.cn to try it out.

Visor one of the hidden apps CSS3 Builder