2014-02-11 62 views
0

我很难为我的丝带获得某种美观的垂直文本。带链接的CSS垂直文本

正如你可以链接 http://madbogen.com/

上看到的第一色带具有打印在图像上的一些白色的文字。有什么可能的方式来实现这与CSS?或者,如果我只是根据它所说的标题标记a-标签就足够了 - 我正在考虑搜索等?

我希望在不使用标题的情况下达到相同的效果,这样我可以摆脱悬停缎带时出现的小盒子。

在此先感谢

+0

http://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284 – sinisake

+0

只是为了好玩...尝试添加这对你的css:'a.ribbonfirst,a.ribonbonscond -webkit-transition:全部0.14s缓进; -moz-transition:全部0.14s缓出; -o-transition:全部0.14s缓进; -ms-transition:全部0.14s缓入; 过渡:全部0.14s缓出; } ' – TheYaXxE

回答

1

你可以使用<br />标签来他们坚持到不同的线路,像这样:

<div> 
<span>H <br />E <br />L <br />L <br />O <br />! <br /> 
</span> 

演示在这里:

http://jsfiddle.net/QSByU/497/

或可替代你可以包装e在span标签ACH字​​母,像这样:

<h1> 
    <span> N </span> 
    <span> E </span> 
    <span> T </span> 
    <span> T </span> 
    <span> U </span> 
    <span> T </span> 
    <span> S </span> 
    </h1> 

演示在这里: http://jsfiddle.net/QSByU/498/

有很多,你可以用它来使文​​本垂直显示(见http://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284)等方法。

1

谢谢你们。我看着tutsplus网站,发现字母间距和文字换行是我所需要的。

color: white; 
font-size: 16px; 
word-wrap: break-word; 
text-align: center; 
padding-left: 15px; 
padding-top: 45px; 
letter-spacing: 28px; 
text-decoration: none; 
line-height: 105%; 
font-style: normal; 
font-family: "Times New Roman"; 
+0

准确的解决方案,我宁愿和推荐:) – TheYaXxE