CSSReflex » Tutorial

How To Create a Slick Glossy Navigation – PART 2

Jay Pick — Thu, 21 Jul 2011 12:29:34 +0000

If you guys read part 1, you’ll now know exactly how to design a slick, glossy navigation for your website design. In this second tutorial, I’m going to show you how to slice your design up, create your sprites and code your navigation up using clean HTML and CSS3.

Before we look at any code, we’ll start by creating our navigation sprite. If you’re not familiar with using CSS sprites don’t fret, as I will explain how they work and also why they are a more efficient than loading separate images for each link hover.

But first, open up your .psd from last time. For the purpose of this tutorial, we’re going to create a ‘normal’ state and a ‘hover’ state for our sprite. You could also create ‘active’ and ‘down’ states but for simplicity, I’ll stick to two.

Select the navigation (in it’s entirety) and duplicate it, placing the duplicated version below the original.

The top navigation will be our ‘normal’ state and version below will become our ‘hover’ state.

Remove the two navigation bars. Now we’re going to tighten everything and remove any unnecessary white space from between the links. Use the Guides to get all of your links pixel perfect.

When you’re done, you should have something that looks like this:

Next, turn off the background. Crop it down and save as a .png with transparency (unlucky IE6). I’ve called it nav_sprite.png. Save out your navigation bar out separately as a transparent .png too. I’ve called mine nav_bar.png. Place these into a folder called images on your site root.

That’s pretty much it for Photoshop. Next we’ll head over to Dreamweaver (or your favourite text editor).

You’ll first of all need to set up your navigation in a


Home
About
Web Design
Contact

Next the CSS. The sprite works using background-position for each specific link. By placing the links tightly together as we’ve done, we can work out the exact position of each link (to the pixel) using the length of each link. So for example, our Home link is 55px by 27px. The sprites position for Home will be 0 0. The sprites position for our About link will be -55px 0 and the position of the Web Design link will be -55 – the length of the About link and so on and so forth. You can see how this works in the CSS below:

ul#your_nav { width:792px; height:37px; background:url(images/nav_bar.png) no-repeat; position:relative; padding:8px 0 0 8px }
ul#your_nav li { float:left; list-style:none; margin-right:7px }
ul#your_nav li a { height:27px; display:block; text-indent:-99999px; background:url(images/nav_sprite.png) no-repeat }
ul#your_nav li#home a { background-position:0px 0px; width:55px; height:27px }
ul#your_nav li#home a:hover { background-position:0px -27px }
ul#your_nav li#about a { width:64px; background-position:-55px 0 }
ul#your_nav li#about a:hover { background-position:-55px -27px }
ul#your_nav li#web_design a { width:92px; background-position:-119px 0 }
ul#your_nav li#web_design a:hover { background-position:-119px -27px }
ul#your_nav li#contact a { width:73px; background-position:-211px 0 }
ul#your_nav li#contact a:hover { background-position:-211px -27px }

Our hovers will have a negative value in the Y axis. The height of each nav link is 27px so our hover position for each link will be –xx -27px. The text-indent positions the text off the screen. This allows search engines such as see our navigation as real text (in the source) and index our pages. The reason that this method is more efficient than using separate background images for each link; is primarily the faster loading times and fewer http requests. One background image equals one http request whereas multiple images will require several and thus slow page-loading times.

That’s pretty much it for creating a navigation for your web design. Check out the demo and download the entire source files (attached). This navigation could be further enhanced using jQuery to animate a fade on hover. Perhaps this will be covered in a 3rd part!

How To Create a Slick Glossy Navigation

Jay Pick — Mon, 18 Jul 2011 20:35:17 +0000

This web design tutorial will be split into two parts. Part one with show you how to create the graphical elements in Photoshop and in part two I will show you how to create the sprites and code the navigation using HTML and CSS.

1. Kick things off by opening up a new RBG Photoshop document. I’m using 900px by 275px.

2. Create a round-edged box 800px by 43px with a 6px corner radius.

3. Hit the blending options and add a linear gradient to the box.

Drag the left blender to 30% and give it a colour of #96c31d and the right to 90%with a colour of #add73e.

