This tutorial explains how to create a text with shadow using CSS.

First let’s create a structure of our text container together with a text.

HTML code:

<html >
<head>

<link href=”stylesheet.css” rel=”stylesheet” type=”text/css” media=”screen” />

</head>

<body>
<div id=”wrapper”>
<span> wordpressAPI.com</span>
<span> wordpressAPI.com</span>
</div>

</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Now we are going to apply CSS code.

CSS code:

* {
margin: 0px;
padding: 0px;
}
body {
background-color:#9BCDFF;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
text-align: center;
}
#wrapper {
width: 700px;
height: 200px;
margin: 20px auto 20px auto;
padding: 0px;
text-align: left;
position: relative;
border: solid 1px #fff;
}
.firstlayer {
font-size: 30px;
font-weight: bold;
color: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.secondlayer {
font-size: 30px;
font-weight: bold;
color:#666666;
position: absolute;
top: 22px;
left: 22px;
z-index: 0;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Thank you!


In this tutorial we will make an opacity rollover effect with css.

It can use for menu items and much more.

first create a folder to contain this whole project, save the three images above in the folder.

Now open your favorite html editor, (notepad, dreamweaver etc).

First we will add the css styles at the top.

That was the styles tag, you can do it in the html file, or export it to an external .css file (then remember to delete the <style> and </style> tags).

Now we just need to place our elements with html code, and assign some classes to them to make this effect work.

As you might see its quite simple, first I make a div box just as a wrapper to hold the images.

then every image is shown in as a href link with an class calling for the style “opacityit” rollover effect.

If you have trouble making it work you can download a project here, remember if it still doesnt work, check if you use a browser that supports the opacity filter effect.

Thank You!

This tutorial explains how to build horizontal lists using “display: inline”.

There are many methods that can be used to making a horizontal list. The main ingredient is “display: inline”, applied to the “LI” element.

Step 1: Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in <a href=”#”> </a>) which is essential for this list to work. Some CSS rules are written exclusively for the “a” element within the list items. For this example a “#” is used as a dummy link.

HTML CODE
<div id="
topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 2: Remove the bullets

To remove the HTML list bullets, set the “list-style-type” to “none”.

CSS CODE
#topnav ul

{

list-style-type: none;

}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">
Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 3: Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to “0″ for the “UL”.

CSS CODE
#topnav ul

{

margin: 0px;

padding: 0px;

list-style-type: none;

}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">
Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 4: Display inline

To force the list into one line, apply “display: inline;” to the “LI”.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">
Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 5: Removing text decoration

At this point you may wish to remove the text underline. It is a common practice for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">
Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 6: Padding around list items

To make each list item into a box, we need to add padding to the “a” element.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding: 1em 1em;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">
Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 7: Adding background color

At this point a background color and border can be applied. There are many combinations of border and background colors that can be used.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;

}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">
Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 8: Add a rollover color

Use “a:hover” to set a second background color, as a rollover. Roll over the list now you will see how it works.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}
#topnav ul li a:hover
{
color: #fff;
background-color:#000000;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">
Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 9: Center the list

To center the list, add “text-align: center;” to the “UL”.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}
#topnav ul li a:hover
{
color: #fff;
background-color:#000000;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">
Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

And you done it.

Thank you!

Over 80% of consumers use search engines to find products and services.
These days, no website owner can afford not to have a search engine friendly website. There are a lot of things which one should do to achieve high ranking like search engine friendly code, Link building, submit website to various directories, Sitemap, Meta tags etc.
Writing quality code is the first step in making website search engine friendly. In this article we are covering the points which should be taken care of while coding the website:

1. Use HTML for the content as much as possible. Avoid Flash, images, or other non-text formats.
Simple and cleanly coded website always rank higher than the flash based website. The non-text formats must be avoided in order to yield greater website accessibility. Not only the website becomes accessible to larger audience (Visually impaired or cognitive impaired users) but also can be accessed by a range of devices. The search spiders quickly spot the HTML coded and search engine friendly pages. Other advantages of using HTML are: faster loading, Cascading Style Sheet removing access load from server, browser compatibility, easy updating and maintenance.

2. Avoid login functionality to access the page unless it’s required. Search engine cannot index the page that requires login.

3. Do not use frames.
Using frames are considered to be a blunder by webmasters. Frames generally are not indexed by various search engines. Indexing leads to display of the embedded web addresses in frames, as the users are unable to navigate through the search results. Frames also create problem while printing, refreshing or bookmarking the webpage. Frames are becoming obsolete with the advent of AJAX and DIV layers.

4. Navigation should be in plain html. Avoid using flash.
Easy, simple coding in text like HTML facilitates the website to be ranked higher by the search engines.

5. Keep URL as short as possible. .
URL or the domain name is the essence of your website. Going by the KISS (Keep It Short and Simple) rule, the URL ought to be short as it would reduce the chances of misspelling and confusion by the visitors.

6. Static URL is always preferred over dynamic URL.
The search engines are able to index the static URLs in a comfortable manner than the dynamic URLs. Search engines can not access the dynamic and thus the websites lose on their market positioning.

7. Do not use numbers in URL.
Use of numbers in URL must be avoided to circumvent any confusion.

8. If possible, use keywords in URL.
Use of keywords communicates the basic crux of the website to the visitor and also invokes interest in the website, forcing the visitor to go through the website.

9. Separate words using Hyphens in URL.
Use of hyphens should be made clear in the URL else it may puzzle the visitor. Two words should be separated with the use of a hyphen as the search engine reads it as two words.

10. Always use lowercase in URL.
To maintain consistency and avoid any confusion, always use lowercase in URL.

11. Always add alt attribute for images, flash, audio & video file.
Alt attribute are a must while using images, flash, audio and video files as they are alternative names of the images and describe the files. The alt attribute basically lend a caption for such files and helps in search engine ranking.

12. Use Anchor text in links
The anchor text links are powerful tools for site optimization. Anchor text links provide a theme for the entire website.

13. Limit the length of title tag to 65 characters (including spaces) or less.
Different search engines accept different standards. Hence, to be on the safer side, it is important to limit the length of the title tag between 50-65 characters.

14. Incorporate keyword phrases in title tags.
Including 2-3 important keyword phrases of the website in the title tag facilitates good rankings by the search engines. However, the title tags must not be over burdened with keyword phrases as the chances are that the website would be blacklisted as spam. Each page with its own keyword phrase lends higher readership. A helpful tool for choosing which keywords to target is the Google Keyword Selection Tool.

15. Add Meta tags in the code.
Search engines use meta-tags to identify the objective of the website; therefore, meta-tags help in optimizing the website. The search crawlers determine the relevance of the meta-tags with respect to the content of the webpage.

16. Add Header Tags i.e, h1, h2, h3 etc.
Header tags as the name itself suggest are used to incorporate the headings in the text. The h1 header can be used to determine the main keyword and the h2 header tag can identify the next relevant keyword and so on.

17. Offload JavaScript and other non-text code (style sheets, etc.) to external files

18. Optimize images for fast loading
Larger images must be broken into smaller size images which enable uploading smaller images simultaneously and faster. Cropping unnecessary portions and reducing the image depth also help in loading the image faster.

19. Try to keep page size as low as possible
Lower the page size, lesser time will it take to load and thus would not distract the visitor from the website. Sometimes pages with larger size take ages to load and divert the potential user or client.

20. Validate your markup & CSS against w3c standards
Validating markup helps to identify the flaws or wrong coding on the webpage. The W3C standards are laid down to determine the errors and make the code neat & tidy.

Create a simple button with 3D look for your website using CSS.


The main CSS commands you’ll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert any other commands to achieve the desired presentation effect – the only limit is your imagination!

Thank You!

You can achieve the sticky footer using css very perfectly. Use following css code for creating the sticky footer. Many people gave example of google sticky footer.


html{

height:100%

}

body{

height:100%

}

#footer{

position: relative;

bottom: 0px;

height: 100px;  //You must need to know your footer height

margin-bottom:-100px; //here I am thinking footer will be 100 px

}

