Powerusers » Tutorials

Learning JSP (Part 1) – Introduction

Nikhil — Sun, 05 Feb 2012 12:14:50 +0000

Hello everyone! We are starting a new series for exploring well popular server side technology called ‘JSP’ (Java Server Pages). We will focus on learning this technology from very basic.
Today we will be covering following topics:

What is JSP?
How does it looks like?
Where can we use it?
Things required to get started.

1. What is JSP?

JSP is a server side technology like ASP and PHP. This technology allows us to use Java code with static markup language. It is useful for development of web based application independent of server and platform. JSP page is compiled and executed on the server and the resulting HTML or XML page is delivered to the client side. The compiled pages on server uses Java bytecode and this bytecode can be executed by Java Virtual Machine (JVM).

Java bytecode – It is a form of instruction that Java Virtual Machines executes. Having knowledge of java bytecode is same as having knowledge of assembler for C or C++ programmer.

2. How does it look like?

The use of jsp is same as that of php. We can use jsp tags along with the regular HTML tags. See the following example for getting clear idea.



    JSP Demo Page


    <% out.println("This Line is in JSP tag."); %>

As you can see, I have used jsp tag along with html tags. We can use jsp tags wherever we want to show the dynamically generated content.

3. Where can we use it?

JSP can be used anywhere where dynamic nature is required for your application or website. If you want to show data from database, jsp is the best choice. It is secured technology since every jsp page is compiled into the bytecode on the server and no human being can read it. You can separate design view and business logic of your application to make it more defensive. As jsp requires JVM for execution and JVM is available for all platforms so it becomes platform independent too. It can be used for creating Web Sites, Web Services, Online Shops, Content Management Systems and much more.

4. Things required to get started!

For getting started with jsp you will require following tools/application.
a. Java Runtime Environment (JRE) depending upon your OS.
b. Apache Tomcat Server
c. Any text editing software you love.

For today, this will be enough. In next post we will setup environment for running jsp and write first jsp page.

If you like this article and want to continue learning more about jsp then please give your feedback and comments.

Create Simple Random Color Generator using JavaScript

Nikhil — Mon, 14 Mar 2011 12:00:40 +0000

Hello everyone! I am writing a post after long time since I was busy in 12 hours a day tight schedule for almost Six months. Although the experience was very awesome.

So today, we are going to create a very simple Random Color Generator using JavaScript. Some of you guys might think it as very very simple but it’s really fun to create. If you haven’t created yet by yourself then I would suggest trying it. It actually takes 2-3 minutes for creating.

Here we are going to generate Hex Number. For this we will create an Array which will contain numbers ‘0’ to ‘9’ and characters ‘a’ to ‘f’ as the range of the Hex Number is from 0×000000 to 0xFFFFFF. Then we will pick an element from an array randomly and place it in the Hex Number.

Step1:

Create an Array


var hexno=new String;
arr=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");

Step 2:

We will select an element randomly from array. Math.random() generates random number from 0 to 1 which will be multiplied by 15 (since our array contains 16 elements with base 0). Math.round() will round the number to its nearest natural number.


var n1=Math.round(Math.random()*15);

var n2=Math.round(Math.random()*15);

var n3=Math.round(Math.random()*15);

var n4=Math.round(Math.random()*15);

var n5=Math.round(Math.random()*15);

var n6=Math.round(Math.random()*15);

Step 3:

Get a corresponding number for all the six elements and put it in the string.


hexno="#"+arr[n1]+""+arr[n2]+""+arr[n3]+""+arr[n4]+""+arr[n5]+""+arr[n6];

Step 4:

Use the string to apply the color.

window.document.bgColor=hexno;

That’s it. Random Color Generator is ready. Try it out.
Final Code:

var hexno=new String;
arr=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");

var n1=Math.round(Math.random()*15);
var n2=Math.round(Math.random()*15);
var n3=Math.round(Math.random()*15);
var n4=Math.round(Math.random()*15);
var n5=Math.round(Math.random()*15);
var n6=Math.round(Math.random()*15);

hexno="#"+arr[n1]+""+arr[n2]+""+arr[n3]+""+arr[n4]+""+arr[n5]+""+arr[n6];

document.write("<div id='tag'>");

