CSS Text #3 - Code Example

Demo

2.75 KB
HTML, CSS
Text
first letter
MIT License

Code
Editor

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,400,700" rel="stylesheet" />

<div class="drop-cap">
    <h2>DROPCAP LIST</h2>
    <p>
        1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#!">Ut enim ad minim</a> veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
    </p>
    <p>
        2 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
    </p>
    <p>
        3 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
        consectetur.
    </p>
    <p>
        4 Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate.
    </p>
</div>

CSS

html {
  font-size: 18px;
  font-family: "Roboto Slab", serif;
}

h2 {
  font-size: 3rem;
  color: #d6a3cc;
  margin: 0;
}

.drop-cap {
  font-size: 1rem;
  max-width: 900px;
  margin: 100px auto;
  position: relative;
}
.drop-cap p {
  cursor: pointer;
  -webkit-transition: ease 0.3s;
  -o-transition: ease 0.3s;
  -moz-transition: ease 0.3s;
  transition: ease 0.3s;
  background: #fff;
  padding: 1rem 1rem 1rem 1.5rem;
  font-weight: 400;
  margin-bottom: 50px;
  z-index: 2;
  -webkit-box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.05);
}
.drop-cap p:hover {
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.05);
  -webkit-transform: translatey(4px);
     -moz-transform: translatey(4px);
       -o-transform: translatey(4px);
          transform: translatey(4px);
}
.drop-cap p a {
  color: inherit;
  text-decoration: none;
  position: relative;
}
.drop-cap p a:after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #d6a3cc;
  width: 100%;
  left: 0;
  bottom: 0px;
}
.drop-cap p::-moz-selection {
  color: #fff;
  background: #d6a3cc;
}
.drop-cap p::selection {
  color: #fff;
  background: #d6a3cc;
}
.drop-cap p:first-letter {
  z-index: 1;
  float: left;
  color: rgba(255, 0, 0, 0.2);
  margin-left: -40px;
  margin-top: -50px;
  font-size: 9rem;
  font-weight: 700;
  text-shadow: 10px 10px rgba(0, 0, 255, 0.2);
}

HTML
CSS

Let’s dive into this cool piece of code that’s all about jazzing up a webpage with some style. Imagine you’re flipping through a magazine and you see this giant letter at the start of a story. It looks pretty neat, right? This code does just that, but for a webpage.

First up, we’ve got the HTML part. It’s like the skeleton of your webpage. You’ve got a section that acts as a container. Inside this, there’s a bit where you can put your main heading – think of it as the title of your story. Then, there are paragraphs, which are your story. The magic starts with the first letter of these paragraphs.

Now, onto the CSS, which is where we add some flair. CSS is like the wardrobe for your webpage. It lets you dress up elements exactly how you want. Here, the CSS targets the first letter of every paragraph and makes it stand out. We’re talking bigger size, bold, maybe even a splash of color. It’s all about grabbing attention and making that first letter pop.

Imagine the first letter of your paragraph blooming on the screen, kind of like the opening act of a play, setting the stage for the story to unfold. That’s what this code does – it makes the start of your text an event of its own, inviting readers in with style and pizzazz.