CSS Tricks – Image roll over using CSS Sprites

CSS sprites is a technique to create a single image file that contains all the images laid out in a grid, requiring only a single image and only a single server call.

There are lots of advantages of using sprites.

• Decrease the number of HTTP requests made for image resources referenced by our site.
• Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
• No java script needed, only CSS.

For this tutorial we are going to use the following image to implement our rollover image. Our image is consists of same two images with grayscale and color. Resolution of each image is 200 x 200 px.

What we are going to do?

Initially we can display only gray scale area of our image. As we mouse over the image it changes to the color image.

How we are going to do?

HTML

Simply add following html code to your editor.

<a href="http://www.mclanka.com"> </a>

This is just a link with a class called logo-link.

CSS

Now following styles CSS styles are applied to our logo-link class as follows.

.logo-link

{

width:200px;

height:200px;

text-decoration:none;

display:block;

background-image:url(logo.jpg);

background-position:197px -1px;

}

.logo-link:hover { background-position:0 0; }

As you can see, the background-position CSS property does the trick here.

here is the demo example what we have done.

Create Simple SlideShow Using Jquery and CSS Tricks

What We are going to do ?

before we are going further , let’s take a look the demo example of our task.

In Present Web World, Image slide-shows, Image galleries are much useful part added by web developers and designers for archiving good looking features to their websites. Today we are going to build simple Image slide-show Using old but gold web technology CSS, Ugly HTML and amazing Jquery Library.

Step by Step explanation of what we are going to do

1. Create slider outer block.

HTML

<div id=”slider”></div>

CSS

div#slider{

width:500px;

height:300px;

margin: auto;

}

applying above css to our block, it will be covert with 500px width and 300px height.

    2.Create slider mask.

Suppose our Slider show consists of 5 images with 500px width and 300px height. Then our slider mask should be 5 times of width when comparing with outer block. Our slider mask then should be put inside the outer block.

HTML

<div id=’slider’> <!-- outer slider  -->

<div id=’slider-mask’> </div> <!-- slider mask div -- >

</div>

Now what happened is, our outer block will be take image slider mask width ( 500 x 5 ==2500px). But we have to keep original width for the outer block.

Here comes into play CSS to achieve our purpose.

If we can hide this overflow width we can succeed. Yes we can do that. Lets modify our CSS for the outer block.

CSS

div#slider{

Width:500px;

Height:300px;

<strong>Overflow :hidden;</strong>

}

Using overflow property and related hidden value, We have done this. overflow :hidden will hide both overflowed width and height from its original width and height.

Now our slider mask block will stay with its original height and width inside outer block.but we only can see its one five from its original width.

CSS

div#slider-mask{

width: 500%; /* set width as five time of outer block */

height: 100%; /*set same size of the outer block */

}

   3. Create slider Item blocks.

Now we can create 5 blocks for our 5 images inside the slider mask. As mentioned earlier our images will be the same dimensions of the outer slider. Then we can create same slider item block with the same dimensions of a image.

Lets do that.

HTML

Since Originally div element are block level elements and they assort them top to bottom themselves. But what we need to do here is float them as left to right. Lets continue our works.

CSS

div.slider-item{

width: 20%; /*set same outer block width.since our slider item block is inside the mask we need to get one five times from slider mask width */

height: 100% /*same slider mask width. This is the same width of outer block */

position:relative ;

<strong>float:left; /*this will float our slider images left to right. */</strong>

}

Lets look at slider item CSS again. You can see that we have added relative value to position css property. This property will be helpful to animate our slide-show in latter Jquery part.

  4.adding images to each slider item.

Now we can put our 5 images inside slider items.

HTML

<div id="slider"> <!-- outer slider -->

<div id="slider-mask">

<div class="slider-item">

<img src="./images/slider-image1.png" alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image2.png"  alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image3.png" alt=""/>

</div>

<div class="slider-item">

<img src="./images/slider-image4.png" alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image5.png" alt=""/>

</div>

</div> <!--slider mask div -- >

</div>

   5.Asking Jquery help

Before animating our slider we need to load jquery library and put them inside our header tags.

<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

Here’s the code to link to Google’s jQuery repository. It grabs the latest jQuery version.

We are now creating JavaScript function for animating our slider.>

<script type="text/javascript">// <![CDATA[

var n=0;