Whilst you’re in the Blending Options, add the following:

• Add an Inner Glow #aecf57 as below:

• Add a Drop Shadow #5e5e5e, settings as below:

• Add a 1px Inner Stroke #96c31d

Now you should have something that looks similar (if not identical) to this:

Now we’re going to add some more gloss…

4. Select the layer and duplicate it. Turn off the Blending Options and give the layera fill of #fff.
5. Drop the layer styles and give the layer a colour #ffffff. Then right-click the layer and Rasterize it.
6. Select the bottom half the rasterized layer using the Marquee tool and delete it. Then select the remaining half of the shape using the quick select tool.

7. Click the Quick Mask button and select the gradient tool (black to white gradient). Then select the masked area again using the Magic Wand

8. Select the Gradient tool and set the gradient from black to white.
9. Drag the gradient down vertically over the selected area

10. Click the Quick Mask button again and hit the Delete key. Drop the layer Opacity to 30%.

Now we have a nice, glossy navigation bar.

It’s time to add some links…

For this example, I’ve used the font type Bebas Neue, which you can download here.

11. Type out your links. I’ve used font size 18px, Crisp. You can use alt and the directional arrows on your keyboard to increase or decrease the spacing between two letters (should you wish to).
12. Create a new layer below your text layer and draw out a 4px round-edged box with the fill colour #789e12.
13. Add the following Layer styles to this shape:

• Drop shadow #5e7e1d

• Inner Glow #8eb81f

• Any finally a 1px Inner Stroke #aac956

This is the “hover” & “active” state of the link. For the default link state, we will again create 4px round-edged rectangles with a base colour of # 8cb71c and a 1px Inner Stroke # b5d267.

Next, give the colour #d5ee91 to the inactive links. Pop a drop shadow on there too. I went for 1px drop shadow #83b00b at -132. Play around with it, see what you think looks best.

The last thing to do is add the curved sheen to the active/ hover state of the button. To do this, I duplicated the layer, turned off the Layer styles and set a fill colour to #ffffff. Then I dropped the opacity of the layer to 15% and Rasterized it. Finally, using the Elliptical Marquee Tool, I dragged out an oval shape and deleted the selection.

The finished article…

So that’s it for the first of this two-part tutorial on how to create slick, glossy navigation. Not too time consuming or difficult but quite a nice, professional-looking result.

Be sure to check out part 2 coming very soon, which will go through how to slice your navigation up, create your sprites and code her up using HTML and CSS3 to create a stunning navigation for your web design.

Part 2

How To Make a Drop Shadow Changer With jQuery and CSS3

Ahmed Hussein — Wed, 24 Feb 2010 14:19:37 +0000

This is a Guest post by Ahmed Hussein, If you want to contribute feel free to contact me.

Today we have a very cool and step-by-step tutorial on how to make a CSS3 drop shadow changer using Ajax and little bit of PHP/MySQL. You may ask yourself why I’m using PHP/MySQL in a CSS3 tutorial? and the answer is simple, to save the settings and fetch again.

Demo
The Animation will only be viewable on Google Chrome and Safari 4+ because its based on WebKit.

What’s WebKit?

WebKit is an impressive open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine that’s used by Safari, Dashboard, Mail, and many other OS X applications. WebKit’s HTML and JavaScript code began as a branch of the KHML and KJS libraries from KDE. And it is currently supported by Google Chrome and Safari4+.

Here’s an image about what we will have at the end of this tutorial:

Now let’s begin by building the main layout:

The Body Styling

body{ margin:0; padding:0; }

We did nothing except, set the padding as zero as well as the margin.

The Success Message Styling

#success{ background: #c8ffb4; width:500px; height:50px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-weight:bold; padding-left:50px; font-family:Arial, Helvetica, sans-serif; color:#333; padding-top:25px; text-align:left; }

What we did up there is first, change the background to light green then, the width and the height next, the border radius and this is only available in CSS3, and basically what it does, that it’s making rounded corners, so if you’re going to increase the value of the radius, you will get more rounded corners. after that, nothing too fancy just basic stuff like font and padding.

The Saving Button

