Skip to main content

Drop Caps Paragraph - CSS

Like on every magazine, there is a drop caps on first paragraph. On web development style with the first-letter pseudo element selector.

DEMO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

CSS

.drop-caps:first-letter {
  font-size: 400%;
  float: left;
  margin: 0 0.3em 0 0;
  font-weight: bolder;
  line-height: 1.4em;
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Text Field in Webflow with Material Design Style

Custom Material Design text inputs, using a combination of native Webflow components and some simple HTML and CSS. You can clone the project here , thanks to Steven Hanley. Spent yesterday evening spinning up some @materialdesign text fields using a combination of the @webflow Designer and some simple HTML and CSS. Feel free to clone the project, customize to your liking, and use this component in your next design! ↳ https://t.co/Ti5fVj5V8t pic.twitter.com/KUi1uwW7X1 — steven hanley (@_stevenhanley) December 4, 2019
Post a Comment
Read more

Image Text Wrap-Around - CSS

Text wrap around the image with shape-outside for visual flair! DEMO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at ullamcorper mi imperdiet. Phasellus sit amet rutrum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at u
Post a Comment
Read more

Subject and Body Text to A Mailto Anchor - HTML

Adding the subject and body text to the mailto HTML tag is an easy way to help direct Emails when listing more than one e-mail address. DEMO Click Here to Email Us About Job Commission? HTML < a href = "mailto:name@email.com?subject=Job Commission&body=Hi friend, can you share me the list of job commission available." > Email Us About Job Commission ? </ a >
Post a Comment
Read more