The PayPal Logo Challenge: One Solution, Pseudo Elements

The Challenge

A colleague and friend asked me to create the PayPal logo using only CSS and no images. Being a lover of CSS and problem-solving, I took the challenge! A couple hours later, after several iterations, the best looking solution was this:

The code can be found at the following URL: http://jsfiddle.net/x2dz1Lto/.

How did I do it?

1. Break up each “P” into three pieces. CSS manipulates element boxes or rectangles. Knowing this, I broke up each “P” of the logo into somewhat rectangular pieces. The first piece was the top part of the “P”:

The second piece was the leg of the “P”:

And the third piece was what I’ll call the curved neck of the “P”:

Doing the math, I had a total of six pieces.

2. Determine how many elements I needed to create the HTML structure.

Since I broke the PayPal logo into six pieces, you’d think I’d need six elements to create those shapes. Not so! By using the pseudo elements :before and :after, I would have two extra elements to manipulate for every element I created.

Since I only needed two elements, I decided to use two paragraph tags. One with a class named title and the other with a class named tagline. I also decided to wrap the paragraph tags in an article tag to modularize the logo and use it as a positioning context. See below.

<article class="paypalLogo">
 <p class="title">PayPal</p>
 <p class="tagline">PayPal is the faster, safer way to pay and get paid.</p>
</article>

3. Create the shapes.

The top part of the “P” was a skewed rectangle with three sides that had a border-radius. The leg of the “P” was also a skewed rectangle with one side or two sides that had a border-radius. The curved neck of the “P” was a little trickier. How was I going to create what looked like a triangle with a curved hypothenuse? I knew how to create a triangle, but creating one with a curved hypothenuse stumped me. I thought for a little while then a light bulb flipped on: I could use radial gradients to create the curve! Armed with that knowledge, it didn’t take too long to come up with the final code (for now).

Conclusion

Creating the PayPal logo was a fun challenge. The final product is very specific to PayPal, but the techniques used can be applied anywhere. Anytime you need more than one element for styling purposes and don’t want to mess with the semantics of your HTML by adding empty elements, you can use pseudo elements.

If you look closely at the logo, you can see a faint line where the neck of the “P” lines up with the leg of the “P.” That line seems to be a result of the antialiasing of the two skewed elements. I haven’t researched if there’s a solution for this; so if you have a solution, please let me know! Also, I’d love to see other CSS implementations of the PayPal logo. If you have one please share!