vZhai: Info Sharing Blog

Warping Drop Shadows to Give Depth

Even though CSS3 has brought a lot to the table in regards to drop shadow effects, there are still plenty of reasons to use image alternatives. The drop shadows generated by CSS3 are relatively uniform, and don’t deviate much past size and transparency. In some cases, you might want to give a page some extra depth.

I ran into a similar situation in a recent client project, and decided to use a recent trend of warping drop shadows to help add some extra excitement to the page. You might have seen similar effects in other tutorials involving deleting a circular section, but this method will keep the edges from being too sharp. It also allows you to work with non-rectangular shapes because all points are editable in the warp tool’s grid.

Setting Up

Start a new Photoshop document. The size doesn’t matter because all of the elements will scale accordingly. I recommend changing the background color to something that will make a white box stand out, but not drown out a black shadow. We’ll use a light blue for the example. Draw up a white box and we’re ready to start on the shadow.

Before any shadows

Add the Shadow

You might be tempted to use blending options right now. Resist the urge, because we’re aiming for something much more distinct.

Start by making a new layer that is positioned between the background and content box from the previous step. On the new layer, draw a rectangle selection that is just slightly smaller than the width of the content box. Fill this area with black.

Fill selection with black

With the black rectangle layer selection go to Filter>Gaussian Blur and set the radius to 6 pixels.

Blurring the Shadow

Love the Warp Tool

Photoshop’s warp tool is wildly underrated. It’s good for much more than messing around with celebrity faces or other random attempts to doctor photos. It’s particular good at taking specific shapes and molding them into another shape without ruining the appearance. This point is exactly why we’ll use it to shape our new drop shadow.

With the shadow layer selected, head to Edit>Transform>Warp to bring up the warping grid. Use the handles on this control to give a curvature to the blurred rectangle. Feel free to shift the layer around to get the best positioning.

Warp grid in action

Once the shape is set, simply lower the layer’s opacity down to about 15% and you’ve got a finished shadow that simulates a subtle page curl. Nice work!

A warped drop shadow

Wrapping Up

There you have it, a drop shadow that gives content areas a feeling of “coming off the page” depth. As you might have guessed by now, this is a perfect footer background for content areas throughout the page. Not bad!

Light and Shadows – Feathering Gradients in Photoshop The Overview The Basics of Feathering and Getting Started So...
Quick Tip – Use Layer Masks to Erase in Photoshop We’ve all had to work with photos that need to...
Flexible Color Schemes in Layouts with RGBa This will be an experiment in transparency. CSS has come a long...

Posted in: Tutorial

Beautiful Slide Out Navigation Revised

Beautiful Slide Out Navigation Revised: "

After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone! Like Stefan Matei pointed out, it might be quite cute but we don?t want the user to hover over all options first, in order to see what menu items exit. So, I thought about labeling the menu items and making them stick out, so the user can always see what the navigation entails. Being in a horizontal position makes everything readable and when the user hovers over the label, the rest of the item with the icon will slide out.

Although this tutorial is related to the previous one, I will start again from scratch ? for the readers that are only interested in this new navigation.

Beautiful Slide Out Navigation Revised Web Site Demo Download

Posted in: Tutorial

Ajax Poll Script With PHP, MySQL & jQuery

Ajax Poll Script With PHP, MySQL & jQuery: "

In this tutorial, we'll be creating an Ajax Poll Script that displays the results with colored and animated lines using PHP, MySQL and jQuery.

The script has a pretty easy logic and can be implemented into any website quickly by simply calling a php function like getPoll(2) which brings the second poll.

The code has 3 parts: HTML, JavaScript (jQuery) and PHP. Let's start with the easiest one:

HTML

The HTML for the poll is generated within the PHP function which is usually nice as it is only a 1-line-code and doesn't create a visual pollution in the overall HTML.

