Blogfreakz - Web Design and Web Development resources » design

Creating A Cool Animated Pixel Font With CSS3

Keith@Blogfreakz — Fri, 04 May 2012 09:29:22 +0000

Here’s an awesome CSS3 animation effect by Peter Magenheimer. It’s an animated pixel font that is created with 100% pure CSS3, no Javascript or images!

The animation is activated by simply hovering your mouse cursor over a letter. By doing so, a number of pixel elements come in and gather on a specific area of the page and into their respective positions to form the particular letter. Since some pixel elements have a common position for two or more letters, the use of extra elements gets minimized.

Click on the image to try the demo.

Cool, ain’t it?

You can download the source code over at Peter’s GitHub page. Enjoy!

Incoming search terms for the article:

Real Shadow: A jQuery Plugin For Creating Realisitc Shadows

Keith@Blogfreakz — Thu, 03 May 2012 02:56:31 +0000

Here’s a pretty neat jQuery plugin created by Indamix that you can use on your website! It’s called Real Shadow, and what it does is it gives an element a shadow that changes its attributes depending on the location of the mouse cursor. The plugin works by manipulating the value of the CSS property box-shadow. The shadow’s size and position is determined by the element’s distance to the mouse cursor.

Check out the DEMO. As always, feel free to tell the author what you think about his plugin by forking it over at his GitHub page.

Incoming search terms for the article:

Multiple Backgrounds with CSS

Marvin@Blogfreakz — Fri, 27 Apr 2012 09:14:52 +0000

Web developer David Walsh has a great tutorial to share with us, which is making a multiple background with CSS. This feature is a very useful tool in preventing the need for nested elements. Click on the image to see his tutorial.

Here’s the DEMO, and the CSS code:

#multipleBGs {

background: url(photo1.png),

url(photo2.png),

url(photo3.png)

background-repeat: no-repeat,

no-repeat,

repeat-y;

background-position: 0 0,

30px 70px,

right top;

width: 400px;

height: 400px;

border: 1px solid #ccc;

Incoming search terms for the article:

Shining Text Effect with Groovy Font

Marvin@Blogfreakz — Mon, 23 Apr 2012 09:33:25 +0000

Retro nostalgia, baby! Here’s a cool tutorial that will add that disco-inspired style to your text effect with Groovy Font, thanks to the guys at PSDVault.

To view the demo and full tutorial, click on the image.

Incoming search terms for the article:

Create a Restaurant Chalkboard Graphic Design With Adobe Illustrator

Keith@Blogfreakz — Wed, 18 Apr 2012 07:29:38 +0000

This great Adobe Illustrator tutorial made by Andrei Marius teaches you how to create a somewhat quaint yet very cool restaurant chalkboard graphic. It would be a great design to incorporate onto your website especially if it’s food-related.

The tutorial starts off with creating the blackboard before moving on to the main highlight, which is adding that rough texture effect on the text. Click on the image to get the rest of the tutorial!

Incoming search terms for the article:

Create a Sexy Small Download Icon

Marvin@Blogfreakz — Fri, 13 Apr 2012 10:10:38 +0000

Web designer Dillen Verschoor shows a tutorial on how you can create a sexy small download icon for your website. Click on the image above to learn his elegant Photoshop techniques.

Incoming search terms for the article:

How to Make a Cartoon-Style Graffiti Text Effect from Scratch

Marvin@Blogfreakz — Wed, 04 Apr 2012 03:16:00 +0000

Ashlee Harrell has created a funky cartoon-style graffiti text effect that could be useful in your design. Learn how to do this technique from scratch using Photoshop’s layer styles, pen, selection, dodge and brush tools. Check out the full tutorial by clicking the image above.

Incoming search terms for the article:

Space-Themed Portfolio Landing Page

Marvin@Blogfreakz — Mon, 02 Apr 2012 10:46:13 +0000

The Space-Themed Portfolio Landing Page by Tom of PSDFAN. This is a nice and sleek template that will definitely appeal to tech lovers. In this tutorial, you’ll learn how to come up with a design like this from scratch – from background canvas to space elements to highlights to menu.

Click on the image for the step-by-step tutorial.

Incoming search terms for the article:

30 Inspiring Vintage Web Designs

Marvin@Blogfreakz — Thu, 29 Mar 2012 06:51:27 +0000

Let’s travel back into the past with these various collections of beautiful and inspiring vintage web designs. Click on each thumbnail in the gallery to view their respective sites.

Incoming search terms for the article:

How to Simulate Gravity with jQuery

Marvin@Blogfreakz — Tue, 27 Mar 2012 01:03:56 +0000

This nice jQuery effect by Gaya Kessler simulates gravity animation. The idea of this is when you hover above the string that holds both blocks, it will break and the block below will fall. Click on the image above to see how this works!

Also, you can get the DEMO and SOURCE FILE here. Enjoy!