{"id":3053,"date":"2017-04-17T15:38:22","date_gmt":"2017-04-17T20:38:22","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2216"},"modified":"2017-04-17T15:38:22","modified_gmt":"2017-04-17T20:38:22","slug":"6-fun-css-snippets-for-your-projects","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/6-fun-css-snippets-for-your-projects\/","title":{"rendered":"6 Fun CSS Snippets for Your Projects"},"content":{"rendered":"

One of the reasons that CSS is so fun to play around with is that you can use it to create so many different kinds of effects or styles. The styling language is incredibly versatile and can actually be really fun to use if you know your way around it and enjoy being creative. What follows is a list of some of the most fun ways we could find to play with CSS. The snippets in the list below will remind you of just how much fun you can have as a developer. Check it out!<\/p>\n

1. Emoji Hats<\/a><\/p>\n

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

 <\/p>\n

This CSS Snippet can be used to add a fancy top hat to any of your favorite emojis. Add a hat to a pig, a frog, a cow, or a monkey…no matter which animal you choose, it’s just about guaranteed to look both hilarious and adorable (or don’t choose an animal at all, but a regular face emoji, or really go rogue and choose something like a cheeseburger to add your top hat to).<\/p>\n

2. Fun Textbox<\/a><\/p>\n

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

 <\/p>\n

This snippet demonstrates how to have fun with a textbox. Typically textbox style is pretty straightforward and boring, but in this case, creative liberties have been taken to make the textbox look like a piece of paper from any notebook or journal. The old-fashioned typewriter font is also a nice touch that adds a sense of authenticity to this snippet. Another option for font might be one that looks like handwriting or handwritten script.<\/p>\n

3. Fun with Perspective<\/a><\/p>\n

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

 <\/p>\n

If you ever find yourself wanting to play around with perspective and shadows, this snippet does a great job of doing just that. Use it as inspiration for your own perspective play, or add a few customizations and use it in your own projects. Things that you might want to customize include font-family, font-size, and text and shadow colors.<\/p>\n

4. Moving Circles<\/a><\/p>\n

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

 <\/p>\n

If you know what you’re doing, then there are so many fun effects and experiments\u00a0that you can achieve\u00a0using HTML5 canvas. This fun snippet uses HTML canvas to create a background of colorful animated circles that constantly drift around and in and out of the canvas viewport. The color, speed, and size of the circles can all be customized.<\/p>\n

5. Franklin the Animated Fish<\/a><\/p>\n

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

 <\/p>\n

What’s more fun than an animated fish? The snippet creates a fish that swims around the viewport, swimming out of sight and then back into it. It also includes animated bubbles that have the appearance of floating around in the water, which is a nice realistic touch.<\/p>\n

6. Split Emojis<\/a><\/p>\n

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

 <\/p>\n

This might be the most fun snippet on the list. This snippet shows you how to split up an emoji so you can use components from two different emojis to create one cool hybrid — like the horse with the unicorn horn, a heart that’s half green and half purple, or a butterfly with two different color wings. It’s a pretty cool and unique effect that can be achieved relatively easily using this super fun snippet.<\/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":"

One of the reasons that CSS is so fun to play around with is that you can use it to create so many different kinds of effects or styles. The styling language is incredibly versatile and can actually be really […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2865,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[172],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3053"}],"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=3053"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3053\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2865"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}