powerpoint like slide that uses css3 and html onlyEach week I look through hundreds of Pens on CodePen, looking for what I feel is the best. Things I look for are creativity, innovation, simplicity, functionality, etc. This weeks favorite Pen is a Pure CSS3 “PowerPoint” Like Presentation by Kezz Bracey from Tuts+. This should come as no surprise considering the amount of awesome content that Tuts+ produces. There were a lot Pens this week that could have just as easily been worthy of the top spot, so I will explain why this Pen is our favorite of the week.

The Pen

See the Pen #9: Pure CSS3 “PowerPoint” Like Presentation (complete) by Tuts+ (@tutsplus) on CodePen.

Why it's our favorite

This Pen does so many things right that it would be hard not to consider it our favorite. Let me first start by saying that most people at some point in time or another have given a presentation. In doing so, it would not be surprising if Microsoft Office PowerPoint was the program of choice. That's because it's a great tool especially for its ease of use. But like most of you that have used PowerPoint know, it's easy to run into problems during your presentation. Being able to use your website to give your presentation seems like a way better solution than using a program that has been known to have problems from time to time.

You can take this quote as you will, I just found it interesting and about PowerPoint, therefor fitting.

We have met the Devil of Information Overload and his impish underlings, the computer virus, the busy signal, the dead link, and the PowerPoint presentation.

- James Gleick

Anyway, I should probably go on to explain why I like this Pen.

1. This Pen utilizes CSS3 animations in order to provide similar slide transition effects that you would see in PowerPoint.

2. This Pen uses only HTML and CSS3. Not to mention, it uses relatively few lines of code considering it's performance and the fact that it doesn't use Javascript.

3. The way the code is organized makes it easy to add slides and include your own information.


I found this Pen to be extremely useful and I even plan to use the idea for future presentations. While there are some things that I think could be tweaked, for what it's worth, I think this Pen is awesome. The pen achieves so much while using so little code. All in all, I chose this Pen as my Favorite Pen of the Week because it's such a useful Pen and because it's so simplistic.

Think I'm wrong or think a different Pen deserves the top spot? Drop a comment below and let me know how you really feel...

Make sure to show Kezz Bracey over at Tuts+ some love!

About the Author:

@SANTINI_IO | NickSantini.com

Nick Santini is a web developer and college student from Louisville, KY. Aside from his work as a web developer, he is also the man behind SANTINI.IO, a blog dedicated to technology, web design/development, self improvement, and more.

Leave a comment