CODEWITHSUNDEEP
htmlcss
user1608982
user1608982

Reputation:

Drop-caps using CSS

How can I make the first character of each paragraph look like this:

enter image description here

I'd prefer using CSS only.

Upvotes: 2

Views: 912

Answers (4)

pr -
pr -

Reputation: 358

There's also the experimental initial-letter property.

p:first-letter {
  initial-letter: 3;
  -webkit-initial-letter: 3;
  margin-right: 0.5rem;
}

p {
  max-width: 320px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maecenas porttitor, augue at rhoncus commodo, nibh nulla feugiat odio, bibendum ornare dolor arcu id nibh. Quisque nibh risus, dignissim nec, ultricies eu, bibendum fringilla, ligula.</p>

As used in this example, it's supported in Chrome, and in Safari behind -webkit-, but not in Firefox yet. (caniuse css initial-letter)

Upvotes: 0

Gaurav
Gaurav

Reputation: 341

p { 
    width:300px; 
    border:1px solid #000;
}
p:first-letter {
    font-size:52px;
    color:#8A2BE2;
    font-weight:bold;
    float: left;
    margin-top:4px;
}
<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseduo element to give effect to
the first characters  of any HTML element.</p>
<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseudo element to give effect to
the first characters of any HTML element.</p>

See a JSFiddle Demo here

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

To get a bigger first-letter, you add this: p:first-letter{font-size:50px} (DEMO)

Here is the exact solution for your requirement shown in the image with drop caps:

blockquote {
    width: 50%:
}
div {
    font-size: 400%; 
    line-height: 67%; 
    float: left; 
    font-family: serif;
}
<blockquote>
<div>L</div>
orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>

Read more on the different types of initials at Wikipedia

Upvotes: 2

tvanfosson
tvanfosson

Reputation: 532505

p:first-letter {
    float: left;
    font-size: 5em;
    line-height: 0.5em;
    padding-bottom: 0.05em;
    padding-top: 0.2em;
}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Tweak the font, padding, line-height as needed.

Example: http://jsfiddle.net/RLdw2/

Upvotes: 4

Related Questions