CSS image effect ;) you can use it in your gallery;)

November 1st, 2008 by admin

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “:hover” pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it’s possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn’t support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.


CSS code:

<style type=”text/css”>

/*URL: http://www.Branding-Studio.com.com/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image’s height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

HTML code:

<div class=”gallerycontainer”>

<a class=”thumbnail” href=”#thumb”><img src=”images/firstimage.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/firstimage.jpg” /><br />Simply beautiful.</span></a>

<a class=”thumbnail” href=”#thumb”><img src=”images/ocean.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/ocean.jpg” /><br />Beautiful OCEAN</span></a>

<br />

<a class=”thumbnail” href=”#thumb”><img src=”images/fun.jpg” width=”100px” height=”75px” border=”0″ /><span><img src=”images/fun.jpg” /><br />Is it FUN?</span></a>

<a class=”thumbnail” href=”#thumb”><img src=”images/horse.jpg” width=”100px” height=”70px” border=”0″ /><span><img src=”images/horse.jpg” /><br />RUN RUN RUN</span></a>

<br />

<a class=”thumbnail” href=”#thumb”>Super Man<span><img src=”images/super.gif” /><br />Super Man</span></a>

<br />

<a class=”thumbnail” href=”#thumb”>Google<span><img src=”images/google.gif” /><br />Google</span></a>

</div>

Just change some files or paste your own images in this html code ;)

CSS Background Position Shortcuts

October 31st, 2008 by admin

I often use divs and background images on a constant basis to get a modern look and feel to a website. When doing so it is important to know the CSS shortcuts for the element background-position.There are two basic ways of writing this in your stylesheet, 1.with Keywords and 2. with Percentages or Lengths.

Keywords

Horizontal keywords: left, center, right
Vertical keywords: top, center, bottom

Read More »

CSS Progress bar ;)

October 29th, 2008 by admin

Thoughts

We’ll put a cool background image in the container and define fixed width and height. First child (SPAN) will act as a progress bar. We’ll absolutely position second child (EM) above the progress bar and shift it to the left to a desired value. EM has the same background as the container so it gives an effect of progress bar stopping at certain percentage.
for css

Read More »

“You Are Here” button

October 27th, 2008 by admin

I once ran across an article that prompted me to reconsider the approach I had been using to styling a “You Are Here” button. The result is that I now have two viable techniques to choose from, and I can use whichever one is easier to implement in a given situation. Let’s look at how these two techniques compare and when you might want to use each one.

Background: What we’re trying to accomplish

A You Are Here button is the term I use for a button or link that points to the current page and gets distinctive styling to help orient the visitor to their current location in a Web site. It’s usually a button in a navigation bar, but it might also be a link in a breadcrumb trail, or any other link to the current page.

A You Are Here button typically gets distinctive visual styling that makes it stand apart from other buttons in a navigation bar. For example, on the You Are Here button, you might reverse the text and background colors used on the other buttons in the navigation bar or use subdued shades of the other button colors.

Read More »

Preloader…

October 26th, 2008 by admin

Here is image preloader :) you can use this this script to not only preload images before displaying them, but also, get a live update on it’s progress through an update bar. Once the preloadiing is complete, the surfer is then directed to the page containing the preloaded images.

here is sample of code :

P.S.  sorry I forgot. You need made 2 gif images one 1X1 pix black dot and other 1X1 pix blue dot . Call them blue.gif and black.gif and paste them in the same scriptfolder.

Read More »

Opera and Safari

October 26th, 2008 by admin

Back in the day, there used to be a hack for Safari using the pound (#) sign. Safari didn’t like that symbol, so you could declare something like this:

p { color: red; }
p { color: black;# }

Every other browser will read the second line replacing the first line and the text will be black. Safari doesn’t like that pound sign and will stick with the first declaration and the text will be red. This is the perfect example of why using hacks are a bad idea, because it no longer works (Safari 3 and beyond).

Now there is a new hack on the block targeting newer versions of Safari as well as Opera 8/9:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari-Opera specific declarations here */
}

Originally published here.

Read More »

Php counter with cookies

October 22nd, 2008 by admin

Big thing when you are creating counter for your web sites is to disable counting same visitors every time he/she visit your page. To avoid this you would use cookies in this case because you want do disable counting for day not session.

What we need to do now is to create new table in our existing database or new using below sql query:

