Demo Code

Creating the border

To create the border we will be using a website called stripegenerator. It generates some cool lined patterns which you can use in your projects. For our purpose we cannot use vertical or horizontal lines, the pattern must have some rotation to it. The default red and white one is good for us, so lets hit download and save the pattern. Now lets open the pattern in photoshop.

Animating the pattern

Now we need to animate the pattern in photoshop. To do that first lets open the animation window in photoshop its in windows >> animation.

Now we need to duplicate the background layer and name it 01.

Similarly we will make one more copy of layer 01 and name it 02.

Now lets make the background layer black this works only as a visual guide when we animate the layers. Go into edit menu >> Fill, then fill it with black color.

Now we hide layer 01 and move layer 02 to the extreme right of the canvas so that its completely out of it. You can use the right arrow key to precisely move it one pixel on each nudge.

Now turn on visibility of layer 01 and select both the layers .

In the animation window we need to create another frame.

Now its animation time. With both layers selected and frame 2 selected move the layers to the extreme left such that layer01 goes out of the canvas and layer 02 comes in completely on the canvas. To check that everything is perfect see to it that both frame 1 and 2 are exactly same. Reason why we do this is that we need to make a looping animation (animation which runs over and over again without jerk.) so most important in any animation loop is that first and the last frames are identical, hence its very important that frame 1 and frame 2 should look exactly same else your animation will be jerky.

We will now be adding more frames to the animation called tweens or inbetweens a term came from classical animation. Tweens are nothing but frames between two main frames called keyframes, they are the inbetween instances of a frame which creates the illusion of movement. Below is a diagram which can explain you better.

Suppose in our a ball moves from point A to point B in time then Points A & B will be our KeyFrames and all the other frames along the motion path will be the inbetween frames.

Ok now with those animation basics off the plate and lets get on with our animation. From the animation pane click on the arrow at top right corner to open a options menu. Select the tween option.

This is the how the tween options look like.

Here’s what each option means.

Tweent with: By default it’s selection when more than one frames are selected. It simply means put new frames between the two main frames.

Frames to Add: It specifies the number of frames to be added inbetween. By default its five but it can be any number.

Layers : It specifies which layers will be affected by the tween. By default it’s All Layers we will keep it that way, but it can also be changed to affect a specific layer if we need.

Parameters: Parameters are the properties which can be affected by tweens. In more easy way the properties of a layer that can be animated. By default all the checkboxes are checked, but for this tutorial we only focus on changing position so we uncheck opacity and effects boxes.

Here’s how we changed things in the tween dialogue. Just hit ok and it will create 15 frame in between frame 1 and 2.

Now the animation part is almost done, next step we will do is to delete the last frame.

The we add a little delay to all the frames. Delay means the animation will delay by a specific time fraction. To do that we select all the frames and click on the small black triangle on bottom right corner of each frame. It opens a few options choose 0.1 sec delay in that and we are done.

Below is the resulting animation.

Building the Borders

With pattern done now we will write the code to make all of this work. Below is the code for it.

We made two simple boxes with some dummy content in it.

Now for the CSS: We are using two classes here one called patternbox and other is called boxconts.

.patternbox: This class places the animated gif as a background of the outer box. It also has a padding of 5px which acts as border width. You can increase it to get a thicker running border or you can reduce it to make border thinner.

.boxconts : This class holds the contents of the box. Important property here is to put a bckground color to this one so that the animated pattern is not showing through the transparent box. You can see the results below with and without background color.

Click Here to see the demo of what we created.

Conclusion

Trick here is the background color of the inner box which masks the animation giving us a running borders look. Nevertheless nice and handy little trick to give some great results you can see the all the demos below to see the possibilities on what all you can do with it.

Demo Code

Relevant

The header should be relevant to what the site is about. It should paint a picture about the site and hook the users at a glimpse. Below is a good example of the same.

Clear and Sharp

Header should be clean and sharp. It should convey a strong message about your site clearly. Below is a good example of it.

Placements

On the header the placement of key elements is very important. Your logo can go to the far left and should be sufficiently big to be readable. The reason for putting it on left is that we are taught to read from left to right so we always start seeing a web interface from the far left to the right. The other graphical elements on the header like an image can come on the right as next our focus going to the right, so next best thing after logo should be on right. If the logo is in the center of the header then no other elements around it should be too prominent so that the logo retains more weight-age than surrounding elements.

Size

