Sunday, July 20, 2008

Excerpt Content with CSS and JavaScript

Sometimes when you have much creative ideas to write on your blog post, you will have long words to tell the readers. So, whenever your visitors landed to the front page of your blog, they need to scroll down a bit more. The consequence is that probably you can only have limited recent posts at the front page.

Excerpt the blog content would be a great idea since, you can expose more recent posts at the front page of your blog. I surfed down a cool tutorial from Rob Glazebrook of CSSnewbie.com that will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button.

Excerpt Content with CSS and JavaScript

Displaying the additional content doesn’t require a refresh or navigation to a new page and all your content is still visible to search engine bots that don’t pay any attention to CSS or JavaScript.

visit the tutorial »
view the demo »

Saturday, July 19, 2008

Stylish Text Effect with CSS Gradient

Today's CSS tutorial review is very famous actually! WebDesignerWall.com brought you a quick tutorial to implement CSS Gradient into text. This CSS trick can be extended into many kinds of gradient text effects. For you who missed the chance to read this following tutorial, this CSS is worth to try!

Stylish Text Effect with CSS Gradient

WebDesignerWall.com put up some answers of why this CSS gradient would be useful for you. Firstly it is because you will need no Javascript or Flash to render these cool effects. Second, in order to save the bandwidth, you will no longer need image file from photoshoped gradient text. Finally, you can pick any web fonts in a consistent scale.

This CSS gradient effect works on most browsers. As IE is an evil for CSS, PNG hack is required in IE6.

visit the tutorial »
view the demo »

Friday, July 18, 2008

Aligning Images Using CSS

Adding text next to your image, is a bit tricky. Sometimes the text won't flow nicely around the image. So you will need to have correct classes to float the image in CSS.

Thord Daniel Hedengren of Devlounge.net wrote a simple tutorial that will show you how to align images using CSS in the right way.

Aligning Images Using CSS

In this tutorial you will also learn how to add the frame class in order to have a nice looking border around your images!

Visit the tutorial »

Wednesday, July 16, 2008

CSS Popup

Today's CSS review is about CSS popups effect. This CSS will make images to appear and disappear on links mouse over. A neat way to drive reader's attention with icons, text or some decorative elements on rollover state.

CSS Popup

The "icon" is an img element inside the actual hyperlinks. To prevent the image from showing up when the page loads, MeyerWeb.com have the following style:
div#links a img {height: 0; width: 0; border-width: 0;}


So how to get the icons to appear? Better read the rest of this tutorial to see the demo page now ;)

Visit the tutorial »

Biweekly Blogroll Links - July 16th 2008

DESIGN FREEBIES
Free Vector – Gears by The Chemist
Free Vector Art - Spring Flowers by Gino
Concept Icons .08 by Roberto Abril Hidalgo

Read More

Tuesday, July 15, 2008

Animated Menu using CSS and Mootools

Another CSS tricks from Antonio Lupetti of Woork.blogspot.com. This tutorial will show you how to create animated menu using Mootools. The tutorial is also available in a download file. Inside the download file, you can see the offline demo to check how these CSS and HTML structures of this animated menu works nicely and of course also with the mootools javascript file included.

Animated Menu using CSS and Mootools

Whenever you finish with the HTML codes, all you need is to add a link to mootools framework in the tag of your page using this line of code:

<script type="text/javascript" src="mootools.svn.js"></script>


then add sort of javascript codes in the <head> tag of the page from this tutorial. Customizing the CSS will determine your animated menu design in the final step!

Visit the tutorial »

Monday, July 14, 2008

How to Create CSS Box

;;)I've been so busy lately and being left behind just to write a tutorial or to design another freebies. So, maybe it will be nice if I start to write series of short review about CSS from other websites this week. Hopefully I would be able to bring them to you daily! Subscribe to Graphic Identity Blog to follow the fresh news of CSS tips and tricks today!

CSSgirl.com has written a nice tutorial of how to create rounded corner boxes using CSS and images. There are two kinds of boxes, there are:
  • A flat rounded corner CSS box without effects
  • A box with a drop shadow, border and gradient.

CSS Box

B-) You will need Photoshop or another graphic design software to create those nice CSS boxes. These boxes are so cool because they are also expandable in some heights. Experiment with your own box color and round corner radius! It will be great for a start.

visit the tutorial »
visit the demo »

Sunday, July 6, 2008

Blogspot Design Showcase - 5 Artistic Graphic Designer's Blogs

Today's gallery is to showcase 5 Artistic Graphic Designer's Blogs. Unique layout composition is what make them stand out. Each of them is presenting creative graphic design masterpiece work of talented hands.

Relax and Enjoy!

The Blog of Doug Cloud
The Blog of Doug Cloud

Designed by Doug Cloud. He is a freelance graphic artist. You will see cartoon illustration style everywhere on his blog. Interesting stuff because he also starts series of Drawing Lesson using Photoshop and Illustrator. Another thing that I love from this blog is the Comic Strip category. You may need subscribe to Doug Cloud's Blog so you won't miss the next drawing lesson and comic strip post!

Read More


Related Post:

Thursday, July 3, 2008

Grunge RSS Banners

:-B It's been more than a month since the last Free Design Box post category. Now I want to give you something different.

Today's post is about Grunge RSS Banners. I have 6 different colors of RSS Banners. But the interesting part is, I designed them based on three resources of super famous freebies.

Grunge RSS Banner

Read More
I googled down on Grunge Graphic Design keyword and just so happy that I found them! I love these three grunge design style freebies that I use for today's design. They are:


I am really thankful to Franka, Sarah and Bittbox for such wonderful freebies ever. I was just doing a retouch to create grungy water color look for each banner. Sarah's grunge textures works beautifully on water color brush background by Bittbox. It was fun composing them together in a blend of layers. I was just replacing color for some banners in photoshop, so they result in 6 different colors.

These banners are in .PNG format, just extract the .ZIP file and they are set. I let each of them in 600x135 pixel blank banner template, to make easier for you to customize it with your own typeface choice. Just resize it to fit on your blog layout!

I will appreciate credits whenever you use this banner. Please comment and spread out this post if you like! :cool:


<a href="http://graphic-identity.blogspot.com/2008/07/grunge-rss-banners.html" target="_blank">Grunge RSS Banners</a>


These are absolutely free for you and you can subscribe to Graphic Identity Blog in feed reader or by email for next updates!
Please read: Legal Usage to employ Graphic Identity's 'Free Design Box' files before download.

Grunge RSS Banner


Graphic Identity - Grunge RSS Banners.zip (1.11 MB)
Grunge RSS Banners

Share the permanent post link by copying this code to your blog, thank you!

<a href="http://graphic-identity.blogspot.com/2008/07/grunge-rss-banners.html" target="_blank">Grunge RSS Banners</a>

Featured Post

Monster Illustration Vectors that Work

Not all monsters are scary and we can apply them in a design composition or illustration. You may want to search bunch of new created monst...