CREATE TABLE ‘stats’ (
‘id’ INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
‘counter’ INT NOT NULL
) ENGINE = MYISAM ;

INSERT INTO ‘stats’ ( ‘id’ , ‘counter’ ) VALUES (NULL , ’0′);

After you have created new table needed for this counter we need to create new file for example: “counter.php”.

Copy & Paste code below to newly created file:

<?php

// connect to mysql
$link = mysql_connect(‘localhost’, ‘write_here_mysql_username’, ‘ write_here_mysql_password’);

// select database
mysql_select_database(‘write_here_mysql_database_name’,$link);

// cookie details here
$counted = $HTTP_COOKIE_VARS["counter"];

// if this is first visitor then
if($counted==”"){

// we create cookie for visitor
setcookie(“counter”,”counted”,time()+60*60*60);

// add counter to database
mysql_query(“UPDATE stats SET counter=counter+1″);
}

$query=mysql_query(“SELECT * FROM stats”);

while($row=mysql_fetch_assoc($query)) {
$stats=$row['counter']; }

?>

Normally now you want to show this stats somewhere… What you need to do if you want to track every visit?

Make sure you make this:
1.  include this file in page you want to track

<?php include(“counter.php”); ?>

2. Print counter in part of page you want to show number of visits

<?php print $stats; ?>

That’s all.

jQuery AJAX Contact Form

October 19th, 2008 by admin

Getting started with the browser side.

First, download the jQuery library and form plugin and then let’s start creating our HTML form. Keep them all in the same folder for now. We’ll want to first call both javascript files, let’s do that with:

  1. <head>
  2. <title>Ajax Form v1 – Demo</title>
  3. <script type=“text/javascript” src=“jquery-latest.pack.js”></script>
  4. <script type=“text/javascript” src=“jquery.form.js”></script>
  5. </head>

That’s a great start, but we need to make the form before we can customize our javascript to fit the form. Here is a sample form to get us started:

  1. <html>
  2. <form id=“contactForm” action=“sendmailexample.php” method=“post”>
  3. <ul>
  4. <li><label for=“name”>Name:</label><input id=“name” name=“name” type=“text” /></li>
  5. <li><label for=“email”>Email:</label><input id=“email” name=“email” type=“text” /></li>
  6. <li><label for=“tele”>Telephone:</label><input id=“tele” name=“tele” type=“text” /></li>
  7. <li class=“special”><label for=“last”>Don’t fill this in:</label><input id=“last” name=“last” type=“text” /></li>
  8. <li><label for=“message”>Message:</label><textarea rows=“5″ name=“message”></textarea></li>
  9. <li><input type=“submit” value=“Send Message” /></li>
  10. </ul>
  11. </form>
  12. </html>

Read More »

Design = Details

October 16th, 2008 by admin

You’re at the table with fellow designers, an art director, and a creative director. The large screen displays designs you’re about to collectively critique. This is the first time you’ll all consider the initial round of concepts. The designs go up, one by one, and the words begin to flow.

It’s a phrase you hear often: design is in the details. With design, paying attention to small details—and in some cases, obsessively focusing on “what isn’t right”—can take a design from “nearly there” to “there” and beyond.

I attend meetings in which designers present their designs—typically the first round of comps—for the first time. Half the time, the presenting designer shows a rough product on the screen, and they usually believe the design is 90-100% done. But to the detail-savvy designer, the work is only 50-70% there. You can see the groundwork, foundation, and feel of the design in front of you, but you know it’s just not finished.

The goal of embracing details is to get you to think critically and present the best possible design you can—right from round one. In essence, you want your design to be ready for a real client presentation. So how do you take a design to 100%? You need to achieve polish, ridding the client’s mind of any doubt that the design is unfinished. It’s all too common for designers to feel rushed: you’re under deadline, you’re under pressure. But if you care about your craft and your ideas, you’ll take the extra time, perhaps working late into the night, as we all have, and add the touches that you know will make your work really shine. You know that feeling you get when you think, “Oh, I knew I should have tried that”? Do it the first time it comes to mind. Don’t let someone in your design review bring up an idea you thought of first.

Tips and techniques fortify any designer’s toolkit, but I must stress that thinking critically about a design is as important as the tools and skills needed to produce it.

Here’s a checklist to guide and inspire you to get the site done, done, done. Leave no stone unturned and no doubts about the design you present—let it shine.
Experiment