While making a header graphic caution should be taken about its height, it should not be too big in height nor should be too small. The height proportion of the header must be such that its fully visible on almost all screen and on all different resolutions.

Functional

Along with graphics if you can make the header more functional its a big plus. Functional means it has to perform certain operation like optin people in with a quick optin form or taking them to other pages of the site with a navigation bar. Header is like real estate of your site and you need to utilize it in best possible way as the first thing people are going see is your header and if they find what they looking for on your website right on the header your conversion rates will shoot up. Below are some good examples.

Conclusion

So these are the few tips on what makes a good header. Post your comments and views about the articles and let us know how you like it.

In today’s evolving internet world websites are becoming more and more graphical oriented.  We see all types of websites being made which are really stunning and graphical.  Graphics are a must for today’s new age websites. They improve the data representation and overall aesthetics of the website.

Below are some of the old and new versions of some well known companies. You can see the difference then and now.

It’s evident that if you make a new website like in 1980 it ought to fail as people are more use to seeing much more sophisticated and rich graphical interfaces. So not using graphics is a total NO NO today.

A Picture is worth “A Million Words”

We use the term picture as image or graphic in this context. Right graphics can paint a clear picture in users mind about what’s the website is for. It can hook them to your site with one glimpse and they will certainly return to it and may refer site to others if they really like it. So having precise graphics is very important.

There is a lot of debate on use of graphics so as to make the website more usable. But a common sense technique is that website will be more usable if you place correct graphics at correct place on your website. You need to think about the user’s goal as to what he/she wants to achieve through your website and how easily they can find it on the site. Making them toil through the pages and click is that last thing you want your websites users to do. So graphics can be real boon to your site in guiding users through it and not frustrating them. Below are some good samples.

weshootbottles.com

silverbackapp.com

Using Fonts

Using graphics for text element like healing can give them a rich look as compared to the default HTML jagged look. Below is a simple example of a headline text. We have used same font and same font size, but the former is plain HTML  and the latter is an image.

Image text is much smoother than plain HTML but the real deal now is that we can freely use any font, any color and any style for the text now. We can also use other graphics along with text to give it even more intriguing look. Below are some good samples of what all you can create.

A word of caution although it’s a good technique to use image headers they should not be overused. It can make a webpage very bulky in size and hampers the page load time. Also it’s not Search Engine friendly as they can’t understand data in image format, but it can be made understandable using the exact text as alternative text in HTML popularly called the alt tag.

Freedom to create a rich look and feel

With graphics your site can really come alive. There is so much freedom to use colors, various styles, textures etc. You can base your website on a theme or you can create something interesting which would be nice to look at and usable or you can your design in accordance to your product or content you selling. So with proper graphics there are unlimited design possibilities for your website’s interface. You can really give your website a personality, a feel which really flows seamlessly with the websites objectives.

Conclusion

Graphics Bestow power to your website. They are a must for new website. So we advice you to create great graphics to make good websites better and better websites excellent. We can help you with your graphic needs as well use the link below to let us help you with all your graphical needs.

The Graphics Attraction Factor

Graphics are the visual representation of what your website and product is about.  The quality of graphics has a direct impact on the value that is placed in the beholders eye of your product or service.

Therefore, graphics are and should be viwed as a strong component of the advertising appeal attraction factor.   Individual elements of your website graphics that comprise the appeal are clearly defined shapes/objects with  crisp colors that are bold and show a level of strength that demands the readers attention.

So making the graphics “Bold with Strong Colors” is an important aspect to consider in your squeeze page design.  Your header should make your audience understand what the site is about in one glimpse.  Graphics should enhance the aesthetics of the page and give it a nice balance and contrast. Below are some inspiring squeeze pages I came across.

Prominent Buttons

The Call to Action on a squeeze page has one focal point- to acquire information such as the name and email address of the viewer so that you can maintain contact with them.

The common call to action on a squeeze page is a optin box that is easily executed byt a optin button. Infact it needs to be the first thing viewer would like to click. Below are some examples of buttons.

Matching Graphics

Adding a visual of a product on a squeeze page that you are going to give away always adds to firm up what the view will be receiving as well the value of that product.  By adding graphics like E-books, DVD covers, DVD’s etc matching to the site design adds to consistent branding.

This is also a good way to make a statement to the quality of your product or service.  Uniform design helps to create a visual distinction of respect and value you as the product owner have for what you are sharing with your reader.

Below are some good examples of that.

Innovative Order Now Buttons