document.write("<h2>Hex Color</h2>"+"<h3>"+hexno+"</h3>");

document.write("</div>");

window.document.bgColor=hexno;

How to Create Coda Slider in Minutes

Nikhil — Sun, 25 Jul 2010 20:29:01 +0000

Slideshow is great way of displaying contents to your readers. And the use of jQuery in creating these awesome sliders or slideshows is easy to implement and modify.

Today in this tutorial we are going to create very easy Slider using Coda javascript library.

So before going to the first step you can view the working demo of tutorial and download the source code below.

Step 1: XHTML

<div id="content">
<h1>Coda Slider | DEMO
<div class="wrapper">
<div id="coda-slider-1" class="coda-slider preload">

<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Welcome!
<p>Hello, welcome to the working demo of Coda Slider. You can see how image, lists or text looks or works on various tabs. I hope you like this tutorial. Enjoy great sliding effect and try out with the above tabs.</p>
</div>
</div>

<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Images can go Like this!
<img src="images/demo.jpg" alt="demo image" />
Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.
</div>
</div>

<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Recent Articles
<ul>
<li><a title="15 Must Read Articles for Web Developers" href="http://nikhilmisal.com/15-must-read-articles-for-web-developers/">15 Must Read Articles for Web Developers</a></li>
<li><a title="Why these 31 Blogs Rock (Always)?" href="http://nikhilmisal.com/why-these-31-blogs-rock-always/">Why these 31 Blogs Rock (Always)?</a></li>
	CSS3 Styling" href="http://nikhilmisal.com/create-simple-navigation-using-css3-styling/">Create Simple Navigation using CSS3 Styling
<li><a title="30 Superbly Done Creative Ads" href="http://nikhilmisal.com/30-superbly-done-creative-ads/">30 Superbly Done Creative Ads</a></li>
</ul>
</div>
</div>

<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Thank You</h2>
This tutorial is created by Nikhil Misal for Powerusers.
<p>Thanks for visiting this demo! If you like this tutorial then please share and comment on it.</p>
<p>You can freely use this slider for your future projects so go ahead and download the <a href="#">Source Code</a>.</p>
</div>
</div>

</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
<h3><a title="Go Back to Tutorial" href="#">Go Back to Tutorial</a></h3>
Created By: Nikhil Misal
</div>

Here the content of each slide is include in panel-wrapper and each panel is included in panel. And all these panels are included in coda-slider.

Step 2: CSS

Lets add some styling to the above file.

/*Page Styling */
body {
margin: 0;
padding: 0;
background: url(images/back.jpg);
}

#content {
width: 940px;
margin: 0 auto;
padding-bottom: 50px;
font: 1.5em Keffeesatz, Verdana, Geneva, sans-serif;
}