It’s not unusual for me to create up to four concurrent comps for just the first round of internal design presentations. I use these to “sketch” out designs. A navigation or logo treatment that doesn’t work in one comp may work in another comp. This allows you to have what I call “The Beautiful Mistake”—placing elements in other environments that create possibilities. Instead of feeling like you have designer’s block, just throw the ideas you have into comps and see where they lead. Getting started is half the battle.

On the same note, don’t be afraid to start over. If something isn’t working, close it up and trash it. If you think the navigation is too precious, remember how you did it, then start from that point in the next design. The goal is to refine, over and over.
Choices

There are many choices to be made when you’re designing—everything from type, to colors, to overall tone of the site. Sometimes, I like to throw a lot of things at a design to see what sticks, and sometimes I start minimally. Strive to make smart, simple choices. If there’s an easier way to design something, do it. The complicated choice will feel complicated to the client and intended audience unless you can make a complex interaction looks simple.
Stay consistent

Once you make choices, stick with them. If you choose to pad items with 10 pixels in sidebars but use 15 pixels in larger text areas, make sure the comps reflect those decisions. Keep notes while designing—these will form a good basis for a style guide. Consistency displays sophistication and shows that you fully understood and made sound decisions. Consistency should be transparent.
Completeness

Finish the design. Don’t miss a footer or a detail. Don’t say, “That’s to be filled in later—I didn’t have time.” Make the time. Don’t give any reason for others to torpedo the design or allow someone to fixate on a little detail—overshadowing the rest of the work. It’s these little details that deserve your attention. Creative directors, art directors, and especially clients will perseverate on details like this, so make sure the details are there.
Step in, step out, step back: balance

During a design, it’s best to step away from the design occasionally—even just for lunch or a 15-minute break. Look at something else. Come back and look at your design again. Think about your first impressions. Your own gut reaction will likely be similar to the initial impressions of those who see it for the first time. Take note and revise or change your design based on those impressions. Regardless of how “cool” or “neat” a particular element may be, if it doesn’t serve your design in a useful way, get rid of it and try something new. Always step back and re-evaluate.
Be your own critic

If you’re familiar with the team you regularly work with, the client or the client’s needs, look at your design as you get close to done and think about parts that will potentially provoke questions or concerns. Have a solid answer for the decisions you made.
Complexity in simplicity: less is more

When we discuss “less is more”, we mean different things. For example, sometimes the design needs to scale back. It’s got too many elements. Or a design chokes itself with too many colors. When doing detail work, “less is more” is about leaving in only everything that is necessary and making it harmonious. Let the complexity be in the simplicity—a design is not useful when it’s perceived to be complex. A design should be useful, simple, and straightforward—let the complexity shine through via simplicity.
Obsession is healthy

If I don’t feel right about a navigation or a flash widget that displays photos, I will sit and stew and sketch until I find something that fits. Design is a puzzle you create for yourself—you have all the pieces, but it’s up to you to decide how they fit. Perfection is not something to strive for, but close to perfect is—it leaves room for exploration, dialogue, and learning.

I find myself thinking about designs I’m working on at odd periods of the day—in the shower, making dinner, or walking to the corner store. Small, quiet moments are when I have breakthroughs and solve problems. These are the times when the right details will appear. This isn’t often billable time, but it’s a good exercise to think about a design before attempting it. I don’t sketch much using pencil and paper; I like to let a design percolate and grow in my mind before committing it to the screen. I imagine the look, the feel, and the details. I relish the details.

Detail work isn’t easy. It takes time, inspiration, and imagination. It is however, very good practice—it allows you to cultivate a critical eye to help yourself and your fellow designer. Relish the details and your designs will cut the mustard.

Special fire effect on your 3D text

October 15th, 2008 by admin

Step 1

The first thing you will have to do is create the 3D text. To do that you can use Illustrator. It has a very nice 3D filter and it will work just fine.

Type the text you want and go to Effect>3D>Extrude & Bevel. Change the Position to Off-Axix Bottom. Then you just rotate the X,Y, and X Axis until you get the result you want. Follow the image below for reference. Tip: It’s very important that you select Draw Hidden Faces. Otherwise Illustrator will not create some faces that will be very important for the end result.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 2

Now you will have to expand the 3D effect in order to select and change the color of the faces you want. Go to Obejct>Expand Appearance. First select the top faces, and move them away. Then select just the outer faces and fill them with black.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 3 – Photoshop

