Extract CSS | Illustrator CC. Adobe Illustrator CC - 2014

PDF

Dokument

Reklaam

Importing, exporting, and saving

To export unused styles:

1 When you want to save a file in SVG format, click File > Save As.

2 In the Save as type drop down, select SVG, type a file name, and then click Save.

3 In the SVG Options dialog, click More Options, in the Advanced Options area, select the Include Unused Graphic

Styles option, and then click OK.

339

Extract CSS | Illustrator CC

You can create the design for an HTML page in Illustrator. This serves as a good visual guide for a Web Developer who can then code the layout, styles, and objects into a page in an HTML editor. However, replicating the exact appearance and position of components and objects is a time-consuming and tedious process.

With Illustrator CC, when you create the layout for an HTML page, you can also generate and export the underlying

CSS code that determines the appearance of the components and objects on the page. CSS allows you to control the appearance of text and objects (similar to character and graphic styles). You can choose to export the CSS code for individual objects, or for the entire layout designed in Illustrator.

The CSS Properties panel (Window > CSS Properties) let users do following:

• View the CSS code for selected objects

• Copy the CSS code for selected objects

• Export one or more, or all selected Illustrator elements to a CSS file

• Export rasterizable images used

• Generate browser-specific CSS code

View and extract CSS code

To generate CSS code, do one of the following:

• Ensure that objects in your Illustrator document are named in the Layer's panel.

• Click Window > CSS Properties > flyout menu > Export Options, and select the Generate CSS for Unnamed Objects check box.

1 Select Window > CSS Properties.

Last updated 10/3/2014

Importing, exporting, and saving

340

Warning, if some styles could not be converted to CSS code

CSS Export Options dialog box

Export Selected CSS to file

Copy Selected

Style to the clipboard E Generate CSS F Flyout menu G Styles used in the selected objects H CSS code

2 In an open Illustrator document, do one of the following:

• Select one object. The CSS code for the object is displayed in the CSS Properties panel.

• Hold Shift, select multiple objects, and then click the Generate CSS button in the CSS Properties panel.

• Press Ctrl/Cmd + A to select all the objects, and then click the Generate CSS button in the CSS Properties panel.

The generated CSS code is displayed.

3 To obtain the CSS code that has been generated, do one of the following:

• To copy selected code, select specific code, and then:

• To copy to the clipboard, click Copy Selected Style

• To export to a file, click the flyout menu, and then click Export Selected CSS

• To copy all the code, make no selection in the CSS code, and then:

• To copy to the clipboard, click Copy Selected Style

• To export to a file, click the flyout menu, and then click Export All

4 While saving CSS code to a file, choose from the following options:

Last updated 10/3/2014

Importing, exporting, and saving

Note: To modify the content of the CSS code that is generated, in the CSS Properties panel, click Export Options, and then make the appropriate selections.

Sample CSS Code

Last updated 10/3/2014

341

Importing, exporting, and saving

Rectangle with a gradient applied (all browsers)

.GRADIENT_BOX

{

background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1)

10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1)

58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%);

background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1)

10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);

background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1)

),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),colorstop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),colorstop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),colorstop(1,rgba(237, 28, 36, 1) ));

background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);

background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)";

background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);

border-style : Solid;

border-color : #231F20;

border-color : rgba(35, 31, 32, 1);

border-width : 1px;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' ,

GradientType=1);

}

Rectangle with a gradient applied (webkit-based browsers only)

.GRADIENT_BOX

{

background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1)

10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);

background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1)

border-style : Solid;

border-color : #231F20;

border-color : rgba(35, 31, 32, 1);

border-width : 1px;

}

342

Last updated 10/3/2014