How do I replicate this effect in CSS? - html

Question

http://i.imgur.com/Ta7cZ.png
The portion to the right of Who with the ----------
Is it a background to the li? I'm really drawing a blank as how to create something like that.

Answer 1

Here you go mess around with this.
http://jsfiddle.net/fjZfL/3/
HTML:
<div id="box">
<h2>who?</h2>
<p>I am 22 Year old designer …</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

Alternatively - there IS the HR solution
http://jsfiddle.net/UYYh5/4/

Answer 3

Isn't that just a horizontal rule? aka <hr />?
Well, just searched the text in the image, and found the website. This CSS style applied to the p block in question is how it's done I guess.
border-top: 1px solid rgba(0, 0, 0, 0.1)

Answer 4

Here you go: http://jsfiddle.net/x63x2/
The 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 ;
}
and the 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>​
If you want to dress up the line, you can style your HR w/ CSS. This is just a basic example.

Answer 5

Here is another alternative.
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"/> </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

An easy way to replicate this effect is something like:
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>
To me, images always look cleaner for a background that thin. In my example, you'd obviously cut the images down, but you get the idea.