8 CSS Snippets for Animal Lovers

One of the most fun (and least practical, if you care about not wasting time) ways to use CSS is to create shapes and colors out of regular HTML elements to make them look like real things — like food, objects, or animals. Today we’re going to take a look at some of the best CSS snippets that can be used to turn boring old divs into creations that resemble real live animals. Some of them are even animated! If you love cats and CSS, then keep reading, this one is for you.

  1. Pure CSS Black Cat

Screen Shot 2017-03-07 at 4.24.41 PM

Let’s start with a black cat because it’s a classic. This black cat is created purely with CSS, and it even includes CSS animations so that its eyes and ears both move in sync with each other (the ears move up and down, the eyes move from left to right).

2. CSS Dog

Screen Shot 2017-03-07 at 4.28.04 PM

If you’re not a cat person, maybe this dog will appeal to you. This pure CSS dog silhouette is a sophisticated representation of man’s best friend. It even comes complete with a bone and a collar.

3. Teddy Bear

Screen Shot 2017-03-07 at 4.32.54 PM

This snippet doesn’t create a realistic looking bear, the bear resembles more of a teddy bear, but it’s still really cute and has a nice little animation (the little arm waves at you). Besides, realistic-looking bears are kind of scary anyway. The snippet is pure CSS — no JavaScript or jQuery required.

4. Dog and Ball

Screen Shot 2017-03-07 at 4.38.04 PM

This awesome animated CSS snippet features a very enthusiastic dog and his very enthusiastically wagging tail. In front of the dog is a brightly colored ball, which bounces when you click on it. This snippet is really well done. Not only is the quality of the animation great, but the overall CSS is aesthetically pleasing and realistic looking.

5. Loading Cat

Screen Shot 2017-03-07 at 4.45.13 PM

This cat snippet is probably slightly more useful than the other snippets on this list. The animated cat in this snippet also doubles as a loading effect. The cat moves around in a counter-clockwise circle that could easily be used in place of other circular loading animations that might be used in a project.

6. Rabbit

Screen Shot 2017-03-07 at 4.47.37 PM

This adorable bunny is created purely using CSS and even includes a really cool animated hover effect (when you hover over the bunny, balloons start to rise in the background).

7. SVG Bird

Screen Shot 2017-03-07 at 4.49.50 PM

SVG animations are super useful and versatile in creating any sort of shape and being able to animate it. In this case, the shape that’s been created is a bird, and the animation it’s achieving is a slight flapping of the wings (it’s eyes also move from left to right).

8. CSS Fat Cat

Screen Shot 2017-03-07 at 4.54.02 PM

One more cat for good measure. This pure CSS cat is, as you might be able to tell from the title, a little fat. He’s also wearing a suit because, why not? The cat does have a little animation — the tail is wagging, but based on the serious angry eyebrows this cat is sporting, it’s probably not in a happy way.

Top 5 WordPress Plugins for SEO

One of the greatest benefits of using WordPress as a CMS is that there are so many free plugins available for WordPress that will totally beef up and streamline the SEO of any site. When looking for plugins to boost your SEO, it can be a bit overwhelming because of the sheet amount of free plugins available. If you need help narrowing down the options in terms of which SEO plugins to add to your site, take a look at this list we’ve curated of 5 of the absolute best WordPress plugins for SEO.

  1. Yoast SEO

Screen Shot 2017-03-07 at 3.48.29 PM

Yoast is one of the most popular (if not THE most popular) WordPress plugin for improving your SEO. It’s popular for a reason…this plugin is packed with features and is completely free. Yoast does so much more than allow you to input keywords and meta details. It gives you a rundown of the SEO quality of each page and post that you publish, it allows you to set social media sharing settings (how you want it to look on Facebook or Twitter when your content is shared, etc), and generates XML sitemaps and so, so much more.

2. All in One SEO Pack

Screen Shot 2017-03-07 at 3.52.49 PM

If for whatever reason you don’t want all of the extra features that come with Yoast and are just looking for a plugin that allows you to optimize your pages and posts with keywords and meta descriptions, then All in One SEO Pack is a great option. If it weren’t for Yoast, it would probably be the most popular SEO plugin available for WordPress. It’s easy to use even if you don’t have any knowledge or expertise in coding.

3. Google XML Sitemaps

Screen Shot 2017-03-07 at 3.57.58 PM

Again, if you don’t have Yoast and need to generate a sitemap, this plugin is a great way to do it. Sitemaps optimize your SEO because it makes it easier for search engines like Google to index your site because they can plainly see and access the way that content is structured on your site. A sitemap is pretty much mandatory if you want to have great SEO, and Google XML Sitemaps will generate one for you without you having to do anything other than install and activate the plugin.

4. Keyword Planner

Screen Shot 2017-03-07 at 4.04.53 PM

This one’s not technically a plugin, but it’s an undeniably valuable resource when it comes to SEO. This is a great tool to use to find which keywords have the highest search volume, which keywords advertiser’s are interested in, and which keywords you can use to outrank other sites, so you can try to tailor your content to fit within these parameters.

5. Broken Link Checker

Screen Shot 2017-03-07 at 4.07.46 PM

If you’re a web developer or work in SEO, then you probably know that broken links are not great for your search engine rankings. This plugin, the Broken Link Checker, checks all your content — posts, pages, even comments — for broken links an alerts you to them so that you can either delete the broken link or change it from a broken link to a live link. It also gives you the option to have broken links show up differently (usually with a line through the link, crossing out the text) within your content, signaling to your user that the link is bad in the hopes that they won’t try to use it.

8 Stylish and Free Responsive Email Templates

