当前位置：文江博客话题详情

Photoshop 到 CSS

发布于 2024-11-02 16:29:50 字数 1437 浏览 5 评论 0原文

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

身边 2024-11-09 16:29:50

有很多教程会教你将 Photoshop 切片为 html 和 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 应指向图像，并且当按钮太大时最好添加匹配的背景颜色

there are a lot of tutorials that will teach you to slice photoshop to html & css

but to answer your question. It all depends the button you designed. But for the standards wone you will have to copy the background of your button into a new document and save as a png or jpg (make sure to slice a 1 or 3px image that can be repeated)

and then with some css3 magic you can style your button and make sure it fits the content of your button.

eg:

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;
}

the url to the background should point to the image and best add a matching background color when the button is to big

回复收藏 0 原文

百善笑为先 2024-11-09 16:29:50

你想要做的事情有很多很多不同的解决方案。这里只是几个：

1. 您可以仅使用 css3 创建按钮

警告：此解决方案将无法在没有 javascript 插件

html

<a href="http:/my.url.com/" class="button">Hello World</a>

css 的

.button {
    border:solid 2px white;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:5px 5px 5px black;
    box-shadow:5px 5px 5px black;
    padding:20px;
    background:lightgray;
    color:darkgray;
}

旧版浏览器上工作2. 您可以使用 2 个图像 photoshop 创建按钮

：

create the image of the left side of the button.
make sure it's much longer than it needs to be.
the right end doesn't matter:
   ___________________________
  /
  |  button1.png        ...
  \___________________________

now create the right side of the button.
make sure it's very short, like below:
                    _____
                         \
   ...   button2.png     |
                    _____/

html

<a href="http:/my.url.com/" class="button">
    <span>Hello World</span>
</a>

css

.button {
    background: url(path/to/button1.png);
}

.button span{
    height: (height-of-button2.png);
    line-height: (height-of-button2.png);
    padding: 0 20px;
    background: url(path/to/button2.png) no-repeat right top;
}

这些只是几个变化。

编辑：抱歉。上面的代码是错误的。我刚刚修好了。

What you're trying to do has many, many different solutions. Here are just a couple:

1. You could create the button using css3 only

warning: this solution will not work on older browsers without javascript plugins

html

<a href="http:/my.url.com/" class="button">Hello World</a>

css

.button {
    border:solid 2px white;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:5px 5px 5px black;
    box-shadow:5px 5px 5px black;
    padding:20px;
    background:lightgray;
    color:darkgray;
}

2. You could create the button using 2 images

photoshop:

create the image of the left side of the button.
make sure it's much longer than it needs to be.
the right end doesn't matter:
   ___________________________
  /
  |  button1.png        ...
  \___________________________

now create the right side of the button.
make sure it's very short, like below:
                    _____
                         \
   ...   button2.png     |
                    _____/

html

<a href="http:/my.url.com/" class="button">
    <span>Hello World</span>
</a>

css

.button {
    background: url(path/to/button1.png);
}

.button span{
    height: (height-of-button2.png);
    line-height: (height-of-button2.png);
    padding: 0 20px;
    background: url(path/to/button2.png) no-repeat right top;
}

These are just a couple variations.

EDIT: apologies. the above code was wrong. i fixed it just now.

回复收藏 0 原文

怪我太投入 2024-11-09 16:29:50

不，无法直接从 Photoshop Elements 转换为可缩放的 HTML 和 CSS 版本。您需要将整个按钮导出为一个大图像（并为每个按钮使用单独的图像），或者使用 CSS 自行构建按钮。

回复收藏 0 原文

风月客 2024-11-09 16:29:50

sexybuttons - http://www.oscaralexander.com /tutorials/how-to-make-sexy-buttons-with-css.html 可以在 Photoshop 中创建一个按钮，一旦你用 CSS 构建了它，它就会根据你放入的任何文本调整其宽度，至于身高……不确定。

回复收藏 0 原文

绾颜 2024-11-09 16:29:50

使用 Photoshop 来创建代码并不是一个好主意。它创建了看起来很糟糕的代码。最好只是切片并命名切片，将它们保存到图像中，然后手动编写代码。不幸的是，这是一个非常手动的过程，而弥合设计和代码之间的差距并不是人类做得很好的事情！

回复收藏 0 原文

~没有更多了~

关于作者

能否归途做我良人

暂无简介

0 文章

0 评论

666 人气

关注发私信

友情链接

文江博客

Photoshop 到 CSS

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

1. 您可以仅使用 css3 创建按钮

旧版浏览器上工作2. 您可以使用 2 个图像 photoshop 创建按钮

1. You could create the button using css3 only

2. You could create the button using 2 images

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

Photoshop 到 CSS

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

1. 您可以仅使用 css3 创建按钮

旧版浏览器上工作2. 您可以使用 2 个图像 photoshop 创建按钮

1. You could create the button using css3 only

2. You could create the button using 2 images

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。