Innovative design of order now buttons helps the user to find them better. They should be big and prominent with good contrast as compared to other graphics on the page. Below are some inspirational Order Now buttons.

Equally Strong Footer

As the header the footer of the page should be strong and matching to the overall concept of the page. Its important to maintain the same branding on header and footer. So the name or logo on the header should be the same on footer and should not differ in look and feel. Below are some good examples of footers.

Conclusion

Graphics are a must for any squeeze page and the right graphics can shoot your page’s success to never before heights. Not only they enhance aesthetics of the page but also help attract traffic towards your site. So to make a successful and beautiful landing page a perfect blend of all the graphic elements is a must have.

Headline is probably the most important part of your website or a blog. It should be attractive cause headline generates interest in user to read the info below it. So its vital to have an attractive headlines. Below we will see some of the CSS techniques you can use to make your headlines better and attractive.

demo Source code

Glossy Headline

This effect works with white background or light colors backgrounds. Below is the HTML & CSS code for it.

Code is pretty simple first we first write an <H1> tag and then write the text we want to give a  glossy look. Next we add a <span></span> tag before the text. So that’s all the markup we need. Now lets style it.

.glosshead: This is the basic styling for the font, font size and color of the headline. One important property is position:’relative’. We will see later why we added that property.

.glosshead span: This is the class for the <span> tag we added. The span makes the gloss. First we make it a block display and position it absolutely.

Note: We had earlier used a property called position:relative so that when we absolutely position the span inside it it takes the <h1> tag as its parent and positions the span accordingly.

Then we add a background color, width and height to it to it.

The box with the green outline is our gloss. Its been highlighted to show the gloss area.

Now for the gloss magic. We will use a property called opacity and set its value to 0.2. It means set opacity of the specified element to 20%. For IE we will use the opacity filter called alpha, it works the same way as opacity. Below is the code and the final result.

Cons: The limitation to this effect is that it works with only white or light colored backgrounds. On darker backgrounds the span box will show as a semi-transparent box. But on light backgrounds it looks absolutely awesome.

Reflected Headline

This effect only works with alphabets that symmetric horizontally. The reflection is not real but a trick to imitate reflection. Below is the HTML CSS of the effect.

In the markup we add a <span></span> before the header text and also write the same text in the span as well. We then add a class called refhead to it.

The markup is done now we need to style it up.

.refhead: This calss gives the basic styling to the markup. Again we position it relative so that we can place the span absolutely.

.refhead span: This is the class which will produce the reflection. First we absolutely position it. What is does is superimpose the span on the <h1> text and you will see something like below.

Now to place the reflection. We need to add a property top to a suitable value to match reflection level. To do that we have added a top value of 44px. You should see something like below.

Now to add the reflection effect. Again we use the opacity property to fade it out and for IE we will use the alpha filter.

Drawback of the effect is that it works with only symmetric alphabets and other thing is that you have to write text twice once for the main part and once again for the span which works as the reflection.

Drop Shadows

We are using a CSS  property called text-shadow, it has been around the block since the advent of CSS2, but not too often used. It looks really good if used correctly. Below is the code on how to drop shadow.

Text-shadow: Text shadow has some parameters which we need to understand to use it. We have used it in our example like this “text-shadow: #777 3px 3px 1px;”.

• The first parameter is the color of the shadow.
• Next is the X-offset, it specifies position of the shadow on X-axis.
• Then comes the Y-offset which specifies the shadow co-ordinate on the Y-axis.
• Next Value is for the blurriness of the shadow. Its an optional parameter, if its not specified the shadows are sharp.

Text-shadow is not IE compatible. So for IE we use a filter called DropShadow. Parameters are similar as of text-shadow its written in this format

filter:DropShadow(Color=shadow color , OffX=X offset, OffY=Y offset, Positive=1);

• Color: Color specifies the shadow color.
• Offx: It specifies x co-ordinate of the shadow.
• Offy: It specifies y co-ordinate of the shadow.
• Positive: Its non-zero value create drop shadow for any non-transparent pixel, false or zero value creates shadow for any transparent pixel in visual object.

Making first letter Different

This is quite a handy technique and gives nice result. Below is the code and explanation on how to do it.

In The Markup we have wrapped the first alphabet in a <span> tag and then we add a class called twofonts to the <h1> tag.  Now we will style it.

.twofont: This provides the basic styling of the h1 tag. We have added a property line-height with a big value of 300% why we have done that will be explained in the next step.

