Top 10 Code Snippets With CSS Animations

A great thing about CSS is that it allows you to animate your creations. CSS animations are typically smooth and add some sense of movement and dimension to your projects. Best of all, they’re fairly easy to understand and implement into any code (though some properties aren’t supported by all browsers, so be sure to use vendor prefixes with them).

Animations are super versatile and can be used to create so many unique effects, from something as simple as a spinner to something much more complicated, like a working, ticking clock face. Take a look at the list below to see our top 10 favorite code snippets that include CSS Animations

  1. CSS Responsive Animated Accordion

Screen Shot 2017-03-22 at 9.46.22 AM

This snippet not only creates an accordion functionality that has animations, but it’s also fully responsive. The accordion tabs smoothly slide down to reveal the content when the heading is clicked. This accordion feature would be a great addition to any website.

2. CSS Text Animation

Screen Shot 2017-03-22 at 9.48.20 AM

This tutorial demonstrates how to use CSS to animate text. The second word rotates in between four different words, so you can use the animation to essentially make your text say four things at once.

3. CSS Animated Hamburger Icon

Screen Shot 2017-03-22 at 9.55.19 AM

The hamburger icon in this snippet turns into an “x” when you click it, thanks to smooth CSS transitions and animations. When you click it again, it reverts back to the three-line hamburger style icon.

4. CSS Flame Animation

Screen Shot 2017-03-22 at 9.58.19 AM

This pure CSS flame animation dances and flickers slightly, just like a real flame would. A really cool effect to add to a project that has a spooky or eerie vibe.

5. Pure CSS Animated Clouds

Screen Shot 2017-03-22 at 10.00.21 AM

This pure CSS animation produces clouds of all different sizes that slowly float on by from one end of the viewport to the other.

7. CSS3 Working Clock

Screen Shot 2017-03-22 at 10.03.00 AM

Did you know you can use CSS animations to create a realistic looking working clock? No JavaScript or jQuery necessary. The clock is pure CSS, using only CSS to create all movements and shapes.

8. CSS Animation on Hover

Screen Shot 2017-03-22 at 10.05.05 AM

This simple snippet is a good demonstration of how you can use CSS animations to rotate an object, and also how you can activate CSS animations using :hover as a trigger event.

9. CSS Spinner Animation

Screen Shot 2017-03-22 at 10.07.48 AM

Use this tutorial to understand how to make a pure CSS spinner. Spinners are perfect to present to the users while sites or images are preparing to load.

10. CSS Animated Sunset Background

Screen Shot 2017-03-22 at 10.09.37 AM

This snippet uses animated gradients as the background of the page to create a moving sunset type effect. A great way to experiment with animated gradients and color.

CSS Snippets: How to Create a Print Button

One cool thing about CSS is that there are probably about one hundred different ways to use the styling language to make buttons, and this is probably because there are just so many different types of buttons to be created.

One of the most useful types of buttons you can make is the print button. When giving your user the option to print a page, you can use a boring old text link, OR you can spice things up by creating a beautiful, stylish, colorful button with hover effects. In this tutorial, you’ll learn how to make a cool looking print button that includes a Font Awesome icon for an extra pinch of style.

The HTML

Your HTML is going to be pretty straightforward. First, because we’re using a Font Awesome icon in this tutorial, you’re going to need to link to the Font Awesome library. You can do this either in your CSS using the @import rule, or you can insert the following tag into the <head> of your HTML — it doesn’t really matter which one you choose to do, as long as you don’t forget to do it. For this example, let’s just link to the library from our HTML file:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML code for your print button should look like this:

 <a href="" class="print"><i class="fa fa-print"></i>Print</a>

Without any styling added to it, this is what your code should look like so far:

Screen Shot 2017-03-01 at 5.05.36 PM

As you can see, the font icon we’re using (in the HTML it’s the <i> tag and we use the class to specify which Font Awesome we’re looking for) is one of a printer, so your user will definitely have no question what this clicking this button is going to do.

Now it’s time to add some style.

The CSS