It’s 2017…why is sending responsive, browser friendly emails still such a hassle? If you’re frustrated with your email templates and are sick of coding them over and over to fix things that don’t work or try to make them fully responsive across dozens of different devices, maybe it’s time to try your hand at a free responsive email template. What follows is a list of some of the best of what’s out there in this department.

  1. Cerberus

Screen Shot 2017-02-21 at 3.45.34 PM

This one is a free download that comes with simple, responsive patterns for you to use when writing your HTMl emails. The emails are responsive and compatible with all browsers and email clients — even Outlook!

2. Foundation for Emails

Screen Shot 2017-02-21 at 3.47.19 PM

Brought to us by the people over at Zurb, Foundation for Emails lets you create free, responsive email templates that are universally compatible. Not only are the responsive, but the templates can also be edited quickly using Sass. If you’ve worked with Foundation for Sites, this is a great option for you, as you should be familiar with the coding style of Foundation.

3. Antwort

Screen Shot 2017-02-21 at 3.50.37 PM

Don’t be put off by the simple style of Antwort’s site — these templates are great. They’re easy to use and customize and also lightweight, plus, they’re totally free.

4. Campaign Monitor

Screen Shot 2017-02-21 at 3.52.25 PM

Campaign Monitor is an email marketing company that provides, along with many other services, access to free, colorful, creative, and industry-specific email templates. The templates are free, responsive, and will save you a lot of design work.

5. Basic Responsive Email Template

Screen Shot 2017-02-21 at 3.56.57 PM

If you’re looking for something a little less stylish than what Campaign Monitor has to offer, this template might be right for you. It’s basic and rather generic, but not completely void of any style or personality. Because it’s so simple, it’s perfect for customizing to match the aesthetic of your site’s style or brand.

6. Responsive HTML Email Template

Screen Shot 2017-02-21 at 4.01.00 PM

Before the days of iPhones and tablets, back when responsive design wasn’t even necessary, people used to use tables to design and structure pretty much everything, from big web pages to little emails. Since tables are sort of a pain to make responsive, this is no longer the norm. However, if you’re old-school and find yourself more comfortable working with tables, this template is a great option. It’s built with tables but by some miracle is still responsive! Definitely worth checking out.

7. Future-Proof Email Template

Screen Shot 2017-02-21 at 4.03.36 PM

This email template aims to be fully responsive even without media queries so that it works on even super old versions of browsers and email clients. It claims to be “future proof” because it achieves its look using only the most basic, simple code.

8. MJML

Screen Shot 2017-02-21 at 4.05.49 PM

MJML is a free responsive email framework that’s lightweight and easy to use. It contains components that make the code easy to edit and adjust, and it should only take seconds to add a new content section to your email template.

The Best WordPress Plugin for Valentine’s Day

Celebrate Valentine’s Day on your WordPress site with the Valentine’s Day Hearts Plugin. This plugin is a cute and easy way to add some seasonal flair to your pages. Once its installed, you can easily add floating hearts to any of the pages on the front-end of your site (it doesn’t apply to the dashboard and WordPress user interface).

screen-shot-2017-01-01-at-4-56-22-pm

This plugin is perfect for anyone who wants to make their pages a little more festive, or for retailers who might want to remind their users that the romantic holiday coming up is a good excuse to by sweets and treats for their loved ones.

The install and activation of this plugin are very simple and quick. Once its installed it can be configured to your desired settings, but coding knowledge is necessary for this step, as you’ll have to edit the plugin’s PHP file to make any changes or personal customizations to the plugin and its functionality. Things you can customize if you desire are the pages which the hearts appear upon, the amount of floating hearts that appear, the size of the floating hearts, and more. Be creative!

8 Cool Effects You Can Create with HTML5 Canvas

If you know how to use it, HTML5 canvas gives you the ability to create many different animation, text, and design effects that you can use in any of your projects. Canvas makes it possible to seamlessly add awesome and versatile effects to your pages without making your page really heavy, or requiring additional software to run (like Flash, for example). Check out some of our favorite ways to use canvas in the list below!

1. Click to Draw

screen-shot-2016-11-30-at-3-38-17-pm

Did you know you can let users draw on your canvas? Check out my sloppily-drawn smiley face above, and click through to the tutorial to try it out for yourself (hopefully you’re better at drawing than I am).

2. Canvas Stars

screen-shot-2016-11-30-at-3-40-12-pm

Create this space effect with twinkly stars using HTML canvas for all of your galactic themed projects!

3. Canvas Charts

screen-shot-2016-11-30-at-3-43-35-pm

Did you know you can use canvas to create colorful, cool charts? Check out how to do it for yourself in this tutorial.

4. Falling Confetti

screen-shot-2016-11-30-at-3-45-15-pmIf your project is a celebratory one, why not consider adding some falling confetti effects created with HTML5 canvas.

5. Canvas Parallax Mountains

screen-shot-2016-11-30-at-3-47-13-pm

This canvas effect is really unique. Not only does canvas create the mountain shapes, but it also performs a parallax scroll effect that makes it appear as though the mountains are in motion.

6. Canvas Lightning Storm Effect

screen-shot-2016-11-30-at-3-50-26-pm

Another effect where canvas imitates nature. The rain effect is complemented by a cool lightning bolt that lights up the sky to reveal background clouds.

7. Canvas Loader

screen-shot-2016-11-30-at-3-51-58-pm

This bright loading effect is created entirely with HTML5 Canvas. The loading effect is the animation used to write the word “loading”, that occurs as quickly or as slowly as it takes to load the page.

8. Aurora Borealis Canvas Animation

screen-shot-2016-11-30-at-3-54-05-pm

This cool canvas effect mimics the colorful dancing lights of the Aurora Borealis. The lights in the canvas are actually animated so it appears as if they’re moving.