<div id="pollWrap">
   <form name="pollForm" method="post" action="inc/functions.php?action=vote">
       <h3>Poll Question 1</h3>
       <ul>
           <li>
               <input name="pollAnswerID" id="pollRadioButton1" value="1" type="radio">
               Answer1 for Poll1
               <span id="pollAnswer1"></span>
   </li>
           <li class="pollChart pollChart1"></li>
           <li>
               <input name="pollAnswerID" id="pollRadioButton2" value="2" type="radio">
               Answer2 for Poll1
               <span id="pollAnswer2"></span>
           </li>
           <li class="pollChart pollChart2"></li>
       </ul>
       <input name="pollSubmit" id="pollSubmit" value="Vote" type="submit">
       <span id="pollMessage"></span>
       <img src="ajaxLoader.gif" alt="Ajax Loader" id="pollAjaxLoader">
   </form>
</div>

There is nothing original here. In one of the list items, we mention the answer and provide a unique ID for it which matches that answer's answerID in the database. For the other list item, we reserve it for the colored line, again by giving it the unique ID.

PHP

We first include our db connection file and handle the posted items from the Ajax requests

require("db.php");
//GETTING VARIABLES START
$action   = mysql_real_escape_string($_POST['action']);
$pollAnswerID = mysql_real_escape_string($_POST['pollAnswerID']);
//GETTING VARIABLES END

After that, create the function getPoll which simply loops through the database and creates the HTML for the poll mentioned above.

function getPoll($pollID){
 $query  = "SELECT * FROM polls LEFT JOIN pollAnswers ON polls.pollID = pollAnswers.pollID WHERE polls.pollID = " . $pollID . " ORDER By pollAnswerListing ASC";
 $result = mysql_query($query);
 //echo $query;jquery

 while($row = mysql_fetch_array($result, MYSQL_ASSOC))
 {
  $pollQuestion   = $row['pollQuestion'];
  $pollAnswerID   = $row['pollAnswerID'];
  $pollAnswerValue = $row['pollAnswerValue'];

  if ($pollStartHtml == '') {
   $pollStartHtml  = '<div id="pollWrap"><form name="pollForm" method="post" action="inc/functions.php?action=vote"><h3>' . $pollQuestion .'</h3><ul>';
   $pollEndHtml  = '</ul><input type="submit" name="pollSubmit" id="pollSubmit" value="Vote" /> <span id="pollMessage"></span><img src="ajaxLoader.gif" alt="Ajax Loader" id="pollAjaxLoader" /></form></div>';
  }
  $pollAnswersHtml = $pollAnswersHtml . '<li><input name="pollAnswerID" id="pollRadioButton' . $pollAnswerID . '" type="radio" value="' . $pollAnswerID . '" /> ' . $pollAnswerValue .'<span id="pollAnswer' . $pollAnswerID . '"></span></li>';
  $pollAnswersHtml = $pollAnswersHtml . '<li class="pollChart pollChart' . $pollAnswerID . '"></li>';
 }
 echo $pollStartHtml . $pollAnswersHtml . $pollEndHtml;
}

This getPollID function below is for easily getting the ID of the related polls by providing an answerID:

function getPollID($pollAnswerID){
 $query  = "SELECT pollID FROM pollAnswers WHERE pollAnswerID = ".$pollAnswerID." LIMIT 1";
 $result = mysql_query($query);
 $row = mysql_fetch_array($result);

 return $row['pollID'];
}

And, the getPollResults function which is kinda tricky but not that much.

When ran, it returns a string like: 1|13|#ffcc00-2|32|#00ff00-3|18|#cc0000-63" which the first number is the answerID, second is the points it has and third is the color for that answer's animated line.

The last number is the sum of all points for easily calculating percentages.

The string is parsed in the JavaScript side later on.

function getPollResults($pollID){
 $colorArray = array(1 => "#ffcc00", "#00ff00", "#cc0000", "#0066cc", "#ff0099", "#ffcc00", "#00ff00", "#cc0000", "#0066cc", "#ff0099");
 $colorCounter = 1;
 $query  = "SELECT pollAnswerID, pollAnswerPoints FROM pollAnswers WHERE pollID = ".$pollID."";
 $result = mysql_query($query);
 while($row = mysql_fetch_array($result))
 {
  if ($pollResults == "") {
   $pollResults = $row['pollAnswerID'] . "|" . $row['pollAnswerPoints'] . "|" . $colorArray[$colorCounter];
  } else {
   $pollResults = $pollResults . "-" . $row['pollAnswerID'] . "|" . $row['pollAnswerPoints'] . "|" . $colorArray[$colorCounter];
  }
  $colorCounter = $colorCounter + 1;
 }
 $query  = "SELECT SUM(pollAnswerPoints) FROM pollAnswers WHERE pollID = ".$pollID."";
 $result = mysql_query($query);
 $row = mysql_fetch_array( $result );
 $pollResults = $pollResults . "-" . $row['SUM(pollAnswerPoints)'];
 echo $pollResults;
}

