CODEWITHSUNDEEP
htmlcss
Doug Smith
Doug Smith

Reputation: 29326

How do I replicate this effect in CSS?

enter image description here

https://i.sstatic.net/2JMTB.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.

Upvotes: 3

Views: 248

Answers (6)

El Kabong
El Kabong

Reputation: 717

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.

Upvotes: 0

manish
manish

Reputation: 497

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

Upvotes: 3

Haru
Haru

Reputation: 1381

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"/>&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>

 

Upvotes: 0

Xhynk
Xhynk

Reputation: 13890

Alternatively - there IS the HR solution

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

Upvotes: 2

Cynthia
Cynthia

Reputation: 5403

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.

Upvotes: 0

Jayson
Jayson

Reputation: 950

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)

Upvotes: 0

Related Questions