function slideShow(){

id=n%5+1;

leftPos=(1-parseInt(id))*500+"px";

$("div.slider-item").animate({ left:leftPos},1500);

n=n+1;

s=setTimeout("slideShow()",3000);

}

// ]]></script>

Explaining above funciton line by line.

• var n =0;   We set 0 as the initial value to the JavaScript variable called n.

• id=n%5+1;    Get the reminder value by solving n divided by 5 and assign reminder value to the js variable called id. Here 5 is no of images of our slide-show. Initially this will be 1 since n=0 .

• leftPos=(1-id)*500+”px”;  This equation initially will set to the (1-1)*500 = 0 and adding string “px” to the computed value. Final value is assigned to js variable called leftPos. Here 400 is the image width/outer block width of our slider.Initially leftPos value will be 0px.

• $(“div.slider-item”).animate({ left:leftPos},1500);   This is how we are animating our slider. We wrap slider elements with class slider –element and push all of them to 500px left side direction from their original position within one and half seconds. we are doing it by changing left css property of slider item. We couldn’t apply left property unless we set their position as relative, absolute or fixed. But we have done it in our one of previous steps. Got it…
  Initially left property is set to 0px. Therefore slider items will be pushed to left from their initial positions.

• n=n+1;   Incrementing the n variable from 1.

• s=setTimeout(“slideShow()”,3000);    This will be the nicest part in our function. SetTimeOut function is the predefined js function and it can be used to called another js function once for the specified time period as a continuous loop unless we advice it to stop looping.Here we called our same function in every 3 second. For the second time our function called by the setTimeout function variable n will set as 1.If n==1Then id will be assign as 2 and leftPos will be -400px and slider item will position -500 px to left from their original position. Now 1^st slider item disappear  and 2^nd slider item will be comes to the stage.
  if n==2    Then id will be assign as 3 and leftPos will be -1000px and slider item will position -1000 px to left from their original position. Now 1^st ,2^nd slider items will disappear and 3^rd slider item will be comes to the stage.
  If n==3   Then id will be assign as 4 and leftPos will be -1500px and slider item will position -1500 px to left from their original position. Now 1^st ,2^nd and 3^rd slider items will disappear and 4^th slider item will be comes to the stage.
  If n==4     Then id will be assign as 5 and leftPos will be -2000px and slider item will position -2000px to left from their original position. Now 1^st ,2^nd and 3^rd and 4^th slider items will disappear and 5^th slider item will be comes to the stage.
  
  if n==5Then id will be assign as 1 and leftPos will be 0px and slider items will position 0px again and get their original position again. This will again show the 1^stslider in the stage and others are hidden by the outer slider.You can see that this will be continuously happened since id value only change 1-5 with respect to the n.

    5.Final Step.

We have almost done everything. Only one step away. Yet our slider show will not run as we expected . Our function will not automatically run as our code executed inside web browser. For automatically execute our slider function we need to call our function inside the jquery document.ready function.

 
<script type='text/javascript'>
<pre><strong>$(document).ready(function() { slideShow });</strong></pre>
var n=0;

function slideShow(){

id=n%5+1;

leftPos=(1-parseInt(id))*500+"px";

$("div.slider-item").animate({ left:leftPos},1500);

n=n+1;

s=setTimeout("slideShow()",3000);

}

</script>
okay...now you are done....  
download source code from here
 
						
		

How to create a clean and neat add to cart button

Hey my blogger pals hope ya’ll doing good. Im going to teach ya guys how to create add to cart button today. This can be really handy for e commerce designers. So let’s get started.

Step 01

First thing first, open up our favorite Photoshop and create a new document. Size is totally up to you I’m using a 800 X 600 px to give you a good look. When you are done with that take the rounded rectangle tool out (U) and draw rounded rectangle to match your button size and make sure u have the black color selected. Something like this

 After you get that part done you have to drop the layer fill of that rounded rectangle down to 7% just like this

Now you got something like this

Step 02

Time to create the button base for our add to cart button. Take out the rounded rectangle tool out again and draw a rounded rectangle inside the last one we drew. Color is totally up to you. You can use any light color as I’m using (a7cf5f) here. If you got that right you should have something like this.

Time to add the effects to our button base so our button look neat and awesome. In order to do that you have to take out the blending options of our base layer by simply double clicking on it on the layer pallet or just right click and go to blending options. When you get the blending options out apply the following effects to it.

 Now you got yourself a nice and clean button like this