#save{ background: url(../images/save.png) no-repeat; height:60px; width: 171px; border:none; cursor:pointer; cursor:hand; outline:none; }

First, We set the background, height, width and border Then, we set the cursor to pointer to let the mouse change when it’s over the button, next set the cursor again to hand to change the mouse to hand icon. After that, change the outline to none, because a lot of browsers shows outlines on buttons.

The HTML5 Work

Drop Shadow Changer
























Posission: 

  


Blur: 

  
















Saving...

Here’s the funny part, First i start the HTML page as HTML5 page by adding the !DOCTYPE html tag, then inside the head you will see two scripts tags, one of them is for including the jQuery and the other one is for including the main JavaScirpt file that we will made. And I included the style file we’ve made earlier.

Now take a look inside the body tag, Fist thing you will see is the success message div and we will hide this using jQuery, Next take a break line and you will see the image div that we will do all the work on just give it image as id to apply the style also we will need the id in the jQuery work. after that, take a break line and you will see a normal table but look closer you will find the magic.

First, we will ad a little td with one word inside Position underneath it you going to find normal html input but the type is different this time and it called Range and that gives you a slider controller with numeric value from -0 to 100 as default. So we will give this range input an id as slide because we will need this id in the JavaScript work. Now make another td and put a little div inside it and give it “nums” as id actually i don’t know why i called it like that but it’s okay, and inside this div we will but the numeric value of the position range input, then close the first TR.

Next, start another TR and make couple of TDs and inside the first one you going to see Blur because the CSS3 drop shadow is very customizable so you can adjust the position, blur and even the color. After that, make another td and inside it we will make another “Range/Slider” input and give it blure as id and i know it’s blur not “blure” :P. Then, do the same as the last time by making a little div and give it an id of blures. Close the TR and The whole table and let’s do something new.

Now make a little div and give it load as id inside this div we will add loading image that i created at http://www.ajaxload.info , and “saving” word. and we will hide this div using jQuery and will show it when we press save.

Now just add normal button input but give it save as id to apply the style and we will need this in the JavaScript, too.
Now after doing all of this you’re done with the main layout. Now Let’s do the JavaScript work

The JavaScript Work

//----------------------------------------+ //Code by Ahmed Hussein For CssReflex.com | //Follow on Tiwtter @Valodes | //Check Blog @ http://www.zingyso.com/b | //----------------------------------------+ $(document).ready(function(){ var pos = $("#slide").val(); var blu = $("#blure").val(); $('#load').hide(); $("div#nums").html(pos); $("div#blures").html(blu); $("#success").hide(); $("#image").css({'-webkit-box-shadow': pos+"px "+pos+"px "+blu+"px "+"#666"}); $("#slide").change(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $("div#nums").html(num); $("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"}); }); $("#blure").change(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $("div#blures").html(blu); $("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"}); }); $('#save').click(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $.ajax({ url: "action.php", type: "POST", data: {pos: $("#slide").val(), blu: blu = $("#blure").val()}, success: function(data){ $("#success").html(data); $("#success").slideDown(400).delay(2000).slideUp(400); } }); }); $("#load").ajaxStart(function(){ $(this).show(); }); $("#load").ajaxSuccess(function(){ $(this).hide(); }); });

Let me explain what we are doing here, first of all this is jQuery not pure JavaScirpt. Now to start jQuery code you may do this inside “script” or inside normal .js page and this’s what i’m doing here.
At the start of any jQuery code you have to put the following code:

