psd 自动css_使用CSS3P轻松将PSD转换为CSS3

Photoshop不仅是照片编辑的流行选择，还是设计网站的不错选择。 前面我们已经向您展示了如何使用Photoshop设计博客布局 。 通过一系列效果和功能，Photoshop允许我们使用阴影，圆角，内部发光，外部发光，纹理以及其他使网站看起来引人入胜的效果来组成视觉效果丰富的演示文稿。

但是，问题出在我们要将这些繁重的效果转换为CSS3时。 将每一种效果转换为CSS3确实是一项非常繁琐的任务。 如果您遇到此问题，我们希望本技巧可以对您有所帮助。

使用CSS3P

此插件可用于Photoshop CS3以及最新的CS6，在撰写本文时，它支持以下转换（将来会添加更多功能）。

Photoshop效果或对象	CSS3属性
对象大小	height和width
具有边界半径的形状	border-radius
中风	border
内发光，外发光，阴影和内阴影	box-shadow
文本	font ， text-transform ， text-decoration和color 。

此外，CSS3P还添加了供应商前缀，以实现跨浏览器的兼容性。

对于此演示，我们将按照以下屏幕快照中的指示，从Premium像素处的此PSD转换以下透明对象。

该插件易于使用。 只需为对象选择相应的层，然后单击CSS3Ps栏，如下所示。

然后，我们将重定向到生成输出CSS3Ps网页。 在我们的例子中，输出如以下片段所示。

结果很聪明，将不透明度效果从RGBA格式转换为Alpha通道。

controls base
{
  width: 500px;
  height: 40px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgba(34,36,38,.9);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15);
  box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15);
  border: solid 1px #000;
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
  background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
  background-image: -o-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
  background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
  background-image: linear-gradient(to top, rgba(0,0,0,.35), rgba(255,255,255,.35));
}

最终思想

这个插件确实节省了时间，并减少了工作量。 值得注意的是，为了使该插件正确转换，请确保使用正确的Photoshop fx来显示效果。

我从该服务看到的唯一缺点是等待时间，因为该过程是在云中完成的。 根据您的Internet连接，速度可能会有所不同。 尽管如此，它实际上比手动进行转换要快。

您是否尝试过此插件？ 请在下面的评论框中随意分享您的想法。

翻译自: https://www.hongkiat.com/blog/psd-to-css3/