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.

The Internet Minute by Intel

This info-graphic shows what happens in World wide web within a minutes. Cool stuff from Intel

Run Magento Indexer From Command Line

In some situation when you want to re-index Magento catalog you will get an error message or reindex process will be broken or processing..This problem is appearing when you have a lot of products in database and limited server resource. You can try to reindex from command line or shell.

Step 01: loginto your server using ssh.

Step 02: goto your magento installed folder

 cd /your-magento-path 

Step 03: type below command to index all

 php shell/indexer.php --reindexall 

some extra options

* To check the status

 php  shell/indexer.php --status 

* To get information

 php  shell/indexer.php info 

* To see other available options

 php -f shell/indexer.php help 

That’s all for now…

Simple ways to get magento base URLs

Hi All, most of the time we need to get magento base URL on template files. so there are several ways to do that. Here is the one of best way to use that on template files.

Option 01:

<?php echo $this->getUrl('') ?>

Returns : http://www.magento.lk/

Option 02:

<?php </code><code>echo</code> <code>Mage::getBaseUrl(); ?>

Returns : http://www.magento.lk/

Option 03:

<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>

Returns : http://www.magento.lk/

Option 04: for static blocks

 </code><a href="{{store url=""}}">Link to Base URL</a><code>

Returns : http://www.magento.lk/

If you have any issue, please comment...

Trick 01-How To Change The Designs Color Using Hue/Saturation

Howdy my design partners. I’m going to give you out a simple trick that comes really handy sometimes. Sometimes when we are designing something, we have to get some stuff from internet and sometimes we do find exactly what we want but with a different colour. That really freaks us out sometime doesn’t it? Well we don’t have to worry about it that much, because from this trick I’m going to show you how to change designs colour using Hue/Saturation Option.

Load your image in to Photoshop. Make sure you select the layer you want to modify on your layer pallet. Get the Hue/saturation tool out by simple pressing Ctrl+U or just go to Image-Adjustment- Hue/saturation and play with the Hue and Saturations to bring out the colour you want. Pretty neat right? Hope this come in handy for you see ya again next time.

Hot keys for photoshop beginners

A :- path/direct selection tool
B :- brush/pencil tool
C :- crop tool
D :- Resets the color palette to black/white
E :- eraser tool
F :- Toggles the window view from normal, full screen, black screen
G :- bucket/gradient tool
H :- hand tool
I :- eyedropper/color sampler/measure tool
J :- healing brush/patch tool
K :- slice/slice select tool
L :- lasso/polygonal lasso/magnetic lasso tool
M :- rectangular marquee/elliptical marquee tool
N :- notes/audio annotation tool
O :- dodge/burn/sponge tool
P :- pen/freeform pen/add anchor point/delete anchor point/convert anchor tool
Q :- Enters quick mask mode
R :- blur/sharpen/smudge tool
S :- clone stamp/pattern stamp tool
T :- horizontal type/vertical type/horizontal type mask/vertical type mask tool
U :- rectangle/rounded rectangle/ellipse/polygon/line/custom shape tool
W :- wand tool
X :- Toggles the colors in the color palette
Y :- history brush/art history brush tool
Z :- zoom tool

CTRL+A :- Selects everything in the photo
CTRL+B :- Modify the color balance
CTRL+E :- Merges the selected layer with the layer below, or merges all linked layers
CTRL+F :- Applies last used Filter
CTRL+G :- Groups the selected layer with the layer below it
CTRL+I :- Inverts the layers colors
CTRL+J :- Duplicates the Selected Layer
CTRL+K :- “preferences” window
CTRL+L :- Let’s you modify the levels
CTRL+M :- Let’s you modify the curves
CTRL+N :- Opens a new document
CTRL+O :- “open document” windowCTRL+P : “print options” window
CTRL+Q :- Quits PhotoShop
CTRL+R :- Toggles the Ruler
CTRL+S :- “save as” window
CTRL+T :- free transform the current layer
CTRL+U :- hue/saturation
CTRL+V :- Pastes what is in the clipboard
CTRL+W :- Closes the Current project window
CTRL+X :- Cuts the selection from the page
CTRL+Y :- Toggles the Color modes
CTRL+Z :- Undo the last action
CTRL+SHIFT+B :- Applies auto-color
CTRL+SHIFT+D :- Reselects what was last selected
CTRL+SHIFT+E :- Merges all of the layers in you document
CTRL+SHIFT+F :- Modify your last made brush/pencil application
CTRL+SHIFT+K :- “color settings” window
CTRL+SHIFT+L :- Applies an auto-level
CTRL+SHIFT+M :- Loads Adobe ImageReady
CTRL+SHIFT+N :- Creates a new layer
CTRL+SHIFT+P :- “page setup” window
CTRL+SHIFT+S :- “save as” window

CTRL+ALT+B :- Brings up the “color balance” window
CTRL+ALT+E :- Copies the contents of the currently selected layer to the layer beneath it
CTRL+ALT+F :- Let’s you modify the settings of the last used filter
CTRL+ALT+G :- Groups with previous
CTRL+ALT+J :- Duplicates the layer, and allows you to rename while you are doing so
CTRL+ALT+T :- Let’s you free-tranform the currently selected layer, once your transform has been made and creates a new layer with the changes you made
CTRL+ALT+X :- “Extract” window
CTRL+ALT+Z :- Moves back in the history. (can be really useful to find the mistakes)

CTRL+SHIFT+ALT+E : Takes the currently selected layer
CTRL+SHIFT+ALT+L : Auto-contrast
CTRL+SHIFT+ALT+N : Creates a new layer
CTRL+SHIFT+ALT+O : Opens up the “File Browser” palette
CTRL+SHIFT+ALT+P : Print
CTRL+SHIFT+ALT+S : “save for web” window
CTRL+SHIFT+ALT+X : “pattern makers” filter window

Tip 02-Navigating In Zoom

Greetings my fellow bloggers. ya that’s right I’m back with a new tip and this is about navigating around while you are on zoom.

Sometimes when we are working on a delicate design. we got to zoom in really close to make sure we do it right.when we do that we have to navigate around to go through our design because, when we zoom, our workspace window does not hold in the full capacity of our image.It normally shows the zoomed area so when we have to go somewhere else in the canvas what we do ? move around using scroll bar?  Or navigating around using the navigator tool? well that’s the normal way. Now I’m going to tell you a really cool and easy way. While you are zoomed on to your canvas press and hold the space key on your keyboard and while you are doing that hold left click and drag the cursor around to glide through your design cool right? In other words Space+left-click and drag. If you want a really cool gliding action drag and let go the left click. awesome isn’t it? So there you go have fun.

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 .