CSS3PS plug-in

The CSS3PS plug-in can easily export layers and shapes with icon styles to CSS3, SCSS, and other formats. For example, some graphics or text with gradient, rounded corners, inner glow, and inner shadow styles can be exported. This is more convenient than some CSS3 generation functions.

Function introduction

Proof - you can easily see conversion results online in your browser

Multi-layer - you can select several layers and layer groups and convert them in one click

Prefix, we support all popular browsers: prefix "webkit" for Safari and Chrome, "moz" for Firefox, "ms" for IE 10.

Blending - currently only supported in Normal mode, but we will add other blending modes soon

Size – The size of our transform layer (shape or bitmap), CSS width and height properties

Border radius, we calculate the shape border radius to see if it is possible to represent the shape as a rounded rectangle, you can convert many shape types

Bevel and Emboss – We don’t support it

Stroke - converted to CSS border properties

Inner shadow - converted to CSS without property

Inner glow, converted to CSS without property

Color overlay, we don't support it currently but we will add it soon

Gradient overlay - currently we only support linear gradients, but we will soon add radial and reflected gradients

mode - we don't support it right now, but we're working on it

Outer glow, converted to CSS without property

Drop Shadow – converted to CSS without property

Text layer, we support CSS font type, font size, weight, font style, initial letter, text decoration, color and text shadow properties for text layer

Installation method

1. If Adobe Photoshop is running, close it

2. Copy the downloaded “.zxp” file and open it with Adobe Extension Manager

3. Click the "Accept" button in the Adobe Extension Manager extension manager

4. After the installation process is completed, you will see the plug-in name, version number, and author. Exit the Adobe Extension Manager and run Adobe Photoshop.

5. Check "Window" → "Extensions" → "Css3PS" in Adobe Photoshop

How to use

1. Select the layer you want to convert

2. Select "File" → "Script" → "Browse" → "Menu Item"

3. Select Css3ps

4. It will run automatically and open a browser window to display the conversion results.

Things to note

After downloading, you can choose to use the corresponding plug-in according to the version you are using.

　　Support: