- Green versionCheck
- Green versionCheck
- Green versionCheck
- Green versionCheck
- Green versionCheck
Installation instructions
1. Rename the file, change the suffix to zxp, and the icon will become
2. Open Adobe Extension Manager to install
3. Find the directory where you want to download the file.
4. Next select css3ps.zxp
5. Click Accept and start the next step of installation.
6. After installation, you can view the specific information of the plug-in in the software toolbar.
How to use
I specifically tried this myself:
I am currently using CS6, so I downloaded the following file (see official instructions for PS3/PS4 use), double-click it:
Then the following will appear:
Then this:
Then it will look like this:
Accept it and you will:
As above, the installation is complete. At this point, restart or open photoshop, click window -> Extension -> CSS3Ps and a square area will appear, as shown on the right side of the picture below:
Next, become a designer, draw a rounded rectangle, create a gradient projection or something, select the layer, and then click on the box area with the words CSS3Ps above:
The default browser will open, and after a while, the following will appear:
At this point, the personal test is completed.
FAQ
If the installation fails, you can try the following methods:
Just put the files in the compressed package into the Plug-insPanels folder under the Css installation directory.
X:AdobeAdobe Photoshop CC (64 Bit)Plug-insPanels
Tips
Photoshop layer effects and other effects can be directly converted into CSS3 code. There is no need to browse the web to query the writing method of CSS3 code. There is no need to manually check the special data of the PS layer to write CSS3 code, which greatly improves the efficiency of writing code.
Mixed options menu
With CSS3Ps, the above special effects can be directly exported to CSS3 code~
Rounded border: -webkit-border-radius: 5px;
Module shadow: -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.45);
In-module shadow: -webkit-box-shadow: inset 0 20px rgba(255,255,255,.55);
Text-shadow: text-shadow: 3px 4px 5px rgba(4,0,0,.75);
Text-shadow: text-shadow: inset 3px 4px 5px rgba(0,0,0,.75);
Glow inside the module: -webkit-box-shadow:inset 0 0 17px rgba(255,255,190,.41);
Glow within text: text-shadow: inset 0 0 5px rgba(249,247,189,.75);
Linear gradient: -webkit-linear-gradient(bottom, rgba(222,0,120,.74), rgba(255,150,0,.74));
These effects can be converted into css3 code with just one click, which is very simple to operate.
Things to note
There are limits to the layers that can be recognized as CSS3. For example, it seems that gradient CSS3 can only be recognized using the gradient of the layer style. For shadows, strokes, etc., try to use the fx layer style.
Rounding the corners requires using the Rounded Rectangle tool, and seems to preserve the path. This is required for parameter acquisition.
it works
it works
it works