Step 03

Time to type in our text. Take out the typing tool out (T) and type “Add to cart”. Just make sure you use a nice bold font or not. Its totally up to you. Make sure you keep it to the left because we need some space on the right side. Make sure you use the white color. Now you should get something looks like this.

 Time to get some effects to our text. Same ways like the last time take out the blending option and apply these following effects.

 Step 04

Time to create separators for the amount. For that take out the rectangle tool out (U) and draw a small rectangle like this don’t worry about the color we are going to apply a gradient to it.

Now apply these following effects to it

 Just to make the separator look cool we are going to draw another rectangle like this

 After you get that apply these following effects to it

Step 05

It’s time to finish our button with the typing in the price. Select a dark green color to match out button as I’m using (678338) here. Just type in the amount you want to put there. Something like this

 So there you go we created a nice add to cart button.

Step 06

 Well we are creating a button so it should have a hover also. It’s pretty simple you just have to do some changes to our previous button base. Here are the following changes

 There you go, here are the results

Tip 01-Duplicating layers

Hey all our  bloggers I’m going to bring you some useful and cool tips and tricks in Photoshop here’s the starter

This is a my first tip for you guys and its about duplicating layers. well how do we duplicate a layer? most of us will right click on the layer and click the duplicate layer button or some one who knows around hotkeys will press Alt+Ctrl+J. well you don’t have to really, just select the layer you want to duplicate and press and hold Alt key and drag the cursor while are holding the left click.In other words Alt+Left Click and drag. that’s it this comes really handy when you have to duplicate multiply times .

CSS Box Model

Most HTML elements (ex-div,a etc..) can be valued as boxes. In CSS, the label “box model” is used for the design and layout of the website. The CSS box model is basically a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model enable us to insert a border around elements and space elements relative to other elements.

CSS box model illustration

Explanation of the different parts

Text shadow in CSS

In our CSS file, add the following to the element we wish to target:

text-shadow: -1px 1px #FEE3A9

• The first value moves our text shadow horizontally on the x axis.
• Negative figures move it to the left of the text, positive figures to the right.
•  The second value moves our text shadow vertically on the y axis.
•  Negative figures move it above the original text and positive figures move the shadow below.
• The 6 digit code (hex value) sets the color.

Simplest Javascript Photo Gallery

In this tutorial, I’m going to explain the way you can create a simple photo gallery which automatically change using java script.

What you have to do is,

1. Create a HTML file and introduce one of the images selected with the “photo-gal” id (set the src, width and height attributes corresponding to your own images)

<img src=”images/gallery1.jpg” id=”photo-gal” width=”420″ height=”260″>

1. Now I’m going create a JavaScript function that will automatically change the images at one second interval.
   Put this code in the head section of your HTML document

<script type="text/javascript">
var n=0;
var s;
function photoGallery(){

if (n%5==0){
document.getElementById('photo-gal').src = " images/photo1.jpg ";
}
if (n%5==1){
document.getElementById('photo-gal').src = " images/photo2.jpg ";
}
if (n%5==2){
document.getElementById('photo-gal').src = " images/photo3.jpg ";
}
if (n%5==3){
document.getElementById('photo-gal').src = " images/photo4.jpg ";
}
if (n%5==4){
document.getElementById('photo-gal').src = " images/photo5.jpg ";
}
n=n+1;
s=setTimeout("photoGallery()",1000);
}
</script>

We can use here the n (initially having 0 values) variable which is incremented every one second. We use the getElementById method (which returns the object with the “photo-gal” id ) of the document object (that represents the entire HTML page).
Depending of the division remainder ( JavaScript modulus operator: c%5) it is chosen the picture to be displayed.

*In the last line of the script it is used the setTimeout() method for calling the photoGallery() function each 1000 miliseconds (that means 1 second).

1. Now just use the onLoad Event Handler and call the photoGallery() function from the body.

<body onLoad="photoGallery()">

DEMO OF SIMPLE JAVASCRIPT PHOTO GALLERY

Additional Note:

setTimeout Function in java script

setTimeout Function is one of nice and powerfull function in java script. It accepts two parametes.

but In this post, I guess it’s better giving you a nice post of this function rathar i explain it. Please just go to this link and enjoy with it.

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Making your web pages load faster

We have seen web sites with a fairly minimalistic design and without large graphics but yet loads very slowly. The best example may be the Colombo stock exchange web site.