.twofont span: This class is for the first alphabet which is in the span. We have changed its font and color and added a border to it and its done.

Now if the line height is not set to 300% or a different suitable value the headline would not look right. Below is the output of what you will see.

One of the reasons this happens is because the overflow of h1 is set as hidden. The height of span tag becomes more than the h1 tag and it clips off the top and bottom borders.

One question arises though, i.e. what if we remove the overflow property. Well it does give the results but in IE you will see something as below.

So its really important to set the overflow to hidden & the Line height of the h1 to a suitable value so that the bigger alphabet doesn’t get clipped off. When we add these properties back we get the desired result.

Conclusion

Heading are essential part of any information and if proper emphasis is given to them it can make you win and engage people to read your sites. I hope you enjoyed the tutorial. Some more stuff on fonts and different technique will be coming this year on the blog.

demo Source code

Demo Source Code

Making the box

Here’s the markup for the box.

We have created our box div which has the class “box-container“. Inside that we have created two child div’s one is with class “boxgloss“, which will add the gloss effect and other is with class “boxcontents” which will contain the contents of the box.

Styling the box

The CSS is the heart of this tutorial. Below are the CSS styles we will use to achieve the effect.

Explanation of classes:

.box-container: This is the basic container of the box. It controls the width of the box.

.boxgloss: This class controls the gloss on the box. You can tweak its opacity and its height. By default the color of gloss box is white, but that can also be changed. One thing to note here is that the width of the gloss box is 4px less that the box, this gives a nice border to the box. So if you change width of the container remember to make the width of the glossbox 4px less than the container.

.boxcontents: This is the inner container of the box which contains the contents of the box. It has a margin of 20px to give the effect of the colored border. It can be tweaked to reduce the border effect as per need.

This is how the box looks now.

We see that there is no gloss there on the box nor color. So lets do that in the next step.

Adding color to the box:

With these main three classes we have used few subclasses to change colors and borders of the box. We are using the multiple classes technique explained earlier. You can visit our article on it “Using Multiple Classes with CSS“.

.bg-black: This class adds the background color to the box.  We are using other such classes to make different colors as seen in the demo. The outer box needs a background color so that the gloss is visible on top of it.

.brd-black: This class adds a border of 2px to the outer container.

This is our finished box after adding all the classes.

Note: We are using a similar pattern for all the color and border CSS styles.  Text before the hyphen ” – ” identifies the property and text after hyphen indicates color.

Result and Conclusion

That’s all folks! You can see how easily we created a glossybox to hold some special contents of our html. It can contain any type of data as shown in the demo here.

Demo Source Code

Exit popup’s can be useful to grab attention of a user while he is about to leave. They are popup windows either external windows or a window that will pop right inside the page. They can help you sell products or to make free offers on your product and services etc.

So here’s the demo of what we will be building.

Demo Source Code

Step 1

Setting up the markup: Markup for this is not to complicated. We just an HTML page with some basic text contents. Next we will write up the popup box markup.

Step 2

The Popup Box: Here’s the markup for the popup box.  We will be placing the box out of our page contents right above the body tag.

Important thing to note in the markup is that you have to give it an ID of “exit_popup” to work with the script, else the popup wont work.

Step 3

Styling the Popup Box: Below are the CSS styles for the popup.

Description of Styles

#simplemodal-overlay – This selector controls the color of the semi-transparent page background. By default it is set to black but you can you use any color of choice.

#simplemodal-container – This selector is the basic container of the exit pop.

#simplemodal-container a.modalCloseImg – This selector makes the close button on the top left corner of the exit pop.

#simplemodal-container #basicModalContent – This selector controls the basic alignment of the content inside the exit pop container.

Step 4

The Magic Script: Now to get the effect we are going to use a JavaScript code library called jquery. Jquery is a much more bigger thing and we can make a lot of awesome effects using it, but that is out of scope of this tutorial. For now we will focus on popping the exit window. So first thing we are going to include the JavaScript files.

jquery.js – This is the very famous javascript and ajax library used extensively on the world wide web. Its important to load it first up before anyother scripts so that the library function are available to the other scripts.

exitpop.js – This is the exit popup script which renders the popup effect.

popuptrigger.js – This is the switch which turn on the exit popup effect without this it wont work.

So we are done with the script part of the page. Short and sweet 3 lines of code which include the necessary scripts.

Step 5

Hiding the Box: Next thing we do is to hide the popup box which is showing right now on the page.