The last PHP code is the voting part which also sets a cookie:

if ($action == "vote"){

 if (isset($_COOKIE["poll" . getPollID($pollAnswerID)])) {
  echo "voted";
 } else {
  $query  = "UPDATE pollAnswers SET pollAnswerPoints = pollAnswerPoints + 1 WHERE pollAnswerID = ".$pollAnswerID."";
  mysql_query($query) or die('Error, insert query failed');
  setcookie("poll" . getPollID($pollAnswerID), 1, time()+259200, "/", ".webresourcesdepot.com");
  getPollResults(1);
 }
}

jQuery (JavaScript)

It is only an Ajax request that posts the selected answer to the PHP code, gets the string in return, parses it and makes some show/hide tricks for displaying and hiding the messages or loaders.

Here it is:

$(document).ready(function() {  

 $("#pollAjaxLoader").hide(); //hide the ajax loader
 $("#pollMessage").hide(); //hide the ajax loader
 $("#pollSubmit").click(function() {
  var pollAnswerVal = $('input:radio[name=pollAnswerID]:checked').val();//Getting the value of a selected radio element.
  if ($('input:radio[name=pollAnswerID]:checked').length) {
   $("#pollAjaxLoader").show(); //show the ajax loader
   $.ajax({
    type: "POST",
    url: "inc/functions.php",
    data: { pollAnswerID: pollAnswerVal, action: "vote" },
    success: function(theResponse) {
     //the functions.php returns a response like "1|13|#ffcc00-2|32|#00ff00-3|18|#cc0000-63" which the first number is the answerID, second is the points it has and third is the color for that answer's graph. The last number is the sum of all points for easilt calculating percentages.
     if (theResponse == "voted") {
      $("#pollAjaxLoader").hide(); //hide the ajax loader
      $("#pollMessage").html("sorry, you already voted.").fadeTo("slow", 1);
     } else {
      var numberOfAnswers   = (theResponse).split("-").length-2;//calculate the number of answers
      var splittedResponse   = (theResponse).split("-");
      var pollAnswerTotalPoints  = splittedResponse[numberOfAnswers+1];

      for (i=0;i<=numberOfAnswers;i++)
      {
       var splittedAnswer   = (splittedResponse[i]).split("|");
       var pollAnswerID   = (splittedAnswer[0]);
       var pollAnswerPoints  = (splittedAnswer[1]);
       var pollAnswerColor  = (splittedAnswer[2]);
       var pollPercentage  = (100 * pollAnswerPoints / pollAnswerTotalPoints);
       $(".pollChart" + pollAnswerID).css("background-color",pollAnswerColor);
       $(".pollChart" + pollAnswerID).animate({width:pollPercentage + "%"});
       $("#pollAnswer" + pollAnswerID).html(" (" + Math.round(pollPercentage) + "% - " + pollAnswerPoints + " votes)");
       $("#pollRadioButton" + pollAnswerID).attr("disabled", "disabled"); //disable the radio buttons
      }
      $("#pollAjaxLoader").hide(); //hide the ajax loader again
      $("#pollSubmit").attr("disabled", "disabled"); //disable the submit button
     }
    }
   });
   return false;

  } else {
   $("#pollMessage").html("please select an answer.").fadeTo("slow", 1, function(){
    setTimeout(function() {
     $("#pollMessage").fadeOut("slow");
    }, 3000);
   });
   return false;
  }

 });

});

The JavaScript code is well-commented and is pretty self-explanatory. Don't let the number of lines afraid you, most of them are just the make-up.

That's all.

Special Downloads: Ajaxed Add-To-Basket Scenarios With jQuery And PHP Free Admin Template For Web Applications jQuery Dynamic Drag’n Drop ScheduledTweets

Advertisements: FindIcons.com – Ultimate Free Icon Search Engine Psd to Xhtml SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags: Mysql, Php

