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.



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 »

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!



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 »

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.



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 »

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.



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

GRAPHIC DESIGN
COLOURBLAST by Daniel Green
Kristin Elder : demo by Fossfor
30 logos from 30 design blogs by David Airey
Top Ten Cartoons Of The 80s by kiphotoanddesign.wordpress.com


PHOTOGRAPHY
Euan Myles - Photography by Toon
Today’s Photos - July 13, 2008 by Dale


ILLUSTRATOR TUTORIALS
Draw Your Self Portrait by Sean Hodge
How to Create a Vector Safari Compass in Illustrator by Chris Spooner


PHOTOSHOP RESOURCES
Photoshop Tips: Smooth Selections by DCloud
Vintage Clouds Photoshop Tutorial by M.Qamar Khan
How to Create florishes in PHOTOSHOP by 180Degree
70 Beauty-Retouching Photoshop Tutorials by Smashing Magazine


WEB DESIGN and INTERNET
How to show widgets on post pages only by LawnyDesignz
Creating an animated form in Adobe Flash by Animatrick Adobe Tutorials
Designing a stylish contact form for your portfolio by Alex
NETTUTS - Create a Simple, Powerful Product Highlighter with MooTools by Jeremy Peck


BLOGGING
Free Tools to Track, Analyze, and Optimize Your Website by YEA
Twine Review - Tie It All Together! by Mert Erkal


RANDOM INSIGHTFUL POSTS
Who You Think People Think You Are by AP
Happy Birthday to Me! by Liane
Sales Guy Vs. Web Dude, The Web Site is Down by Nate Balcom
People feel no obligation to buy books by Mohamed Taher

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.



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 »

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.

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 »

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


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:

• Blogspot Design Showcase - Part 1
• Blogspot Design Showcase - Part 2

Grunge RSS Banners

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.



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:

• Icons / Grunge Style Rss Feed Icons by FrankaKo
• 50 Grunge Icon Textures by Sarah-Dipity
• Free Hi-Res Watercolor Photoshop Brushes by BittBox

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!

<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.




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


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>