@font-face { font-family: Keffeesatz; src: url(fonts/YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(fonts/YanoneKaffeesatz-Bold.otf) format("opentype") }

h1 {
color: #ddd;
text-align: center;
padding-top: 20px;
font: 2.5em KeffeesatzBold, Verdana, Geneva, sans-serif
}

h2 {
font: 2em KeffeesatzBold, Arial, Helvetica, sans-serif;
color: #999;
text-shadow: 1px 1px 2px #000;
}

/* Coda Bar */
.coda-nav {
height: 30px;
background: #eee;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #ddd),
color-stop(0.62, #eee)
);
background: -moz-linear-gradient(
center bottom,
#ddd 23%,
#eee 62%
);
width: 700px !important;
margin: 0 auto;
border: 5px solid #aaa;
border-bottom: none;
}

.coda-nav ul {
clear: both;
display: block;
margin: auto;
overflow: hidden;
}

.coda-nav ul li {
display: inline;
overflow: hidden;
}

.coda-nav ul li a {
background: url(images/button.jpg) top center no-repeat;
color: #fff;
display: block;
float: left;
margin-right: 1px;
text-decoration: none;
width: 30px;
height: 30px;
text-indent: -999px;
}

.coda-nav ul li a.current {
background: url(images/button-active.jpg) top center no-repeat;
}

.coda-nav ul li a:hover {
background: url(images/button-active.jpg) top center no-repeat;
}

/* Slider Styling */
.coda-slider {
display: block;
width: 700px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 50px;
background: #eee;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #ddd),
color-stop(0.62, #eee)
);
background: -moz-linear-gradient(
center bottom,
#ddd 23%,
#eee 62%
);
border: 5px solid #aaa;
border-top: none;
}

.panel-container {
position: relative;
}

.coda-slider .panel {
float: left;
width: 700px;
}

.panel-wrapper {
margin: 0 20px;
overflow: hidden;
padding: 20px 0;
}
.panel-wrapper img {
float: left;
margin: 0 20px 20px 0;
border: 5px solid #999;
}
.panel-wrapper ul li {
margin: 10px 0;
}

We are using some CSS3 properties here. Like Gradient background and external fonts embedding @font-face. You can learn more about these properties here:

1. Speed Up with CSS3 Gradients

2. The Essential Guide to @font-face

Step 3: jQuery


$().ready(function() {
$('.coda-slider').codaSlider({
autoHeightEaseDuration: 2500,
autoHeightEaseFunction: "easeInOutElastic",
slideEaseDuration: 2500,
slideEaseFunction: "easeInOutElastic"
});

});
</script>

Add the above script in the tag. This will initiate the slider operation. You can change above value and play with some functions.

I hope you like this tutorial. If you enjoyed it then please put your comments below and don’t forget to download the source code.

Enjoy the real success with testking 70-640 and 70-652 online training programs and latest HP2-Z18. Also prepare for next level with quality 000-115 dumps questions and answers of 642-654 exam.

Create Simple Navigation using CSS3 Styling

Nikhil — Sat, 15 May 2010 21:23:07 +0000

HTML5 and CSS3 are considered as the future of the web. Now you can make your website the way you want using just HTML and CSS. You can use Shadows to text, box, use of gradients, simple animations, embedding Videos and much more. HTML5 and CSS3 have just changed the way; web developers look at coding the site.

In this tutorial we are going to use some of the basic techniques of the CSS3. We are creating simple navigation menu with linear gradient created in CSS3 style sheet. We are also going to use text-shadow effect to give our text a nicer look.

So let’s start with the HTML first.

STEP 1:

Create a new HTML file and add an unordered list containing the menu elements.

Save the file and preview it in browser, it should look like this.

STEP 2:

Now create new Cascaded Style Sheet (CSS) and save it in the same folder as of HTML file.

Attach the CSS file to above HTML file.

css" type="text/css"/>
DEMO :: Simple Navigation using CSS3 Styling

STEP 3:

Add the following style in the CSS file to give your navigation some clean look.

body{
	background: #666;
    font-family: Helvetica, arial, sans-serif;
}

#nav {
	width: 500px;
	margin: 50px auto;
}

#nav ul {
	float: left;
	list-style-type: none;
	width: 450px;
	height: 44px;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

	background: #e3e3e3;
	background: -moz-linear-gradient(top, #ccc, #999);
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));

	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 3px #333;

	text-shadow: 0 1px 0 white;
}

#nav ul a{
	display: block;
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	float: left;
	color: #454545;
	font-size: 20px;
	text-decoration: none;
}

Applying Shadow:

-moz-box-shadow is used for Mozilla. Syntax is
-moz-box-shadow: x-offset y-offset blur color;
-webkit-box-shadow is used for Webkit. Syntax is
-webkit-box-shadow x-offset y-offset blur color;
box-shadow is used for Standard Browsers. Syntax is
box-shadow: x-offset y-offset blur color;

Applying Gradient:

For Mozilla client gradient is applied using the following syntax

background: -moz-linear-gradient(position of start, from color, to color);

and for Webkit it is

background: -webkit-gradient(type of gradient, position of start, position of stop, from color, to color);

Creating Rounded Corners:

This is one of the most beautiful addition to CSS3. You can create rounded corners with just a two lines of code.

Syntax:

-moz-border-radius: radius size in px;

-webkit-border-radius: radius size in px;

STEP 4:

Let’s add some hover effect. Add the following code in CSS file to get cool hover effect.

