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.

Optimize Images with Responsive Breakpoints Generator

Using one image for every possible viewpoint variation of a design (desktop, laptop, tablet, mobile, and all the non-standard browser window sizes in between) isn’t exactly ideal in terms of design and maintaining the image’s resolution. With the Responsive Breakpoints Generator, however, you can now use actual equations to tell your images when to break.


Instead of guessing or choosing arbitrary breakpoints for your images, you can use the Responsive Breakpoints Generator tool to come up with breakpoints that have been calculated based upon the original dimensions of your image at full size using the generator’s advanced algorithms.


The key to the algorithm being able to find suitable breakpoints is that it finds image width values and accompanying dimensions that offer reductions in file size. After the breakpoints have been created, the generator also provides you with an HTML img tag that lists all of the breakpoint values and the option of downloading a zip file with the original image sized down to all of the breakpoints.


This is a great tool to use, especially if you find yourself doing a lot of design or development for mobile. The tool is also open source, so you can use and/or modify it however you choose. Read more about how the algorithm works here.

5 Simple Ways to Speed Up Your Website

Looking for some new ways to optimize your code and increase the speediness of your site? Here are some simple ways to streamline your site that you may have overlooked.

1. Minimize HTTP Requests

HTTP requests are a big reason why a site’s load time can be so slow. The best way to reduce these requests is to really make sure your code is super efficient by only using one stylesheet, reducing the number of scripts you use, and don’t use unnecessary images (use CSS or HTML in place of images when at all possible).

2. Enable Caching

When a resource (stylesheets, scripts) is cached, that means it’s stored so that in can be easily and, most importantly, quickly accessed to save time when your site loads.

3. Minify Your Resources

Minifying your HTML, CSS, or JavaScript can really streamline your code and get rid of anything that might be there unnecessarily, which will definitely help with the speed of your pages. There are many tools available online that can be used to minify your HTML, CSS, and JS for free, so it’s definitely worth a shot to optimize your site’s speed.

4. Use Stylesheets Over Inline Styling

Not only is inline styling impractical and not dynamic, but it can also increase the size of your HTML files by a lot. Save yourself some load time and put all of your CSS in one stylesheet (but only use one to keep the HTTP requests down!)

5. Limit the Number of Plugins on Your Site

This one is our least favorite, but the fact is that plugins will add extra code to your site that can slow things down. Try to only use the most lightweight plugins possible, and delete any superfluous ones that you might not need.

Best Chrome Extensions for Developers

If you’re a web developer, chances are you prefer to develop and work on Google Chrome over any other browser. The reason for this is probably because not only is Google’s Developer Tools dashboard and console an invaluable tool to help with development, but also because of the many helpful and useful extensions that are available for Google Chrome that can help streamline the process of web development and design. Here’s a list of some of our favorites:

1. Marmoset

Screen Shot 2016-08-30 at 11.09.08 AM

This extension can be used to take beautiful, clean snapshots of your code that you can use for demos and tutorials.

2. CSS-Shack

Screen Shot 2016-08-30 at 11.13.41 AM

CSS-Shack is a web and desktop application that allows you to create layered styles (much like you would in photo editing software like photoshop) and then it’ll export the styles for you into a CSS file — great for designers who want to learn more about coding/CSS.

3. Font Previewer

Font Previewer is a really useful extension that allows you to change the font on the current tab to one of 1000+ Google Font options or to any fonts you have loaded locally on your machine. The extension is updated with new fonts often.

4. Window Resizer

Screen Shot 2016-08-30 at 11.21.17 AM

This one might be pretty obvious, but the Window Resizer extension will resize your browser window to help you optimize your designs for any device or viewport size. A similar function is built into Google Developer Tools, but with the extension you can actually resize the entire browser window to simulate the size of a different device.

5. ColorZilla

Screen Shot 2016-08-30 at 11.23.44 AM

ColorZilla is a really great tool that allows you to use a color dropper feature to identify any color on a live site — there’s no need to download any images or open PhotoShop, it can all be done on your browser window.


How To Install Nginx Webserver On Ubuntu 16.04

Nginx is a great web server. I am using it on other blogs I owned online. It’s probably the second most popular web servers in used today.. and growing rapidly.

Some will argue that Nginx is more resource-friendly than Apache2 and can be used as a reverse-proxy server.. so it’s pretty good.

This brief tutorial is going to show you how to easily install Nginx web server in Ubuntu 16.04.

Continue reading “How To Install Nginx Webserver On Ubuntu 16.04”