Posted in: jQuery Plugin,Tutorial

Free Wireframe Toolbar Icons for Interface GUI Designer

Free Wireframe Toolbar Icons for Interface GUI Designer: "

Free Wireframe Toolbar Icons is made for interface (gui) desginer. These icons can be used for wireframes and software mockups creation, websites and software applications toolbars and menus including iPhone and iPod apps. You’ll find a set of 8 cursors and 236 icons in black and white color versions. The icons include pagination arrows, ratings and voting controls, social interaction symbols file system and text editor actions.

The entire set totals 244 original icons optimized for 16×16 pixel size and available in 16×16, 32×32 and 48×48 pixel sizes. Royalty Free package includes vector icons in EPS and flash SWF formats for which you have full control to resize without loss of fidelity, color, and effects as you please.

Requirements: - Demo: http://www.gentleface.com/free_icon_set.html License: Creative Commons License

CSS3 Minimalistic Navigation Menu

CSS3 Minimalistic Navigation Menu: "

As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).

But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique.

So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

The XHTML

The menu is organized as an unordered list. This is the most suitable structure for a menu, as it provides an easy way to style the menu links and is semantically correct.

demo.html

<ul id="navigationMenu">
   <li>
     <a class="home" href="#">
           <span>Home</span>
       </a>
   </li>

   <li>
    <a class="about" href="#">
           <span>About</span>
       </a>
   </li>

   <li>
      <a class="services" href="#">
           <span>Services</span>
        </a>
   </li>

   <li>
    <a class="portfolio" href="#">
           <span>Portfolio</span>
       </a>
   </li>

   <li>
    <a class="contact" href="#">
           <span>Contact us</span>
       </a>
   </li>
</ul>

Inside each li we have a hyperlink with a span inside it. By default these spans are hidden, and are only shown when you hover over the link. Each link has a unique class name, which is used to give it a unique background and style the inner span, as you will see in a moment.

CSS3 Animated Navigation Menu

The CSS

Once we have the basic structure in place, we can now move to creating the fancy CSS3 effects and styling. This works even on browsers, which do not support CSS3 transition animations (all browsers except Chrome, Safari and Opera, at the moment of this writing) albeit with less glitter. The menu is even perfectly usable in browsers as old as IE6.

styles.css – Part 1

*{
 /* A universal CSS reset */
 margin:0;
 padding:0;
}

body{
 font-size:14px;
 color:#666;
 background:#111 no-repeat;

 /* CSS3 Radial Gradients */
 background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
 background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

 font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
 list-style:none;
 height:39px;
 padding:2px;
 width:40px;
}

For the styling of the body background, I first supplied a background color, which acts as a fallback, and then added two CSS3 radial gradients (for Firefox and Chrome/Safari respectfully) as background images. If the visitor’s browser does not support gradients, it will just ignore the rules and go with the plain background color.

You can see in the styles, that most of the rules are preceded by the id of the unordered list – #navigationMenu. This is to prevent collisions with the rest of your page styles, if you incorporate the menu into your site.

styles.css – Part 2

#navigationMenu span{
 /* Container properties */
 width:0;
 left:38px;
 padding:0;
 position:absolute;
 overflow:hidden;

 /* Text properties */
 font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
 font-size:18px;
 font-weight:bold;
 letter-spacing:0.6px;
 white-space:nowrap;
 line-height:39px;

 /* CSS3 Transition: */
 -webkit-transition: 0.25s;

 /* Future proofing (these do not work yet): */
 -moz-transition: 0.25s;
 transition: 0.25s;
}

#navigationMenu a{
 /* The background sprite: */
 background:url('img/navigation.jpg') no-repeat;

 height:39px;
 width:38px;
 display:block;
 position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
 text-decoration:none;

 /* CSS outer glow with the box-shadow property */
 -moz-box-shadow:0 0 5px #9ddff5;
 -webkit-box-shadow:0 0 5px #9ddff5;
 box-shadow:0 0 5px #9ddff5;
}

The CSS3 transition property is a really powerful one. It enables you to animate changes that occur on a element when a pseudo properties take effect. For example here, when the user moves their mouse over a navigation link, the :hover pseudo-property takes effect, showing the span which is otherwise hidden.