The display:none hides the box, so that its invisible initially when page loads and pops when user tries to exit the page.

Ok now as the box is hidden, the popup should be working. It can be seen in action right here

Results

So this is how you create a simple popup box using three lines of code and some CSS styling. I hope the information was useful. Always open to suggestions and ideas.

Demo Source Code

Today we will see one very good feature of css often overlooked, which is using multiple classes. Below is what we will be creating.

Demo Source Code

Goal

Our goal is to enhance the look of the content using multiple classes.

Step 1

Setting up the markup: The markup we will be using will look something like this, then we dress it up step by step.

Step 2

The CSS: The CSS has all the classes we will be using. To use multiple classes on any element you need to write class names separated by a space for e.g. class=”class1 class2 class3″ like this.

Step 3

Applying classes: Now we will start to apply classes one by one  to enhance the content.

lets define our box first, the class ‘box’ gives the initial padding to the content.

Next is we to give it a border. The css we using has many styles already written in it so you can use any of them as per your need and mix and match styles to get new effects. For this example we will be using a plain solid border.

Next we define the width of the border. The current css has sizes upto 1px to 10 px, but you can always modify the css and add more border sizes. One thing to notice here is that classes are named according to the purpose they serve, for e.g. border width is given as “brd-10″ where brd signifies border and 10 signifies the pixel size. So this is the class for border size 10. This also helps in the long run to make better readable and understandable css.

Now that we have our basic box setup, we can also make the box curved by adding a corner radius class.

Note: The conventions used for names are the same through out the css, so brdrad means “border radius” and 15 means radius of 15 px. The corner radius classes only work in firefox safari & chrome browsers, as other browsers like IE, Opera dont support the class just as yet.

So already page has started to look good. Lets add some color to it. Adding two more classes to the container to color the border and a background color.

Ok so now the container is done. Lets add in dress up the contents.

Lets start with the headline. Its simple plain text. Lets change its font face.

Lets change its size.

Now for the color.

Lets start styling the paragraph text now. Lets put a font.

Now to make it a slight big.

Lets make it a little different color. Lets make it dark grey.

Now lets place the image a little better. Firstly we will float it to the left. To do that we just need to add one class ‘left’.

Lets put a border around the picture.

Lets make border a little wider.

Lets make the border little lighter so that its not so dominating.

Final Result

View Demo Source code

I have also stylized the second paragraph as the first one.  You can see the demo here. Download the source files from here.

Conclusion

Using Multiple classes reduces markup and gives you flexibility to use same class on many elements. So I hope the tutorial was helpful. We are open to your comments and suggestions it will help us deliver content which is up to date.

What is Art?

Art is basically a form of expression. Its a persons feelings making it created on a canvas. Art doesn’t necessarily have an audience.

What is Design?

Design is more of a subjective art ( As the modern terminology applied arts. ). Design can be taken as a extension of “Art”. Its a means of communication for a specific target audience using art forms, shapes, colors, typography ect.

Although these theories are big subjects on there own, below are few key differences in Art and Graphic design:

There are no rules:

Art is a free form to express emotions, while designs need to follow some rules to work. There are exceptions where you can follow rules of the design theory still break the shackles to reach creative freedom, but to do that you have to be exceptionally good at your art.  Only a great artist can break rules and still create awesome graphics. So to design well you first need to draw well.

Audience Driven

Design is audience driven, its done with a specific audience in mind. While art is more of a personal feelings of an artist.

Communication

Design has a purpose of communication to an audience, while art not necessarily communicates always. Arts do show human emotions though.

Commerce

Design is done with the point of view of commerce in mind. While paintings are also sold, but its not necessarily for sale.

Surreal

These days Sur-realism is being used in some products but not necessarily. Sur-realism has a big realm in the fields of arts, almost all artist love to make things which don’t exists on the face of earth.

Limitations of  graphics design as comparison to arts

Often creating audience oriented graphics leads to limitations in graphics designers. They cant create things out of a particular frame. This thing can not come to you if you are an artist first than only a designer.

Conclusion

Art and design go hand in hand. Becoming a good artist will help in becoming a better designer and certainly it will be a big boost to once thinking capabilities.

Graphic Design

The category will feature tutorials, helpful information, tips and tricks and updates from the world on graphics design.

HTML / CSS

This category will feature tutorials on HTML and css technologies, css tricks, layouts and other cool things.

So stay in touch cause its a start of an exciting journey.