$(document).ready(function(){//Your code here });

replace “//your code here” with your own code, now:

var pos = $("#slide").val(); var blu = $("#blure").val();

Here we made two variables the first one “pos” = to the slide value, “#slide” is like document.getElementById but we replace all of this with just a little hash tag “#”. the second variable blu = to the blure val. just to know “.val()” is returning the value of an element.
$("div#nums").html(pos); $("div#blures").html(blu);

Now the first line here we changing what’s inside the div nums to html contents using the .html() function which is showing html elements normal without changing them to text. But you can show the contents as text by using .text() function.

$("#success").hide();

Now we just hid the success message using .hide() function.

$("#image").css({'-webkit-box-shadow': pos+"px "+pos+"px "+blu+"px "+"#666"});

Now i’m applying a css3 styling using .css function, and here’s how it works:
.css({“attributes”:”value”, “attributes2″:”value”, …}); so it’s just normal css but inside jQuery. But what i’m actually doing is i’m applying CSS3 drop shadow to the image using the default pos and blu values and they’re 50, so to do that i’m using the variables inside the function and i can do that just like that:
The normal css will be ‘-webkit-box-shadow’:’50px’, but we want to use the variables’ values so we will do it by adding plus signs between the words to separate them, i mean to make this work you have to write it like that:

css({'-webkit-box-shadow': variable+"normal text"+variable+"normal text"+variable+"normal text"})

So we put the normal text inside quote and separate between the different words and variables by plus sign.

The following code will be executed once you move the position slider:

$("#slide").change(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $("div#nums").html(num); $("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"}); });

Now by using .change() we saying if the value of this element changed do the following, so if the value of slide changed the code inside .change() will be executed.
inside the .change() we redefining the variables again, then, changeing the nums div content to make it change when you move the slider.
After that we apply css3 drop shadow to the image with the new positioning,

num+"px "+num+"px "+blu+"px "+"#666"

the first num+”px” and the second one just repositioning the shadow and the blu+”px ” is still the same and it points to the blur value and finally the #666 is the shadow color.

The following code will be executed once you move the blur slider:

$("#blure").change(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $("div#blures").html(blu); $("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"}); });

As you can see i’m doing the same thing but this time with the blure slider and the blures div.

The following code will be executed once you hit the save button:

$('#save').click(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $.ajax({ url: "action.php", type: "POST", data: {pos: $("#slide").val(), blu: blu = $("#blure").val()}, success: function(data){ $("#success").html(data); $("#success").slideDown(400).delay(2000).slideUp(400); } }); });

First, the .click() function is very simple it says, if you click on the element the following code will be executed.
Inside the .click() we redefining the variables again, then, starting ajax request using $.ajax({}) so let me explain this:
using $.ajax() you will be able to send HTTP request without reloading the page, you can send both POST or GET requests to any type is files PHP, ASP, etc…

And it work just like this:

url: “your action file”,

type: “post or get”,

data: {name: variable or "text value", name2: variable or "text value", name3: variable or "text value"},

success: could be function or alert or whatever you want, this will be shown in case the request is succeeded.

function(data){ $("#success").html(data); $("#success").slideDown(400).delay(2000).slideUp(400);}

This function shows the success message by slideDown then delay 2 seconds after that slideUp.

$("#load").ajaxStart(function(){ $(this).show(); }); $("#load").ajaxSuccess(function(){ $(this).hide(); });

Now we will show the load div once we send the request then hide it again once the request is done, using the $.ajaxStart() we will say when the request is sent show $(this) while $(this) stand for $(“load”). and using the $.ajaxSuccess() we will say when the request is send success message hide $(this) while $(this) stand for $(“load”).
And that’s it this is everything JavaScript

The PHP Work

The full code:
//---------------------------------------- //Code by Ahmed Hussein For CssReflex.com | //Follow on Tiwtter @Valodes | //Check Blog @ http://www.zingyso.com/b | //---------------------------------------- //Database connect $connect = mysql_connect("localhost", "root", "") or die(mysql_error()); //Connection user and pass $select = mysql_select_db("shadow", $connect); //Selecting the Database //Set Variables $pos = $_POST['pos']; //Position Value $blu = $_POST['blu']; //Blur Value //Insert data into database $Query = "INSERT INTO shad_set (`position`,`blur`) VALUES('".$pos."', '".$blu."')"; //The SQL Query $Insert= mysql_query($Query) or die(mysql_error()); //Insert to database echo "The new settings are saved!"; ?>

Explanation

First anything starts with “//” is a comment , and anything starts with “$” is a variable.
//Database connect $connect = mysql_connect("localhost", "root", "") or die(mysql_error()); //Connection user and pass $select = mysql_select_db("shadow", $connect); //Selecting the Database

