html - Photoshop 到 CSS

标签 html css photoshop

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 9 年前

是否可以转换我用 Photoshop 创建的元素。

f.e.如果我在 Photoshop 中为按钮创建了一个“皮肤”,其中没有任何文本。我可以将它转换为 CSS,以便稍后在将按钮添加到 HTML 时添加文本并调整按钮的高度/宽度吗?

如果可能,怎么做?

提前致谢!

最佳答案

有很多教程会教你把photoshop切片成html&css

http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/ http://net.tutsplus.com/articles/news/photoshop-to-html-upcoming-ebook-from-nettuts-and-rockable/

但要回答你的问题。这完全取决于您设计的按钮。但是对于 wone 标准,您必须将按钮的背景复制到新文档中并另存为 png 或 jpg(确保切片可以重复的 1 或 3px 图像)

然后使用一些 css3 魔法,您可以设置按钮的样式并确保它适合按钮的内容。

例如:

input[type="text"]
{
   /*add rounded corners*/
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   background:#000 url('../images/button-background.jpg') repeat-x top left;
   paddng:3px 6px;
   margin:2px 0;
}

背景的 url 应该指向图像,并且当按钮太大时最好添加匹配的背景颜色

关于html - Photoshop 到 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5743019/

上一篇:iphone - jQuery Mobile iPhone 主题

下一篇:html - 为 div 覆盖 css 类的一些属性

相关文章:

html - 底部和顶部需要一个跨越我网站宽度的黑色填充栏,并且必须是可扩展的

html - css3 div 将框阴影 throw 到 textarea 上

javascript - 输入的 Photoshop Script 返回值

html - 如何仅在悬停时激活 CSS 动画 - 没有 javascript

html - 无法在子列表中删除直通线

jquery - 表格标题垂直文本

html - 用图像替换文本输入的边框

html - 在 iOS7 中固定页眉和页脚的网页滚动问题

javascript - 如何在来回转换时保持 RGB 和 HSL 整数值一致?

javascript - 修改和导出 PNG