#nav ul a:hover{
	display: block;
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	float: left;
	color: #ddd;

	text-shadow: 0 1px 0 black;

	background: #555;
	background: -moz-linear-gradient(top, #444, #555);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}

Try with different color combination to get exciting results.
You can download my file below for experimenting.

By using our network+ certification and 640-864 e-book facility, you can carry your 642-681 prep solutions anywhere along with you. The 70-681 dumps and E20-322 exam tutorials are also accessible with free downloadable feature.

How to Add Social Sharing Icons in Your Post

Nikhil — Fri, 23 Apr 2010 19:24:27 +0000

Social media has become the part of our lives. We find tons of resources, bookshelves containing information and lots of how to guides & tutorials. For bloggers and marketers it is the most important tool for sharing information with friends, clients, readers. To make this sharing thing easier many Sharing Tools are now available for the publishers. These are the great tools which decide the quality of the article and also help to share it with world.

So in this tutorial we are going to learn how to add these Social Sharing Icons in your post, to make it easy to share for all.

Step 1: Open single.php from your Themes folder

Head to your Theme installation folder and open the single.php file for editing in your favorite editor. We want to add Icons only in the single post therefore the code should also be added to this file.

Step 2: Add the Basic Code

Now add the following code just below the line. This line calls the content of the post.

Step 3: Get the Required Code for the Icons

Now lets add the icons. Decide which Social Sharing Icons you want to add and get the appropriate code from following links.

Faqpal Code:

Step 4: Adding Buttons

Add the code obtained from above links between

and

Put tag around each code. Your code should look like this.

Step 5: Remember

For Digg Button you have to add following code either in or in

In TweetMeme, do not forget to change the username in tweetmeme_source = ‘Powerusers’; field.

We are using tag rather than in HTML code because many of the above code itself have tag inbuilt. So when you apply style to our tag it gets applied to all the inbuilt tags.

Step 6: Let’s add some Style

Open style.css file from your theme installation folder and add the following code for very simple and basic look.

/* Social Buttons /* --------------- */ #so_buttons { width: 530px; height: 85px; background: #ddd; } #so_buttons em{ margin: 5px 10px 5px 10px; float: left; }

Do not forget that you can always change the feel and look by editing CSS file. And here is our final outcome.

For your inspiration check out the following collection of Sharing Block.

1. Blog.Spoongraphics

2. Design Informer

3. Build Internet

4. Productive Dreams

5. Tutorialzine

Related Posts:

How to Create Beautiful Minimalist WordPress Theme in Photoshop

9 Tutorials to Get Started with Custom Post Types in WordPress

Learning JSP (Part 1) – Introduction

Create Simple Random Color Generator using JavaScript

How to Create Coda Slider in Minutes

15 Brilliant CSS3 Based Articles

Nikhil — Tue, 09 Mar 2010 19:03:27 +0000

Hello everyone, lately I have been busy with my college stuff. Therefore was unable to post new articles. Actually I am having exam from 23^rd of this month. I will try to post an article including weekly favorites in between.

Now let’s concentrate on this post. CSS3 is becoming more and more popular these days and many developers are using it regardless (this is good) of compatibility issues with some browsers. Today probably everyone knows about CSS3 and its features. But you can extend its use further with following awesome tutorials or resources. So go ahead and try them!

1. Halftone Navigation Menu With jQuery & CSS3

2. Editable CSS3 Image Gallery

3. CSS3 Techniques You Should Know

4. Coding a CSS3 & HTML5 One-Page Website Template

5. The Hidden Power of border-radius

6. An Awesome CSS3 Lightbox Gallery With jQuery

7. The New Hotness: Using CSS3 Visual Effects

8. Design a Prettier Web Form with CSS 3

9. 5 CSS3 Design Enhancements That You Can Use Today

10. Greyscale Hover Effect w/ CSS & jQuery

11. Stronger, Better, Faster Design with CSS3

12. 50+ Fresh CSS Techniques, Tutorials and Resources

13. The Future Of CSS Typography

14. CSS3-Only Tabbed Area

15. CSS3 + Progressive Enhancement = Smart Design

Related Posts:

Create Simple Navigation using CSS3 Styling

How to Create Coda Slider in Minutes

15+ Super CSS Galleries for your Inspiration

25+ Tips and Tutorials of HTML & CSS

Best Links of July

How to Create Beautiful Minimalist WordPress Theme in Photoshop

Nikhil — Sun, 28 Feb 2010 11:40:08 +0000

Today I am going to show you how to easily create a beautiful minimalist WordPress theme in Photoshop. Actually I was working on the re-design of this blog and got an idea to write a tutorial for minimalist WordPress theme.

I am using a noisy texture here a with some letterpress effect which is being used widely nowadays. Following color scheme is used in this tutorial.

One of my favorite way to choose a color scheme is Adobe Kuler. Many great color palletes are available there to choose from. If you want try this tutorial with different colors; go there and choose your favorite.

1. Setting up Working Area

Create a new document (File>New) with following specifications.

Now lets add margins to our document. Go to View>New Guide and two vertical Guides at 40px and 980px.

It would look like this.

2. Creating Background Texture

Create a new layer above background layer and name it as bg_texture. Change the foreground color to #bfbcb3 and press (Alt+Backspace).

Now go to Filter>Noise>Add Noise. Change the Distribution type to Uniform, Amount to 3% and select Monochromatic and apply the filter.

Your document would look like this.

3. Let’s Start with the Header

Create two new Horizontal Guide at 300px and 350px & Vertical Guides at 650px and 680px.

Now write your blog name at the center of header area. I choose

Font: Brush Script Std.

Font Size: 150px

Weight: Medium

Color: #f01685

Now Double Click on the ‘blog title’ layer and add the following style.

Your header will look somewhat like this.

Now add the social icons with color #9fa69c as shown below. Vector icons are included in the source file.

Add the following layer style to each of these icons.

Not it’s time to finish the header. Select the Single Row Marquee Tool from the List Marquee Tools. Create new layer and name it as header_sep and add the horizontal selection are as shown below.

Fill this area with #e7e3da, move the section area downward and fill it with #474143. Select the Eraser Tool (E) with 300px size and smoothly erase the separator at both ends to look like this.

4. Create a Sidebar

Write the title of sidebar ‘Pages’ and then pages ‘About, Guest Post, Contact’. Here I choose

For title

Font: Verdana

Font Size: 25px

Color: #f01685

Align: Left

For content

Font: Verdana

Font Size: 20px

Color: #9c266a

Align: Left

Now add following layer style to sidebar title ‘Pages’

Copy header_sep layer and paste below the sidebar title ‘Pages’

Now cut the separator on the left side to get following result.

5. Add Contents to the Design

Add some content to the design as shown below.

Title of Post

Font: Verdana

Font Size: 35px

Color: #474143

Align: Right

Add the following layer style to Post title.

Add the header_sep line at the end of post and cut it on the right side as shown below.

Repeat this with another post too.

6. Finish with the Footer

Add some copyright stuff and basic links like About, Contact in the footer as shown below.

Font: Verdana

Font-Size: 15px

Color for Pages: #474143

Color for copyright: #bfbcb3

Now add following layer style to copyright text.

That’s it! You have created a Beautiful WordPress Theme in Photoshop. Here is the Final result.

You can also download the source file here.

I would like to know your comments and suggestion on this tutorial.

Related Posts:

How to Add Social Sharing Icons in Your Post

Best Links of July

20 Ultimate Photoshop Tutorials

10 Ultimate Photoshop Tutorials

9 Tutorials to Get Started with Custom Post Types in WordPress

Amazing Illustrator Tutorials #3

Nikhil — Wed, 20 Jan 2010 17:57:32 +0000

Photoshop® and Illustrator® are the main platforms for the designers and artists. To master these, you have to learn new tricks and find new ways to get the best out of it. Tutorials are the way of learning new tips and tricks. Many tutorials are available on the internet today but the challenge is to find best. And hence I bring some excellent tutorials which will help you to learn Illustrator®.

This is the third article in the series of Illustrator® tutorials. You can find more photoshop and illustrator articles in the Tutorials section.

1. Reflections Done Right – Creating a Money Roll Icon

2. Vectors Imitate Life with Gradient Mesh

3. How to Create Vector Folk Buildings Using a Digital Tablet and Tracing Techniques

4. How to Create a Cute Vector Bear T-Shirt Design

5. How to Create a Curious Owl in Illustrator CS4

6. Create An Editable Metal Type Treatment

7. Create a Cute Little Tiger in Illustrator

8. A Comprehensive Guide to the Pathfinder Panel

9. Use Inkscape to Create a Grunge RSS Box Icon

10. Create Perspective Using Simple 2D Art with Illustrator CS4

11. Create Colorful, Layered Paper Type in Illustrator

12. Chinese Bamboo

13. Create a Stylish Colorful Text Effect in Illustrator

14. Create A Wood Grain Texture

15. Illustrator Quick Tips #1 – Complex Symbols with Pathfinder

16. Women and Cats’ How-To Advanced Tutorial

17. 3D Typography in Photoshop

18. Create a 3D Vector Labyrinth

19. The Hidden Power of the Average Command: Creating Swirly Type

20. How to Create a Classic Vector Painting with Watercolor Washes and Line Art

If you like this collection then I would appreciate your comments.

Related Posts:

Learning JSP (Part 1) – Introduction

Create Simple Random Color Generator using JavaScript

How to Create Coda Slider in Minutes

Why these 31 Blogs Rock (Always)?

Create Simple Navigation using CSS3 Styling

Ultimate Photoshop Tutorials #3

Nikhil — Fri, 18 Dec 2009 16:16:38 +0000

Hello everyone! From the couple of months I haven’t posted anything about photoshop tutorials. But today we are back with Ultimate Photoshop Tutorials Series. Many tutorials are posted everyday on many blogs. But it is really hard to find the good ones. So I have listed some great tutorials posted in last several months. I hope that it will help you a little bit and save your time.

Previous posts in this series:

20 Ultimate Photoshop Tutorials

10 Ultimate Photoshop Tutorials

You will find more such posts in the coming days on Amazing Illustrator Tutorials and Web Design Tutorials, so I suggest you to subscribe to email updates and don’t miss this awesome stuff.

1. How to Design a Print-Ready Flier with Photoshop and Illustrator

2. Create a Watercolor-Themed Website Design with Photoshop

3. Creating a Shiny Chain with Photoshop

4. Create a Simple Autumn Scene in Photoshop

5. How To Create a Sleek Audio Player Interface in Photoshop

6. Create a Stunning City Skyline Made of Text

7. How to Create a Realistic IES Lighting Effect in Photoshop

8. Create Gloomy Text Effect by Utilising the Amazing Cloud Filter in Photoshop

9. How to Create a Side View Concept Car

10. Reader Tutorial: Extinction by Chanito

11. Reader Tutorial: Create Vintage Traveler Diary in Photoshop

12. Creating Very Cool Folded Typo

13. Give a Car Photo Super Slick Lighting Effects

14. How to Make a Creative Blog Layout

15. Create a Shiny Earth with Photoshop 3D Layers

Related Posts:

60 Best Places to Get Quality Stuff

Some Great Tutorials & Resources

Best Links of July

9 Tutorials to Get Started with Custom Post Types in WordPress

How to Create Beautiful Minimalist WordPress Theme in Photoshop

Letterpress Effects in Web Design- Trends and Tutorials

Nikhil — Mon, 07 Dec 2009 21:05:10 +0000

Develop compelling websites at graphic design school Cincinnati and pursue your creative skills

In the earlier days Letterpress effect was achieved by applying ink to the top surface of raised image area, which is then pressed against the paper to transfer the image. This printing was done first on cloths then on papers. Okay! No more history let’s move to our topic. If any one is interested in the history read this article on Wikipedia.

Nowadays, the letterpress effects in the Web design is quite popular. This is obvious because the effect looks very cool and also easy to achieve in designing. Actually I like this effect so much that I am using it for each and every text in my new upcoming website. Considering that God will help me from IE6.

So following are some awesome websites which uses Letterpress effects. And at the end; Tutorials are also there!

1. 365 Days of Astronomy

2. Apple

3. Ar-bent-ing

4. Brightkite

5. e-Systems Organizers

6. Inspireling Blog

7. Lee Munroe

8. Nosotros

9. Postbox

10. Powerset

Tutorials:

Creating Editable Letterpress Styled Text

Create a Sleek Pressed Letter Design

Create a Letterpress Effect with CSS Text-Shadow

What do you think about Letterpress Effect? Will you use it in your Web Design? Let us know in the Comments.

Related Posts:

Future Trends in Web Design – What Lies Ahead

20 Great Web Design Tutorials and Inspirations

Mobile Website Design Trends

15 Must Read Articles for Web Developers

12 Creative Peace of Web Design