发布评论
评论(5)
百善笑为先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;
}
这些只是几个变化。
编辑:抱歉。上面的代码是错误的。我刚刚修好了。
风月客2024-11-09 16:29:50
sexybuttons - http://www.oscaralexander.com /tutorials/how-to-make-sexy-buttons-with-css.html 可以在 Photoshop 中创建一个按钮,一旦你用 CSS 构建了它,它就会根据你放入的任何文本调整其宽度,至于身高……不确定。
~没有更多了~
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
有很多教程会教你将 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魔法您可以设置样式您的按钮并确保它适合您的按钮的内容。
例如:
背景的 url 应指向图像,并且当按钮太大时最好添加匹配的背景颜色
there are a lot of tutorials that will teach you to slice photoshop to 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/
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:
the url to the background should point to the image and best add a matching background color when the button is to big