html - この効果をCSSで複製するにはどうすればよいですか？

Question

http://i.imgur.com/Ta7cZ.png

Whoの右側の部分----------

それは李の背景ですか？そのようなものを作る方法として、私は本当に空白を描いています。

Answer 1

ここであなたはこれをいじります。

http://jsfiddle.net/fjZfL/3/

HTML：

<div id="box">
    <h2>who?</h2>
    <p>I am 22 Year old designer …&lt;/p>
</div>

CSS：

#box {
    width: 200px;
    height: 150px;
    background: #eee;
    padding: 0 8px;
}
h2 {
    display: inline-block;
    padding: 18px 4px 0 10px;
    margin: 0;
    background: #eee;
}
p {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 20px 10px;
    margin-top: -10px;
}

Answer 2

または、HRソリューションがあります

http://jsfiddle.net/UYYh5/4/

Answer 3

どうぞ： http： //jsfiddle.net/x63x2/

CSS：

body { font-family:arial,helvetica,sans-serif ;
}

.block-item { width:350px ;
    height:300px ;
    padding:10px ;
    margin:auto ;
    background:#D4D4D4 ;
}

p { font-size:13px ;
    margin-top:14px ;
    margin-bottom:14px ;
    line-height:18px ;
}

.block-item h1 { display:block ;
    background:#D4D4D4 ;
    font-size:18px ;
    color:red ;
    padding:0px 5px 0px 0px ;
    position:absolute ;
    top:3px ;
}

およびHTML：

<div class="block-item">
<hr>
<h1>Who?</h1>
<p>Nulla porttitor sodales quam, et molestie mi euismod vel. Nunc iaculis ligula ac dolor congue consequat. Cras tristique vulputate auctor. Pellentesque mattis massa vel arcu auctor tristique. Mauris rhoncus porta diam, sit amet euismod turpis viverra eu. Nulla in ligula sed nibh tristique laoreet. Nullam id magna erat. Sed porttitor mauris vel diam pharetra a volutpat tellus volutpat. Quisque placerat laoreet odio sit amet posuere. Duis id libero nisl.</p>
</div>​

ラインをドレスアップしたい場合は、CSSを使用してHRのスタイルを設定できます。これは単なる基本的な例です。

Answer 4

それは単なる水平的なルールではありませんか？別名<hr />？

さて、画像内のテキストを検索して、ウェブサイトを見つけました。問題のpブロックに適用されるこのCSSスタイルは、私が推測する方法です。

border-top: 1px solid rgba(0, 0, 0, 0.1)

Answer 5

別の方法があります。

http://jsfiddle.net/PZxA7/

.title{
 background-color:white;
    position:absolute;
    z-index:10;
}
.bar
{
    border-bottom:1px solid;
    position:absolute;
    display:inline-block;
    color:#b5b5b5;
    margin-top:-10px;
    width:350px;
}
.container
{
    width:350px;
}

<div class="container">

    <div class="title">W H O?</div>

    <div class="bar"/>&nbsp;</div>

<p><br/>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

 

Answer 6

この効果を再現する簡単な方法は次のようなものです。

div.wrapper{ width:  300px;
             font-family: 'Times New Roman';
             font-size: 13px;
             color:  #3b3a3a;
}
div.wrapper div{
    margin: 0px 0px;
}
div.header span{
    font-size: 14px;
    font-family: Verdana;
    font-weight: 300;
    display: inline-block;
    margin: 0px;
    width:  60px;
    background-color: #fff;

}
div.content p
{
    margin: 3px;
}
div.content p span
{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -150px -140px;
    height: 7px;
    width: 30px;
    display: inline-block;
}
div.wrapper div.header{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat 0px -10px;
}
div.wrapper div.footer{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -10px -170px;
    height: 18px;
}


    <div class="wrapper">
        <div class="header"><span>Who?</span></div>
        <div class="content"><p>I'm a 22 year old designer who spends more time on the internet than I should.  
            I am currently living in Upstate NY, but would love to someday move away from the cold.  I am a sucker 
            for Apple products and enjoy a well-brewed beer.<span></span></p>
        </div>
        <div class="footer"></div>
    </div>

私にとって、画像は背景が薄いほどきれいに見えます。私の例では、明らかに画像を切り詰めますが、アイデアは得られます。