Create a new document in Photoshop and fill the background with Black. Copy the 3D text without the top faces and paste it in Phothoshop. Position it in the middle of the document and reduce its size.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 4

With the Magic Wand Tool (W) select the black faces and delete them.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 5

Go to Images>Adjustments>Hue/Saturation, change the color of the text to Orange.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 6

Make sure you have black and white for the background and foreground colors. Then go to Filter>Render>Clouds… After that, resize the layer. Make it smaller just to cover the word. Then just change the Blend Mode to Color Dodge
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 7

Now create a new layer on top of the others and fill it with black, then with the Brush Tool (B) select a regular brush, very soft, like 0% hardness, and white for the color. Then just paint over some ares to make them brighter. (1-4)
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 8

Apply a Layer Style to the 3D word, use Stroke with 1px Size, 40% Opacity and Black for the color.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 9

Let’s add a Gradient Overlay to the background. It will be necessary in order to make some of the light effects work. Use Radial for the Style and use Black and #412e1d(brown) for the colors.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 10

Now duplicate the 3D layer and go to Filter>Blur>Gaussian Blur use 30px for the Radius. Position this layer beneath the Hell layer.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 11

With the Ellipse Tool(U) create an ellipse like the image below, then go to Filter>Blur>Gaussian Blur. Use 70px for the Radius. After that, just change the Blend Mode to Overlay.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 12

Create a new layer on top of the Backgroud layer. Fill it with white and go to Filter>Texture>Texturizer. Use 60% for Scaling, 15 for the Relief and Top for the Light. Change the Blend Mode to Multiply.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 13

Here you need find a texture to the floor, I used a wooden texture.

Paste the image in the document and resize it to make it cover the gradient area. Then go to Edit>Transform>Distort. Move the vertices to apply a nice perspective to the wood. After that just change the Blend Mode to Multiply.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 14 – Fire

Now let’s create the fire. Basically we will get a photo of fire with flames and use the Warp tool to create different variations of the flame.

Just find a image of flame with black background and paste it in the document. Make sure that it’s in front of the other layes. Then with the Eraser Tool (E) delete some areas. Also go to Edit>Transform>Warp and distort the flame to get a nice effect. Then just change the Blend Mode to Screen.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 15

Create more flames using the same technique, you can even use the Smudge Tool (R) to change the form of the flames.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 16

Create a new layer in front of the other layers and go to Filter>Render>Clouds. Make sure you have selected Black and White for the Background and Foreground colors. Then you can resize the layer a bit to make the smoke smaller. With the Eraser Tool (E) delete some areas and just leave smoke over the text. Then change the Blend Mode to Soft Light.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 17

Repeat the same thing as the previous step, this time however use Hard Light for the Blend Mode. This step will create a more volumetric smoke to the image.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 18

Let’s create the cracks on the floor. To do that let’s use another image just find texture like this one. Place the image on the document and resize it to cover the gradient area. Then like we did before with the wood texture, go to Edit>Transform>Distort. Distort the image until you get a nice perspective, then change the Blend Mode to Multiply.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 19

This step might look complicated but it’s not. Actually it’s quite simple. Duplicate the crack layer and change the blend mode to Normal again. Go to Image>Adjustments>Invert, then go to Image>Adjustments>Desaturate. This will invert the colors so what was once black will now become white and vice-versa. Now go to Image>Adjustments>Levels and use 40, 1.00, and 226.

Right after that select the Magic Wand Tool (W) and select the black part of the image. Then go to Select>Similar, Photoshop will select all the black from the layer. Then delete the blacks and you will have the cracks in white. Now just apply a Layer Style. Go to Layer>Layer Styles>Color Overlay. Use #ffba00 for the color.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 20

Select the Eraser Tool (E) with a big soft brush, use 0% hardness. Then start deleting the layer. Leave just a small area close to the word. After that go to Filter>Blur>Gaussian Blur. Use a small value 0.5%. Then the last thing here, move this layer 2 pixels left and bottom, so it will create a nice 3D effect.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

Step 21

Here you can duplicate the yellow crack layer and apply a another gaussian blur, this time use a greater value and change the Blend Mode to Color Dodge. If you want you can duplicate it one or two more times to make the effect brighter.
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

LOOK WE DID IT !!!
Photoshop from  Branding-Studio.com WebDesign & Web Development Studio

If you have any questions just mail me ;)