You can change the footer height as per your need or footer height.

Sticky footer you will also achieve using javscript code.


<script>
document.body.onload = function () {
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &&
 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }
 window.alert( 'Width = ' + myWidth );
 window.alert( 'Height = ' + myHeight );

 middle_container = myWidth - 150; // here I am thinking footer and header hight is 150px
 document.getElelmentByID("main").style.height = middle_container;
}

</script>

You just need to minus the header and footer height from middle_container.

If you want to change the image on rollover or mouseover event. This is very old technique. You can achieve this using CSS or javascript.

With CSS you can use the following code


.yourimage { background-image: url('firstImage.jpeg'); }
.yourimage:hover { background-image: url('secondImage.jpeg'); }

<div class=”yourimage” style=”height:100px;width:100px;min-height:100px;min-width:100px;”></div>

I am using the yourimage class for div element.

With javascript you can use following code

<div>
<img src="firstimage.jpeg" onmouseover="this.src='secondimage.jpeg'" onmouseout="this.src='firstimage.jpeg'"/>

If you are using the Jquery then use following code:

<style>
.imagediv{background-image:firstimage.jpg}
<div class="imagediv"/>

 $(document).ready(function () {
            $('div.imagediv').mouseover(function () {
                $(this).css(background-image", "url('secondimage.jpg')");
            });
        });

We all know what is conditional css and how to write the conditional css.
Here is few examples about conditional css.

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<![endif]–>

With in style.css file

 a.button_active, a.button_unactive {
 display: inline-block;
 [if lte Gecko 1.8] display: -moz-inline-stack;
 [if lte Konq 3.1] float: left;
 height: 30px;
 [if IE 5.0] margin-top: -1px;
 text-decoration: none;
 outline: none;
 [if IE] text-decoration: expression(hideFocus='true');
 }

When we are use the inline css in document. If in that case we need to use conditional css then there is way

// Following is hack for all IE, including 7. It must go first, or it overrides the following hack
<div style="width:15px;^width:13px;">
some dynamic content
</div>
// Following is hack for all IE6 + browsers
<div style="width:15px;_width:14px;">
some dynamic content
</div>

Many times we need to do word wrap using lanugages. I recommend use css for word wrapping.
You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property.
This is a problem with CSS layouts that use floated divs.
Use following code for fix the word wrap with all divs.

div { word-wrap: break-word }

instead of this we always use following css code:

overflow:hidden;

But this is not good practice. Use word-wrap css property.
Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

Many developer who are experienced in development. But still that comes to another cms or project development. We are always search for good IDE which are free and open source that is first requirement.

Our basic need are as follows in any IDE, the IDE need to support following things:

  • CSS
  • XHTML/HTML
  • JavaScript
  • PHP
  • MySQL

I created a list of IDE which I used daily  to do a development. Here I need to clarify IDE is language specific. I work in PHP, Ruby on Rails, Adobe Air, Flex, Javascript, CSS.

I recommend following IDEs which I really found useful for all the developer who are working in wordpress, joomla, drupal development.

1. eclipse (Compatible  on Windows and Linux)

Description: Eclipse is best IDE for all language development. Eclipse IdE is basically Java development but still that provides PHP, ROR and other language support. I like this IDE for java development but I did not recommend for PHP or Ruby on Rails.

2. NetBeans (Compatible  on Windows and Linux)

Description: This IDE has also all language support. I specially like this IDE from Ruby on Rails development. I Used this IDE for Ruby on Rails development as well as some times for PHP development. Among the Ruby on Rails developer this IDE is so popular.

3. Komodo (Compatible  on Windows and Linux)

Description : This IDE is also support for all languages. This IDE is really good support for PHP. I really love this IDE for PHP development. Simple and fast and still nice features about PHP. This IDE is really popular among the PHP developers.

4. Aptana (Compatible  on Windows and Linux)

Description : This IDE is mainly made for Ruby on Rails development. This is also popular among Ruby developers. This IDE has features like eclipse. I like this IDE for Adobe Air and flex development.  This IDE has also PHP support.

5. EditPlus (Compatible  on Windows)

Description: This IDE is plain simple text editor. Shows you simple color highlight features. I specially recommend this IDE for PHP development and new PHP developer always start with this IDE so they will get filmier with PHP functions and methods because this IDE is does not provide any help. I love the use this IDE in daily use for any language development.

If you want to add any more IDEs. You can comments on this article.

Wordpressapi is developer code book.
wordpressapi on Facebook

Who am I?

Sony Kumari founded Wordpressapi in Feb 2010. She started writing since Aug 2006 in wordpress blog. Later on She moved her blog to wordpressapi.com.

Sony Kumari is dubble gradute and earned M.C.A. in Computers. Sony Kumari handled the so many projects in many different technology. She worked on Java, PHP, Ruby on Rails, Javascript, Web services, Social applications, Ad campaigns.

Mahesh is the Author of Wordpressapi, as well as a serial web entrepreneur, sci-fi author, and aspiring world changer. He has been writing for Wordpressapi since Dec 2009. His previous experience includes Photoshop Design, CSS design, Web design and wordpress themes development.

Mahesh is a graduate and earned a B.E. in Electronics. He is having three years of experience in Web design and Wordpress application development.

Rahul is the Author of Wordpressapi, as well as a web designer and photoshop artist. His previous experience includes Photoshop Design, CSS design, Web design and wordpress themes development.

Rahul is a graduate and earned a B.A. in History. He is having Five years of experience in Web design and Wordpress application development.

© 2010 Wordpressapi. All Rights Reserved. Reproduction without explicit permission is prohibited.