My 100 post & few tips for web designer

Hello Dear,
Suvho Bangla Noboborsho 1419 (Happy Bengali New Year 1419) to you. You are reading 100th Post of my blog.  So, Basically I want to give few tips for web designer. Specially who works for designing website by CSS3. I want to say something about the tools of CSS3.  Hope, you will enjoy this post.

CSS3 TEST
You know, you have to check the cross browsing for css template, specially CSS3. Because, CSS3 does not support for all browser till now. So, this site will help you to know about this-
http://css3test.com/

DABBLET.COM
This is the play ground of CSS. This is very very familiar website for css designer. More than 1000 css designer take help from this. You can try from this also-
http://dabblet.com/

ANIMATABLE
This is the very hot animation for CSS. You can get help from this site also. The address of this site is-
http://leaverou.github.com/animatable/

CSS3 PATTERN GALLERY
This is very very helpful site for pattern design for website. You can get easily help from this site. This pattern is used only css3, no image. The address of this site is-
http://lea.verou.me/css3patterns/

CSS3 GRADIENT GENERATE
In css3 you can generate gradient without any kind of image. This is very very cool opportunity for any web designer. In colorzilla, you will get this opportunity. This is very user friendly interface. The address of this site is-
http://www.colorzilla.com/gradient-editor/

This is enough for today. I believe that, if any designer follow these site for designing website, he / she will be blast within few months as a web expert.
Pry for me and keep in touch. I will post more important post very soon.

With Thanks-

CSS3 Techniques You Should Know

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

CSS Techniques You Should KNow

If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:

  • Mozilla/Firefox/Gecko: -moz-
  • Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.

Continue reading

Create Vimeo-like top navigation

Hello friends. How are you? I am fine. Now, I want to make a menu like vimeo.

What I like the most is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.

The base for this tutorial is simple CSS drop down menu based on unordered list. The structure is visually described in the image below:

sample1

As you can see we have UL with four items. The first one is logo with short submenu. Then comes login link, Help link with submenu and search item with submenu. Each submenu is being shown when hover corresponding link.

Continue reading

CSS Accordion Effect Menu

The Accordion Effect is fast becoming one of the most commonly used (and perhaps abused?) effects of the Web 2.0 world. Most JavaScript frameworks make such an effect fairly easy to pull off – heck, MooTools even built their reputation on it in the early days. So what makes this accordion effect special? It doesn’t require a single line of JavaScript.

First off, what is an “accordion” effect? Generally speaking, the accordion effect takes several larger elements and then compresses them into a small space so that only a small portion (like a heading) of most or all of the elements is visible. Then, when the user interacts with that element — either by clicking on it or maybe only mousing over — the accordion expands so that the element of interest is visible, and the other elements shrink down automatically. When it’s in use, it looks a bit like an accordion expanding and contracting: hence the name.

Our accordion will work exactly the same way: all of the elements will be partially visible when the user loads the page. And then when they mouse over a particular section, it will instantly expand – and the other elements will contract – to make reading more easy.

example of accordion effect before and after the user mouses over it

So how do we accomplish this trick? First, we start with our XHTML, which just consists of a couple of divs with some IDs applied:

Continue reading

XHTML Tutorial CSS Tabbed Menu

Tabbed menu

One hugely useful way of displaying your menu items is in the form of tabs. The following tutorial will take you through some simple steps to build your own tabbed menu, without so much as a .gif or line of JavaScript in sight…

Open up a blank XHTML document with a style statement within the <head> tags. This is where we’ll place out CSS code.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>button</title>
<style>
</style>
</head>
<body>
</body>
</html>

Now let’s set out the XHTML markup for our menu, between the <body> tags:

<ul class=”menu_tabbed”>
<li><a href=””>tab one</a></li>
<li><a href=””>tab two</a></li>
<li><a href=””>tab three</a></li>
<li><a href=””>tab four</a></li>
</ul>

This is a straight-forward unordered list which we’ve given the class of ‘menu_tabbed’. Within it are four list items, each one of which contains a link.

Continue reading

Create a pretty cool, simple, horizontal CSS menu

This is a beginner level tutorial to create a horizontal CSS menu. Many of the beginners are not aware how simple is to create a pure CSS menu. This tutorial helps to create a simple and attractive CSS menu with a cool hover effect. Check out the demo below..

First of all let us write HTML list for menu. Say we have 8 links, as shown in image, here goes the code.

Continue reading