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

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...
Post a Comment
Read more

Distortion Glitch Text Effect - CSS

  Use multiple text-shadow properly in CSS on a text by comma separating the values. DEMO Distortion CSS h2 { color : darkorange ; font-family : sans-serif ; font-size : 3.5em ; text-transform : uppercase ; text-shadow : -3px -3px 0 cyan , 3px 3px 0 pink ; }
Post a Comment
Read more

Element Center and Middle - CSS

Make the element center and middle within the specific element width and height is easy using flex. This box centered! HTML   < div class = "box-center" > < strong > This box centered ! </ strong > < div > CSS . box - center { background - color: red; width: 100 % ; height: 200 px; display: flex; align - items: center; justify - content:center; } . box - center strong { background - color: limegreen; padding: 0.5 em; }
Post a Comment
Read more