I thought I would save the best for last. Eastside is a beautiful script font that I recently picked up and can’t seem to put down. Grab it from Lost Type Co-op.

Which is Your Favorite?

If I had to pick three favorites it would be Eastside, Variane and Honey Script. Did any of these stand out for you? Let me know in the comments section and feel free to call attention to any beautiful free script fonts that didn’t make the list. If you’re looking for a few paid script fonts that are worth the money, I recently added these three to my collection – Local Brewery, Nexa Rust and Sant’Elia Script.

]]>http://bluefaqs.com/2016/03/free-script-fonts/feed/11How To Animate A Map Location Marker With CSShttp://bluefaqs.com/2016/02/how-to-animate-a-map-location-marker-with-css/
http://bluefaqs.com/2016/02/how-to-animate-a-map-location-marker-with-css/#commentsThu, 25 Feb 2016 18:16:47 +0000http://bluefaqs.com/?p=15860In this quick tutorial, we will build an animated map location marker or pin using pure CSS. We could apply this technique to spruce up our contact page or maybe our about page. This will add a nice subtle touch to help pull the visitors eye towards our business location. Let’s dig in.

Grab a Map

You’ll need to design or screenshot a map to use as the background for our marker. Any height will do, but make sure it is at least as wide as the container div you’re placing it in. We’ll be applying this image by using the CSS background property.

Add the HTML

The HTML in this project couldn’t be any more simple. Just place four empty divs with appropriate class names within your container div.

The map-bg div does exactly what it is named, it's a place to display our map as a background image. The marker div will contain both our location pin and our animation, allowing us to position it on the map wherever we choose. The pin div is our location and is centered within our marker. Lastly, our pin-effect div is also centered within our marker, sits underneath our pin (using z-index) and houses our animation.

Add the CSS

I'll split the CSS code into two sections separating your normal everyday typical CSS from the animation. Just remember that all of the CSS is located in the same file.

Typical CSS

Nothing too special here. First, we designate our map background. Second, we place the marker where we want by adjusting the top and left positions. Third, we create our pin, give it a color and border while giving it a z-index of 1000, to make sure it sits above our .pin-effect. Lastly, we give our animation a color, name the animation (pulsate) while telling it to play the animation over a period of 2400 milliseconds. We also let the browser know that we want to do this an infinite number of times.

Animate the CSS

We use keyframes with a name of pulsate to scale (transform) the animation effect from 0.1 to 1.2 across the entire animation while changing the opacity from 0 at the beginning to 1 at halfway through and then fading it back out to 0 at the end the animation.

Tips

I'm going to assume that you will be placing this inside of a responsive design. With that in mind, we position the map background image to the left. Also, the last thing we want is for our marker to be positioned off screen while being viewed on a mobile device. If it appears that your marker position will be off screen, we can simply implement a media query to reposition the map background image and marker accordingly.

For example, let's reposition the background and marker to the left 100px for a smaller screen like so...

You can resize the browser you're in right now to a width of 414 pixels or less and see the reposition happen in the example above.

Final Thoughts

This is just a simple tutorial showing how to use this technique. Get creative by adding more style, adapting the colors to fit with your site or maybe adding a tooltip to the marker that displays the address while hovering. The options are endless. If you like the tutorial, have a question about the code or have implemented it somewhere in your designs and want to share it, please leave a comment below.

]]>http://bluefaqs.com/2016/02/how-to-animate-a-map-location-marker-with-css/feed/8Websites With Free Stock Photos You’ll Actually Usehttp://bluefaqs.com/2016/02/best-websites-offering-free-stock-photos/
http://bluefaqs.com/2016/02/best-websites-offering-free-stock-photos/#commentsWed, 10 Feb 2016 15:32:09 +0000http://bluefaqs.com/?p=15639Free stock photos that are actually worth using can sometimes be difficult to find. Sifting through stock image websites is often a daunting task and most of them only offer images that are obviously staged and that you shouldn’t be using in the first place. Thankfully, there are many professional photographers that give away free high-resolution photos that are worthy of being placed within your designs.

As the title suggests, these are free to use anywhere. Classified as Christian photos on the site.

Where Do You Get Your Free Stock Photos?

I’d like to keep this list updated with new sites as I become aware of them or as they make their way to the Interwebs. If you know of a site that belongs on this list, please let me know in the comment section. If I think it makes the cut, I’ll be happy to add it.

On a side note: With the exception of just a few, just about all of these sites give away their photos free for personal and commercial use. Let’s face it, that’s pretty awesome! I’d still read over each sites license before using the images, just to be safe.

]]>http://bluefaqs.com/2016/02/best-websites-offering-free-stock-photos/feed/12Freebie: Labeled Cuts Of Meat – Pighttp://bluefaqs.com/2016/01/freebie-labeled-cuts-of-meat-pig/
http://bluefaqs.com/2016/01/freebie-labeled-cuts-of-meat-pig/#commentsWed, 27 Jan 2016 16:25:46 +0000http://bluefaqs.com/?p=15406I created a pig with the cuts of meat labeled in a a hand-drawn fashion. After hand-drawing it, I brought it into Illustrator and turned it into vector shapes. This would look great hanging in a butcher shop, restaurant or thrown up on the wall of your barn, if you have one. The download includes several file types: .ai, .eps, .psd, an .abr brush for Photoshop as well as a .csh shape for Photoshop. Pretty much any graphic editing program is covered here.

Feel free to use this anywhere you like. Just don’t download and sell it as is anywhere. Everything to do with the pig is vector, so you can easily resize the file without loosing any quality.

I know what you’re thinking, “Shawn, where is the matching cow?”. This took a lot of time and effort, but I’ll see if I can put one together and post it on here. Grab the RSS feed or subscribe to my Email Updates to stay informed.

If you like the download, jump into your favorite social platform and give it a share. Any questions or comments can be answered in the comment section below. Hope you enjoy it.

]]>http://bluefaqs.com/2016/01/freebie-labeled-cuts-of-meat-pig/feed/8100 Beer Bottle Caps For Inspirationhttp://bluefaqs.com/2013/02/100-beer-bottle-caps-for-inspiration/
http://bluefaqs.com/2013/02/100-beer-bottle-caps-for-inspiration/#commentsTue, 05 Feb 2013 12:43:00 +0000http://bluefaqs.com/?p=14659Two years and a month ago, I opened one of the best Christmas presents I could’ve ever imagined, a subscription to a particularly nice Beer of the Month Club. I’ve always been a fan of craft beers, but not just for obvious reasons. Some of the designs these breweries choose to brand their distinctive beers can be pretty creative. Throughout my malted, hoppy adventures I’ve managed to accumulate a decent amount of beer bottle caps and have decided to share a few of them here.

And for those who are curious which were the best beers on the list. For taste: Dogfish Head 120 Minute IPA, Shiner Wild Hare Pale Ale and Abita Turbodog. Going on design alone: Neumarkter Lammsbräu (the one with the lamb and 1628), New Belgium Brewing and Victoria (I’m a sucker for script logos).