{"id":3031,"date":"2017-01-10T21:05:31","date_gmt":"2017-01-11T03:05:31","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2058"},"modified":"2017-01-10T21:05:31","modified_gmt":"2017-01-11T03:05:31","slug":"5-cool-css-tutorials-for-your-next-project","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/5-cool-css-tutorials-for-your-next-project\/","title":{"rendered":"5 Cool CSS Tutorials for Your Next Project"},"content":{"rendered":"

Looking for some inspiration of something cool or unique to add to your next project? Check out any of these tutorials below:<\/span><\/p>\n

1. Blur Menu with CSS Transitions<\/a><\/span><\/p>\n

\"Screen<\/p>\n

This tutorial comes complete with several different options for creating a navigation menu with cool blurred text effects and smooth CSS transitions.<\/span><\/p>\n

2. Animated Content Tabs<\/a><\/p>\n

\"Screen<\/p>\n

Learn to create clean-looking content tabs with smooth CSS transitions, perfect for when you want to store a lot of information on just one page.<\/span><\/p>\n

3. Sliding Image Panels with CSS3<\/a><\/p>\n

\"Screen<\/p>\n

This slider tutorial is pure CSS (it\u2019s made possible with the use of radio inputs), so it\u2019s a great option if you\u2019re looking for an image slider that won\u2019t slow your page down with heavy JavaScript or jQuery code. <\/span><\/p>\n

4. Stylish CSS Progress Bars<\/a><\/p>\n

\"Screen<\/p>\n

Create some colorful progress bars with this tutorial from Red Team Design. Lots of cool CSS techniques are used to create these bars, including color gradients, keyframe animation, and box shadows.<\/span><\/p>\n

5. Interactive Three-Line Menu Icon<\/a><\/p>\n

\"Screen<\/p>\n

<\/i>This hamburger menu tutorial will show you how to create a menu icon that turns into a \u201cx\u201d when it\u2019s clicked \u2014 the perfect animation inspiration for that responsive menu you\u2019re working on. <\/span><\/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":"

Looking for some inspiration of something cool or unique to add to your next project? Check out any of these tutorials below:<\/p>\n

1. Blur Menu with CSS Transitions<\/p>\n

\n

This tutorial comes complete with several different options for creating […]<\/p>\n

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