We want to add some color, some dimension, and some sleekness to this print button. The following code does a fair job at achieving all of that:

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body{
    font-family: 'Source Sans Pro';
    background-color: #e4ecbd;
}

.container{
    width: 400px;
    margin: 0 auto;
}

a.print{
    text-decoration: none;
    display: inline-block;
    width: 75px;
    margin: 20px auto;
    background: #dc143c;
    background: linear-gradient(#e3647e, #DC143C);
    text-align: center;
    color: #fff;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid #e3647e;
}

i.fa.fa-print{
    margin-right: 5px;
}

Using only about 30 lines of CSS, we’ve managed to add a whole lot of style to our little text link. Instead of text, it now looks like a real button:

Screen Shot 2017-03-01 at 5.00.33 PM

We use a linear gradient combining two similar colors as the background of the button to give it that 3-Dimensional look so the design isn’t so flat. We also add some subtle border radius values to the button to add some softness to the harsh rectangular shape of the anchor tag. The bright color and the white font also help to really make the button pop and stand out on the light green background.

The only finishing touch we still need is a hover effect.

The Hover Effect

To add a hover effect to your button, add this line of code to the end of the CSS snippet above:

a.print:hover{
    background: linear-gradient(#DC143C, #e3647e)
}

This simple hover trick has a great effect. By swapping the linear gradient values of the background, the print button appears to be almost indented when its hovered upon in comparison to how it looks when the cursor is not over the tag. See the image below to check out the effect:

Screen Shot 2017-03-01 at 5.00.40 PM

This snippet is simple and super easy to implement, but it will really add a smooth, professional feel to any project its added to. A great and quick way to really freshen up your print links or buttons.

How to Create a Striped Text Effect

With CSS3, it’s easier than ever to create cool text effects to add to your projects. CSS allows you to manipulate your text in complex ways so that your text can resemble something that might have been made in a sophisticated software program, like Photoshop or Illustrator.

One fun text effect that can be created somewhat easily is a striped text effect, which gives your text horizontal stripes so that you can make it super colorful. With this effect, you can give one word up to five different colors. If you want to see how to achieve this look for yourself, check out the tutorial below.

The HTML

The HTML in this tutorial is pretty important. You need to make sure you give your h1 tag and your span tag an attribute with a value that we can refer back to later in our CSS. For this example, the attribute we used was called stripes, and the value was “Striped Text.” The attribute can be called anything you like (just make sure that you give the h1 and the span tags the same attributes), but for this code snippet to work, the attribute value must match the text in between the span tags. See the code below for a better understanding of how it should look:

<h1 stripes="Striped Text"><span stripes="Striped Text">Striped Text</span></h1>

As you can see, the attribute for both the h1 tag and the span tag is called stripes, and the value assigned to it is “Striped Text,” which matches the text found within the span tags.

The CSS

The CSS is the fun part. Now is when we get to add some much needed style to our plain old text. We’re going to take advantage of the :before and :after pseudo-selectors of both span and h1 to add the stripe effect to our text, and we’ll use the content and z-index properties to make different layers of the text (that helps creates the stripe illusion) and to be sure that they overlap in the right ways.

html, body {
  background: #536283;
  width: 100%;
  height: 100%;
}

h1 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 100px;
  text-align: center;
  line-height: 1;
  margin: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  color: #ff6666;
}
h1:before, h1:after,
h1 span:before,
h1 span:after {
  content: attr(stripes);
  position: absolute;
  overflow: hidden;
  left: 0;
}
h1:before {
  color: #def1f9;
  height: 34%;
  z-index: 5;
}
h1:after {
  color: #f4dce6;
  height: 50%;
  z-index: 4;
}
h1 span:before {
  color: #cdf2c6;
  height: 66%;
  z-index: 3;
}
h1 span:after {
  color: #94e1e3;
  height: 80%;
  z-index: 2;
}

As you can probably tell, the code for achieving this effect isn’t too complicated. By giving h1 and span a :before and :after whose content is the text, we’re creating 5 different layers of the words “Striped Text” that happen to fall right on top of each other. By changing the heights of each of these selectors and pseudo selectors and playing around with the z-index, we make it look as though the text is striped, when actually the effect is created by many layers of the same words stacked on top of each other, each with a different height.

The finished product should look like this:

Screen Shot 2017-03-21 at 9.23.49 AM

Pretty cool, right? As always, the colors can be completely changed and customized. Same goes for the font-size, font-family, and actual words you choose to apply this text effect to.

10 Websites to Visit for Free Font Downloads

Most web designers will tell you that they can never have enough free fonts. Having a surplus of fonts loaded onto your machine can really come in handy, whether you’re saving them up for a future project or if you just like to play around with them to see how many cool logos or typography effects you can come up with in your down time. If you need some inspiration on where to look to get some free, beautiful font faces, take a look at this list of 10 websites that host free fonts available for download and use in both personal and commercial contexts.

1. DaFont

Screen Shot 2017-03-01 at 3.53.11 PM

DaFont is a really popular website for downloading fonts. With dozens of categories to choose from, you could literally spend hours browsing the different styles and themes for the perfect font that’s right for your project. With so many fonts available, you’re almost guaranteed to find the right one among their collection.

2. FontSpace

Screen Shot 2017-03-01 at 3.54.48 PM

FontSpace is another great site for downloading fonts. A cool feature this site has is the “random” button, which will pull up a random assortment of 10 fonts for you — a perfect feature for if you’re seeking inspiration. Click the random button as many times as you like to keep generating lists of ten random fonts to help get the creative juices flowing.

3. 1001 Fonts

Screen Shot 2017-03-01 at 3.57.21 PM

1001 fonts is a collection of over 1000 free fonts to choose from. For a fee, you can download their Ultimate Font pack, which contains over 10,000 fonts. You can never have too many, right?

4. Font Squirrel

Screen Shot 2017-03-01 at 4.00.13 PM

What makes Font Squirrel unique is that 100% of the fonts available for download on the site are free and cleared for commercial use. Most sites that host font downloads have fonts that are for personal use only, as well as fonts that are free for commercial use, so you have to pay close attention to the fine print. When you use Font Squirrel, you can rest easy knowing that any font you find on the site is totally okay to use in commercial projects.

5. Font Fabric

Screen Shot 2017-03-01 at 4.03.04 PM

Font Fabric is a site that offers an array of high quality and often exclusive fonts, most of which are available for free download. All free fonts on the site, with the exception of “Baron” and “Muller Narrow”, are available for both personal and commercial use.

6. Freebies Bug

Screen Shot 2017-03-01 at 4.06.25 PM

Freebies Bug is a great resource site for developers and designers looking for freebies. They offer a beautiful collection of free fonts, but they’ve also got a decent selection of other free resources, including graphics, templates, and stock photos.

7. Free Typography

Screen Shot 2017-03-01 at 4.08.15 PM

Free Typography hosts a small but beautiful collection of exclusive fonts that any designer would be proud to have featured in their mockups, projects, and designs.

8. Identifont

Screen Shot 2017-03-01 at 4.09.58 PM

Identifont is a fun font site that has a lot of unique ways for you to search for the font you’re looking for. You can search by name, by designer, and by style of font (the site asks you many detailed questions about the design of the font you’re looking for to help filter the results so the output isn’t overwhelming).

9. Urban Fonts

Screen Shot 2017-03-01 at 4.13.34 PM

Urban Fonts hosts an extensive collection of free and premium fonts available for download. A cool feature of the site that also exists on some other font sites is that you can input any desired text to preview the how a particular word, phrase, title, etc would appear using every font that you browse.

10. BeFonts

Screen Shot 2017-03-01 at 4.16.31 PM

BeFonts hosts a beautiful collection of designer-submitted fonts that would be perfect for so many of your upcoming projects. Using a smaller site like BeFonts to download your fonts from is a great way to ensure that not everyone on the internet will be using the same fonts as you.

10 Free and Fun Filler Text Generators

Even if you absolutely love your job as a web developer or designer, there are still times when we could benefit from adding a little more whimsy to our day. A great way to do this is with a free, fun, and harmless filler text generator. It’s a standard practice to use the old Latin Lorem Ipsum… text as a placeholder for actual test in a preliminary design or product, so why not spice it up a bit? What follows is a list of fun and free text generators that are sure to put a smile on the face of anyone who comes across them.

1. Bacon Ipsum

Bacon Ipsum is one of the more popular alternate text filler generators. Basically what it does is insert the names of meats, cuts of meat, and meat dishes into an otherwise standard Lorem Ipsum passage.

2. Samuel L. Ipsum

Instead of the standard Lorem Ipsum, this generator gives you text straight out of a Samuel L. Jackson movie. It’s definitely not suitable for work, but if you’re really determined to use it in a project, there’s a “lite” version of the plugin that generates text sans any profanities (there’s also a “classic” version that generates the quotes sprinkled in with some Lorem Ipsum, if you’re a traditionalist).

3. Cat Ipsum

If you’re not a cat person then you might not appreciate this one. Cat Ipsum generates text that reads like a stream of consciousness from a cat. It also gives you the option to start it off with a little Latin or to just dive straight into the mind of a feline.

4. Yorkshire Ipsum

This generator provides text meant to mimic the accent of a person from Yorkshire, England. The accent is famously hard to understand, so depending on where you’re from and you who are, Yorkshire Ipsum could be more difficult to decipher than classic Latin.

5. Hodor Ipsum

Screen Shot 2017-02-21 at 12.59.23 PM

Unless you’re a Game of Thrones fan, this text generator probably won’t interest you. The only word that the generator provides for you is, naturally, Hodor. But at least the passages are punctuated. Choose from the dropdown list how many Hodors you want — each Hodor corresponds to another paragraph of, yeah, Hodor.

6. Hipster Ipsum

Hipster Ipsum generates paragraphs of text that only include hipster words — quinoa, listicle, venmo, bicycle, sriracha, williamsburg, etc.

7. Pirate Ipsum

Pirate Ipsum will generate a block of text that is all in “pirate speak” — think a lot of “ayes,” “scaleywags,” and “mateys.”

8. Office Ipsum

Office Ipsum generates a collection of text having to do with work and office environments. Basically, it’s a huge list of business buzzwords that you’ve probably heard a thousand times before in hundreds of meetings or conference calls.

9. Cheese Ipsum

Because you can never have too much cheese in your life, this text generator gives you a list of so many different types of cheeses that your mouth will be watering just reading it. This isn’t just a list of snotty, high-brow cheese either — queso is listed right next to camembert.

10. Hairy Ipsum

This generator is for those who want to add a little manly ruggedness to their projects. The generator will provide you with a list of words that are the pinnacle of masculinity — mustache, boxing champion, etc.

10 Best Free Icon Sets for Your Design Projects

If you’re a web developer or designer, chances are there are few things you love more than a good set of freebies. Free graphics are hardly hard to come by, but quality free brackets aren’t quite as common as you might hope. Luckily for you, we’ve curated this versatile list of free icon sets that will add dimension, color, and flair to any of your websites and designs. Keep reading to see if any of these sets might be right for you or one of your projects.

1. Free Shopping Cart Icons

Screen Shot 2017-02-08 at 1.32.25 PM

This collection of shopping related icons is perfect if you’re working on a retail or ecommerce project. The set comes with Add to Cart buttons, shopping cart icons, shopping bag icons, and some small shopping basket graphics. Definitely a good set to have in your arsenal, even if you don’t currently have an ecommerce project going on.

2. Calendar Icons Set

Screen Shot 2017-02-08 at 1.36.55 PM

This icon set features 8 different calendar designs that come as PSDs with organized layers, making it easy to customize dates and colors to reflect the needs of your individual projects.

3. 100 Kitchen Icons

Screen Shot 2017-02-08 at 2.41.09 PM

Perfect for any projects having to do with restaurants or the culinary world. Some of the icons included in this set are ones that you certainly wouldn’t find in a generic or all-purpose collection, including corkscrews, rolling pins, juicers, whisks, and strainers.

4. New York Building Icons Set

Screen Shot 2017-02-08 at 2.50.41 PM

Inspired by the buildings of New York City, most of these simple icons could easily represent buildings or skyscrapers belonging to any urban city. A very professional looking set.

5. Fileicons

Screen Shot 2017-02-08 at 2.58.54 PM

This colorful set of icons that represent various files with different extensions is very useful for any web developer to have on hand. The files come in several different sizes for all of your possible icon needs.

6. One-line Startup Icons

Screen Shot 2017-02-08 at 3.00.12 PM

An icon set inspired by startup (and, dare we say, hipster?) culture. The cool thing about this set (besides the Darth Vader icon), is that they were all drawn using one loopy line, which adds a cool variation to the startup theme.

7. Zen Icons

Screen Shot 2017-02-08 at 3.02.00 PM

With only 12 icons included in this set, the collection isn’t quite as useful or versatile as others on this list. But what it lacks in practicality, it makes up for in beauty. The intricate details are what make these icons unique. Perfect to use in a portfolio site or something similar.

8. Flat Social Icons

Screen Shot 2017-02-08 at 3.06.10 PM

This basic set of flat social media icons is perfect for linking to any social media presence. Colors and shapes are totally customizable.

9. Flat Business Vector Icons

Screen Shot 2017-02-08 at 3.08.06 PM

This set of business-related icons can be used in many different types of projects for professional businesses. As a designer or developer, you can’t go wrong by having these in your personal icon collection.

10. Flat Line Icons

Screen Shot 2017-02-08 at 3.09.59 PM

If you’re looking for a generic, versatile icon set, this is a great option. It includes all the basic icons a developer might need — arrows, play buttons, envelopes, music notes, pencils, etc, all in a simple, modern aesthetic.

Creating a Window Text Effect with CSS

One of the best things about CSS is that it gives developers the tools to create things that normally would have to be created with photo editing or illustrator software. One of the coolest effects you can achieve using only CSS is the versatile and super simple window text effect. This is an effect you can add to your projects as a header, a logo, a hover state…the possibilities are endless. And the best part is, it’s relatively easy to achieve from scratch.

To start, you’re going to need to pick a cool image or color that you want to use as the background for your page/container. Then we’ll begin with the HTML.

The HTML

The only HTML for this effect that’s absolutely essential is a div tag and a text tag (the bigger the better, so we used an h1 tag) somewhere within that div:

<div class="container">
<h1 class="window">COOL TEXT</h1>
</div>

The CSS

This effect is achieved entirely using CSS code. First, we’re going to import a font (we’re using Droid Sans, but feel free to experiment with your own font-family), assign that font-family to the HTML, and set up the cool image that we chose as the background of our container div:

body{
font-family: ‘Droid Sans’, sans-serif;
}

.container{
background: url(../sky.jpg);
background-size: cover;
}

That’s the easy part. Now it’s time to style the h1 tag. To style our h1, we’ll want to position it on the page using the left, top, and transform properties, change the positioning to position: absolute to ensure that all of the text remains positioned on the page once we apply the window effect, and set a large font-size and line-height property so that the effect is visible. It’s also very important that the background of the h2 tag is a dark color (we used #222) and that the color of the text is white (#fff).

h1.window{
 position: absolute;
 top: 30%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 100px;
 line-height: 80px;
 text-align: center;
 padding: 30px;
 color: #fff;
 cursor: pointer;
 background: #222;
}

The result of the above CSS will leave you with a result looking like this:

Screen Shot 2016-11-14 at 4.19.16 PM

As you can see, the “window” effect hasn’t been applied to the text yet, because the text is white and opaque. To make the text transparent, you’ll only need one more line of CSS: the mix-blend-mode property. The mix-blend-mode property defines how an element’s content should blend with the background. When you apply it to light text on a dark background, the text will become see-through. Here is the final line you’ll need to add to the h1’s style:

h1.window{
  mix-blend-mode: multiply;
}

Your final result should now look like this:

Screen Shot 2016-11-14 at 4.18.44 PM

Customize the code in this tutorial by adding your own text, images, colors, etc. Get creative and be sure to include this effect in one of your next projects!