The reason behind this can be two different factors,

1. Problems with the hosting sever

2. Pages are not optimized well.

Although the problem number one can be a common culprit most of the time it is number 2. By simply putting a few hours of work one can easily optimize web page loading times and make web sites more usable to users.  The most important thing is to do this you don’t have to change the way you you build/design web pages. Only doing certain things an bit different and later adding some external tricks. Here I’m not going to go into the technical details. I’ll list out the things that can be done to speed up a web page loading time.

1. Optimize images
   • Use save for web in Photoshop or something similar, the thing is raw images contains colors that the image is not using so they are taking unnecessary space on disk. In optimizing we apply some form of compression so only the colors that is really required to show the image goes in to the file
2. Standard code
   • Oh boy this helps, try to validate your XHTML code using the w3c validation service. You may find it a headache at first but it does help to render your page in different browsers correctly. (not 100%) Alos helps Search engine spiders
3. Less HTTP requests
   • Http requests are requests that your browser sends to the server every time it is requesting a page from the server. Imaging you have one web page with 3 large images. On the first request the page html will come from the server. Then the browser goes through the html code to render it on your screen only to find out that there are 3 links to external resources (in this case images) and it will have to send 3 more requests to get those images to you. So in total 4 requests. Most browsers use 2 parallel requests at any given time. So if you combine 2 images, then it will fetch these images at one go. This is where CSS sprites come in handy.
   • CSS sprites is a technique where we can load a single image at once and show a specific location on that image at a certain place and mask the other  areas. So if we have lots of navigation icons or small images everywhere we can combine all those to one image and use CSS to show only the images that we want to come up in a particular location in a web page.
   • Minify JavaScript – Just as with images raw JS files contains lots of white-space and other non related characters that are not required to run the particular script. So using a minify service your can easily remove this unwanted characters and reduce the file size drastically. Too much minification can lead to code not being readable. If possible move the JS codes, linked files to bottom of the page.
   • Minify and Combine CSS – If we have several CSS files linked to a certain page go ahead and get them all to a single css file. This will save you lots of HTTP requests. Also minify the final CSS.
4. Use a CDN
   • Servers have a hard time serving up large image files, video files to the client. Also sometimes these large data packets has to travel across the globe before arriving in your desktop. So by using a CDN (Content delivery network) these type of files can be dispersed to several locations in the world so when someone requests that file the location nearest to them will jump in and serve the image. This will give relief to the original server from that burden. Remember LAN is always faster that WAN. Same concept here.
5. Use caching
   • Popular CMSs like WordPress, Joomla and some ecommerce softwares allows caching. Example if a certain php/asp/jsp page gets processed more often that other server side script then the server will keep a cached copy of that page so for any new requests it wont have to re process it again.
   • Also we can force the client browser to cache the page for us. By using a E-tags we can tell the client browser to check for a local copy of the page before requesting it again from the server. This is sometimes not good because the actual file in the server might be changed and the client don’t know anything about it.

6. Use compression
   • If you are using the apache web server with .htaccess then there is a possibility to enable Gzip or Deflate compression. This will compress (zip) your web site files (mainly images, css, JS and html) before arriving at your browser. So the actually size of the web page is reduced. However your browser has to unzip the data before throwing them to the monitor.

So by following these tips we can reduce the page load time. we can benchmark our performance by using something like yslow from yahoo. This tool will come in handy and guide you through a series of things you can do to optimize your page.

As I said in the beginning this is not a technical doc. So please Google the techniques that are mentioned here on how to implement them.

Hope anyone will find this helpfull.

Amazing Web Design And Style Which Will Supply Essentially The Most Outcomes

To build your brand, attract web site readers and make a terrific impression you should acknowledge how important your web page design actually is. Even though you can find all kinds of factors into regardless of whether or not your website will succeed, your website style is incredibly important. So what ought to you do to make sure that your web design is excellent? Let’s look into a few of the components that you simply shouldn’t ignore. No matter whether you would like to design a keyword softwares connected website or any other web site, it is essential that you concentrate on being specialist.

Good and Great Graphics: Inconsistency is bad; be sure to make all of your graphics the right sizes and definitions. Doing this allows you to completely optimize the design of your website so that it performs well and is better than the others out there. The truth is that it is easier to load pages that have good and consistent graphics. When your graphics are good your website is good and that helps it work perfectly no matter what browser is viewing it. Images that are properly sized will reduce the web browser workload and enhance the overall loading time.