mysql_connect is the database connection function and it’s separated to 3 parts and sometimes 4, (“Your Host — Usually localhost”, “Database UserName”, “Database Password”, “Database Port”)

mysql_select_db is the the database selector function and it’s separated to 2 parts, (“Database Name”, “Database Connection Link And this is the connecting variable”)

Now before i continue explaining the rest of the code let me show you how to make MySQL Database.

The MySQL Database

Go to your phpmyadmin and do the follow the instructions below:

Click save and you done, but let me explain, something the AUTO_INCREMENT for the id is to let it increase by itself without having to insert a value for it everytime.

Let’s continue:
$pos = $_POST['pos']; //Position Value $blu = $_POST['blu']; //Blur Value inside
Here you can see two variables first one $pos = to the post pos from the ajax request and the other one is $blu = to the post blu from the ajax request.
$Query = "INSERT INTO shad_set (`position`,`blur`) VALUES('".$pos."', '".$blu."')"; //The SQL Query $Insert= mysql_query($Query) or die(mysql_error()); //Insert to database echo "The new settings are saved!";
Here you can see two variables, too. the first one $Query = to the SQL query and inside it we saying ” insert the following data inside shade_set table into fields `position` and `blur` and the actual values are the variables $pos for position and $blu for blur”

Then using mysql_query() function we execute the $Query… Next after all of this print or echo message and this is the success message “The new settings are saved!”…

but to fetch the saved settings from the database you can do it this way:
//---------------------------------------- //Code by Ahmed Hussein For CssReflex.com | //Follow on Tiwtter @Valodes | //Check Blog @ http://www.zingyso.com/b | //---------------------------------------- //Database connect $connect = mysql_connect("localhost", "root", "") or die(mysql_error()); //Connection user and pass $select = mysql_select_db("shadow", $connect); //Selecting the Database //Insert data into database $Query = "SELECT * FROM shad_set WHERE id = '1'"; //The SQL Query $Insert= mysql_query($Query) or die(mysql_error()); //Insert to database $res = mysql_fetch_array($insert); $Pos = $res['pos']; $Blu = $res['blu']; mysql_close($connect); ?>
It’s the same thing about database connect, but the query is changed now and we are saying select all data from shad_set where the id field = 1 or whatever id you want to fetch.
Then $res = mysql_fetch_array($insert) which transform data from database to array.
$res['pos'] = the pos from the database and same for $res['blu'];

Now we’ve done everything… So now you have the drop down shadow changer with php/mysql saving option . Hope you enjoyed the tutorial. If you you have any questions, feel free to ask by commenting below.

SexyBookmarks v2 For Blogger

Naeem Noor — Fri, 21 Aug 2009 18:57:59 +0000

Sexybookmarks for Blogger v2

I being a blogger user for quite a long time, still love to give back to the community one way or other. This time again, I have tried to give back to the community by making the new version of Sexy Bookmarks compatible with blogger. The Sexy Bookmarks V1 was a huge hit and many folks are still using it. I feel really happy and thankful to all who supported me last time. Looking forward for same support this time also. Hope you like this new version.

You may be interested in these older posts
13 Magnificent Free WordPress Portfolio Themes
15 Free Awesome Social Bookmark Icons Sets
5 Essential Google Cheat Sheets Which Surely Will Come in Handy

Update: 27/Jan/2010

Preview

See the Demo Here

Now, Lets begin.

NOTE: !Before changing your template, don’t forget to backup your template and your widgets!

1. First, of course go to your template editor and tick the “Expand Widget Template”.
2. Put the following code before

And this one too,

3. Now Put the below code after



Share this on del.icio.us
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Reddit
Add this to Google Bookmarks
Tweet This!
Share this on Facebook
Share this on Mixx
Subscribe
Buzz up!
Share this on Linkedin
Submit this to DesignFloat
Share this on Technorati
Submit this to Script & Style
Post this to MySpace
Share this on Blinklist
Share this on FriendFeed
Seed this on Newsvine



 Widget by Css Reflex | TutZone

I no longer host the images on my server due to limited bandwidth please kindly upload the images on your own server and replace the links.
Mirror 1

For any query please reply here