Without the definition of a transition property, this change is instantaneous. But with a transition we can animate it. Here we are telling the browser, that the duration of the animation is 250 milliseconds. You can optionally specify a list of specific properties to be animated instead of all of them.

Transitions are currently only supported in webkit based browsers (Safari and Chrome), but the next version of Firefox is also expected to support them, so we future-proof the script by specifying a -moz-transition.

The CSS3 Transition

styles.css – Part 3

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
 background-color:#7da315;
 color:#3d4f0c;
 text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
 background-color:#1e8bb4;
 color:#223a44;
 text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
 background-color:#c86c1f;
 color:#5a3517;
 text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
 background-color:#d0a525;
 color:#604e18;
 text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
 background-color:#af1e83;
 color:#460f35;
 text-shadow:1px 1px 0 #d244a6;
}

In the last part of the styling, we specify 5 different designs for the navigation links. All the background images for the links are contained inside a single sprite file. They have a normal and a hover state one under another. When a hover occurs, the background is offset to show the appropriate version of the background image.

A PSD file is included in the downloadable archive, so you can customize the images as much as you like.

With this our minimalistic CSS3 navigation menu is complete!

Conclusion

Sooner or later, we are going to have a quick access to powerful, hardware accelerated graphics, right in the browser. When this day comes, a whole new world will open to web developers, and we will come even closer to building rich internet applications, which behave exactly like native apps.

Till then, we have to make the best with what we have, and slowly start adopting CSS3 techniques into our work.

What do you think? How would you improve this navigation menu?

Posted in: Tutorial

How to Design a Clean Business Website with Photoshop

How to Design a Clean Business Website with Photoshop: "

The focus of this template is on a design agency that offers a range of web-based services. The primary aim of the page we’re designing, therefore, is to promote what the business does and what services they provide.

This is the first part of a tutorial on building a clean business website. This first part will focus on creating the design in Photoshop, and in the second part, will focus on converting the PSD outcome to a working XHTML template.

"Clean Business Website" Series

Part 1: How to Design a Clean Business Website with Photoshop
Part 2: How to Code a Clean Business Website Design (*coming soon)

Final Result

Here’s a screenshot of the design we’ll be creating.

Final Result

Overview

In this tutorial, I’m going to assume that you have a basic understanding of Photoshop and know how to do basic tasks such as adding text, drawing shapes, and resizing/rotating objects.

My goal in this walkthrough is to show that you don’t always need lots of fancy effects in a design to make a nice-looking template. With a couple of fonts and some subtle effects, it’s still possible to create a professional-looking design that will impress your visitors.

The design we’re going to build has a header that contains the name of the company and the navigation area. Below that is an area that highlights what the business does along with some additional details.

Following this, there is a section that describes the specific services in more detail. The section underneath this has some client testimonials and a featured project overview.

We also want to try and build credibility and trust through the use of some client testimonials and an example of a "featured project."

Finally, we have a simple footer at the bottom that contains some fairly standard copyright text.

Create the Document

1 Create a new document with a size of 1100×1100px. Then add some vertical guides at 70px and 1030px — this gives us a width of 960px, which should easily fit on most screens.

Create the Document

Make the Header

2 To create the header, we first need to add the background. Select the Rectangle Tool (U), set your Foreground color to a very dark gray color (#333333), and then draw a box from the left of the document to the right that is around 130px in height.

Make the Header

Add the Site Name/Logo

3 To add the company name, set the font to Myriad Pro. Set the font size to 60px, the color to a light gray (#EEEEEE), and the letter spacing to -40px. You can set all of these options in the Character Panel (Window > Character). With the Horizontal Type Tool (T), type the name and position it against the left guide.

Add the Site Name/Logo

Make the Navigation

4 To add the navigation area, set the font to Arial. The font size to 16px and the color is #EEE. Type some page names (e.g. Home, About, etc.) separated by two hypens (–):

Make the Navigation

Create the Featured Content Section

5 To create the featured content section, we need to start by adding the headline of the featured content. Set the font to Myriad Pro, the font weight to bold, the font size 60px, the letter spacing to -40px, and the color to #333333. Type the title in with the Horizontal Type Tool (T).