{"id":2316,"date":"2017-03-20T22:58:10","date_gmt":"2017-03-20T22:58:10","guid":{"rendered":"http:\/\/cssreset.com\/?p=2316"},"modified":"2017-03-20T22:58:10","modified_gmt":"2017-03-20T22:58:10","slug":"10-coolest-text-effect-snippets-on-codepen","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/10-coolest-text-effect-snippets-on-codepen\/","title":{"rendered":"10 Coolest Text Effect Snippets on CodePen"},"content":{"rendered":"

CodePen<\/a>\u00a0is a really popular snippet repository site where developers and designers can upload pieces of their project to help inspire the work of other developers and designers. It’s a great tool for expanding your understanding of what code can do, and it’s also a really good way to gain inspiration for any upcoming work you might have. One of the most popular types of snippet is one that applies styling to different types of text to create cool, funky, and creative text effects. Keep reading to see our curated list of the coolest text effect snippets we’ve found on CodePen.<\/p>\n

1. 3D Text Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This is not your typical 3D text effect. The shadow that’s used to give the text its 3D effect is actually animated, and changes position based on the movement of the cursor.<\/p>\n

2. Matrix Text Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

This animated text effect allows you to watch as the words are written to the viewport. It’s styled to resemble an effect from the matrix, but if you like the functionality of the snippet and not the style, feel free to customize the look to your liking.<\/p>\n

3. Mystique Text Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This 70s-inspired \u00a0text effect has a smooth animated gradient effect that changes the colors of the text over a period of time.<\/p>\n

4. Bubble Text Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Create a bubble text effect using this CSS snippet. The pink color elevates this bubble effect to a very cool bubblegum effect.<\/p>\n

5. Limelight Text Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Channel your inner Hollywood with this fun effect that makes the text look as though it’s lit up like an old fashioned show business sign.<\/p>\n

6. Striped Rainbow Text Effect<\/a><\/p>\n

\"Screen<\/a>Add some color to your projects with this cool striped rainbow text effect. The code uses SCSS to easily achieve the different color stripes.<\/p>\n

7. High Voltage Text Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

This animated text effect is electric — it literally looks like it’s been struck by lightning. The animation is done using SVG tags, so little CSS and no JavaScript\/jQuery are require to achieve the effect.<\/p>\n

8. Vintage Text Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Create some vintage-inspired text using this free CSS snippet. The font used is one that uses an aesthetic from the early 1900s, and the background behind the font is inspired by a similar era.<\/p>\n

9. SVG Stroke Text Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This colorful text effect uses SVG animations to create moving dotted lines that serve as the borders of the letters. The snippet is fully customizable and uses relatively little code.<\/p>\n

10. CSS Perspective Text<\/a><\/p>\n

\"Screen<\/a><\/p>\n

This pure CSS text effect plays around with different perspectives using the CSS transform property. It also comes with a smooth hover effect that alters the perspective of the text upon hover.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

CodePen\u00a0is a really popular snippet repository site where developers and designers can upload pieces of their project to help inspire the work of other developers and designers. It’s a great tool for expanding your understanding of what code can do, […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2320,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2316"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2316"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2316\/revisions"}],"predecessor-version":[{"id":2327,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2316\/revisions\/2327"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2320"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}