Each of your webpages should consist of a header where you have the link that goes to your site’s homepage. There are a bunch of different ways to get this done, but it has to be obvious that it is the link back to the main page. Plus you do need to ensure that all of your pages have the homepage link on it. You always want to be reliable and do things the same way, and that includes using a format or link template for all your pages. This has turned into a web standard, as most of the web users now by default expect to return back to the main page of the website by clicking on the logo on the top left corner. For instance, let’s say you happen to be creating a web site about traffic travis bonus, you should guarantee that it not merely looks excellent but is also user friendly.

Of course when the site is completed, be sure to go through the entire site and make sure everything works properly. Any type of upgrade or mod, mainly large ones, have the potential to cause problems; so be sure to verify all is still OK. So even if you make any minor changes to your site’s design, you should make sure you test it out so that you don’t have to face any embarrassing situation in front of your visitors.

The main thing to remember when designing your site is that people who visit will be reacting to the entire site, but this is composed of lots of smaller parts, so you should take the time to look at everything you’re doing and see if it can be improved or made more user-friendly. Go ahead and apply these tips to create a skilled keyword professional research associated web site of yours.

Deciding Upon An Successful Web Page Colour Combination

An aesthetically pleasing colour scheme can make or break your web page if you want to earn big affiliate profits.  Right after all, in advertising, colour accounts for 60% of advertisement’s acceptance or rejection. Therefore, colour plays a pivotal role in determining no matter whether or not a possible customer will select to conduct small business with your firm.  A web designer wants to make sure that all of your website’s colours work in harmony, even though keeping the client’s identity consistent with other marketing efforts.

Fast Rules of Thumb

•Stick to three to 5 colours when planning a web page

•When in doubt, use white for the background colour, and black for the text colour

Employing Your Company’s Logo Colours

If your income instruments provider already has a logo created by a expert – wonderful! This will be the best starting point for choosing your website’s colour combination. You may pick to use the precise colours found within your logo, or even add some complimentary colours.  But, it really is essential not to stray too far from your logo’s colour scheme as a way to maintain your company’s identity consistent.

Colour Defines Mood

The colours of your web page are vital mainly because they can elicit various emotions from your visitors.  Colours can make us happy, excited, angry or sad.  Below is a list of colours together with the corresponding moods which they evoke:

Warm Colors

Red: aggressiveness, passion, strength, vitality Pink: femininity, innocence, softness, wellness Orange: enjoyable, cheeriness, warm exuberance Yellow: positive thinking, sunshine, cowardice

Cool Colors

Green: tranquility, wellness, freshness Blue: authority, dignity, security, faithfulness

Purple: sophistication, spirituality, costliness, royalty, mystery

Neutral Colors

Brown: utility, earthiness, woodiness, subtle richness White: purity, truthfulness, being contemporary and refined Gray: somberness, authority, practicality, corporate mentality Black: seriousness, distinctiveness, boldness, becoming classic

Deciding upon a Color Scheme

When you recognize the colours and their connotations, the next step is to select a colour scheme for your web site.  Below is list of distinctive types of colour combinations:

Monochromatic colour combinations use a single color.  Variations in lightness of the selected colour can be used to develop the sense of various colours.  Monochromatic colors go nicely together, producing a soothing impact, and are very effortless on the eyes.  The drawback nonetheless, is that, it is often challenging to highlight probably the most critical elements on your instant affiliate paydays web page.

Analogous color schemes use colours which are related, but not the identical, to produce visually appealing combinations.  Picking out this type of colour scheme is accomplished by picking colours which are close to each other on the colour wheel.  For instance, a selection of blues and purples, or reds and oranges would make an excellent analogous mixture.  One colour need to be picked as the dominant colour though the others are employed as accents.

Complementary (or contrasting) color schemes are comprised of 2 colours which are opposite one another on the color wheel.  This mixture is most appealing when a warm along with a cool colour are utilised.  As an example, red with green or blue function well as contrasting colours.  Employing 1 colour for your background, and its complementary color to highlight key elements will provide you with colour dominance and colour contrast. One word of caution: it truly is difficult for the human eye to focus on contrasting colours at the exact same time. Consequently, it is most effective to prevent employing powerful contrasts for background and text colours.