Let’s create a simple example of animating a pop out sign.

First Create a Div with images

<div id="signpost">
	<img id="post" src="post.png">
	<img id="sign" src="sign.png">
</div>

Create the bounding box for the signpost, and give it a relative positioning context to ensure that we can position items absolutely within it.

#signpost{
 width:60px;
 height:196px;
 position:relative;
}

Next, the post is positioned with a z-index of two, to place it on top of the sign.

#post{
 width:79px;
 height:196px;
 z-index:2;
 position:relative;
}

Now we place sign underneath the Post and rotate it with our CSS3 transform property

#sign{
height:46px;
width:80px;
position:absolute;
top:10;
left:60;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
 
-webkit-transform: rotate(86deg);
-moz-transform: rotate(86deg);
z-index:1;
-webkit-transition:-webkit-transform 0.5s ease-in-out;
}

The sign is rotated using transform: rotate(86deg), and is positioned under the post. To ensure that the sign rotates around the proper point, we must change the transform origin to the top left corner: 0, 0.

We set the transition to change the transform property over 0.5s with an ease-in-out profile, and on hover, we rotate the sign back to its original orientation.

#signpost:hover #sign{
	-webkit-transform:rotate(0deg);
         -moz-transform:rotate(0deg); }

Reference: http://net.tutsplus.com

Whenever i had a free time , i always look for the ebooks in the web.Here i have collected some ebooks which are specially focused for the web designer . Being a designer you always have to keep the idea about the current trends . Some of these books are online books and some can be downloaded in the pdf format.Reading books is one of the best habit.

1.The Webbook

If you are a new beginner for web, you can start with this book. This Book contains all the information that is needed to create a Web site , registering a domain name and renting some hosting space, creating your first HTML page, building full online database applications with PHP and MySQL. It also tells about CSS and Javascript.

2.Designing for the web

This book contains five sections, : Getting Started, Research, Typography, Colour, and Layout. Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one. and it covers a core aspect of graphic design.

3.Web Style Guide: Basic Design Principles for Creating Web Sites – 3rd Edition

This book contains 12 sections which covers the basic design principles and most of the aspect of the webdesign. The form designs and applications,multimedia,typography are clearly explained.

4.Dive into HTML 5

This book is written by MARK PILGRIM.If you can get to the idea about the HTML 5 , this book can be one of the good option.It starts with the history of HTML 5 to the all the standard .

5.Taking your talent to the web

This book was written in 2001 and was rated top five book by amazon.com.This book was written for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding.

These all books are yours,Enjoy it.

In this article, I will be showing you how to add or change css styling. You will be able to add or remove class in HTML elements.

VIEW DEMO

Here is my html code:

<div>
	<span>Sample text!</span>
	<br />
	Testing!
</div>
<br />
 
<div>Click me</div>

As you can see above, I have a div with id ‘content’. I have ‘Sample text!’ inside span. And I have a div with id ‘clickme’.

Here is CSS class to be used:

.hover {
	text-decoration: underline;
	cursor: pointer;
	color: #003399;
	font-weight: bold;
}

Here is the magical jQuery function :)

$("#clickme").hover(function(){
	$(this).addClass("hover");
}, function(){
	$(this).removeClass("hover");
});

Here, ‘hover’ function is used. It means that, when we hover on ‘Click me’ div then the CSS class ‘hover’ is added to the ‘clickme’ div. The ‘hover’ class will change the color, font-weight, etc. of the div text ‘Click me’.

Now, when we click the ‘Click me’ text, then the CSS styling is added to the div ‘content’. The new styling will change the text of div ‘content’ to green in color and it also increases the font size. The following jQuery code is used:

$("#clickme").click(function(){
	$("#content").css({"color":"green","font-size":"20px"});
});

VIEW DEMO

Cheers,

.

If you want to develop great looking websites and want that to be easy to maintain you must follow certain rules in writing markup and CSS. Those sites requires high quality markup and styling. The most fundamental principle to remember while designing is separating presentation and the content or style & markup. Separation is the key a good designer need to build a good markup to produce good CSS.

1. Treat Markup and CSS as development objects
Good markup and CSS is time consuming to produce and minor changes or mistakes can do serious damage to you work. Like any other development artifacts, CSS files should start with a well structured header. Both markup and CSS files should contains a title, a revision, a time stamp, and a description or any other information the designer wants to keep like copyright and license terms.

	/************************************/
	 My Site THEME
	 Copyright 2010, DesignGala
	 URL: www.designgala.com
	 AUTHOR: Mr. S@R0Z
	 DATE: 31 Jan. 2010
	 REVISION: 1.0
	/************************************/

2. Build up a library of most used designs
Starting with a blank page every time would not be very effective. It a time consuming process and it would cost a lot. Rather starting from the scratch you can create certain layouts which can be used time and again like:
• 2-column layout
• 3-column layout
• blog layout
• print layout etc.

3. Define basic guidelines and naming conventions.
Having a set of basic guidelines for how to write your CSS is recommended because it will make your code more logical and standardized. Basic guidelines can consist of any rule you find valuable for you and your team. I would recommend considering the following:

– Hyphens Instead of Underscores: Use lowercase characters to define your class and use “-” or uppercase letters to separate multiple-words classes (e.g. “main-container”, or “mainContainer).

– Use structural naming: Properly name your page segments and avoid at all cost to use presentational naming. (E.g. Use sidebar and not right-column). Presentational naming prevents you from having names in your markup that actually describe what the elements are.

4. Use whitespace carefully but have proper indentation
Whitespace, including spaces, tabs, and extra line breaks, is important for readability of your CSS code. However, whitespace does add to page weight and you should be careful not to add whitespace that is not needed.

To make your code easy to read while you work on it and if you provide it for others to maintain use proper indentation. Code that is not well structured can be almost impossible to read so it is worth the effort to maintain some kind of formatting.

Unmanaged CSS

.div #container { width: 780px; background: #FFFFFF; margin: 0 auto;
border: 1px solid #000000; text-align: left; }

Managed CSS

.div #container
{
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}

5. Use Optimized CSS Code
You can optimize the CSS by grouping selectors that have the same properties. Each selector should be separated with a comma rather than writing same code separately.
E.g.

h2, h3, p, .block {
	font-size: 1.5em;
	padding: 10px 10px 10px 25px;
	margin: 10px 0;
	border: 1px solid #ddd;
	background: #f0f0f0 url(bkg.gif) no-repeat 5px 10px;
}

6. Use Shorthand properties
Like grouping elements to re-use styles makes you write less code you should always use shorthand properties. Several key CSS properties that you use over and over again support use shorthand: margin, border, padding, background, font, list-style, and even outline.
E.g.

/* CSS */
p {
margin-top: 5px;
margin-right: 10px;
margin-bottom:  15px;
margin-left: 20px;
}

//Should be replaced by:
p { margin: 5px 10px 15px 20px; }

7. Set up typography in CSS
It should be clear to anyone that applying style (fonts, size, color alignment etc.) directly in the markup is bad practice and not a durable solution. It may look right but it’s a pain to maintain. Typical Typographic effects in CSS are: Size, Case, Style, Color, Alignment etc.

E.g.

/* Having only CAPs in headers or menus is typography
and should be left to CSS. */
 
<a href="/">FRONT</a> /* Not Directly in HTML like this */
 
<a href="/">Front</a> /* Just content in HTML and Design on CSS */
 
/* css */
a
{
	text-transform:uppercase;
}

8. Validate & fix the bugs

Before putting a new design live you should validate that your CSS is OK and get rid of any mistakes you may have made because even small mistakes in markup and CSS results different outputs in different browsers. A designer should eliminate those bugs to make the product final and perfect. You can use relevant validation tools.

Tools
- The W3C Markup Validation Service
- XHTML-CSS Validator

9. Document your work
First thing you should take serious is in-line comments in the CSS code. A designer can also make separate documentation of the template s/he is developing.

<!-- markup -->
 
<!-- This is how you insert documentation in the code -->
<!-- css -->
/* In CSS this is how you insert documentation in the code */
 
/***** Initialize to 0 *****/
*{
 border: 0;
 margin: 0;
 padding: 0;
}
 
/***** Style for the page header *****/
 
Header{
	…
	}
 
/***** Style for the displaying Menu *****/
menu{
	…
	}

Website is the best online platform for the promotion of business or services. So the greatest necessity of website is its design. Design needs to be eye catchy and attractive enough so that the visitors stop by to browse through your site. A visitor hardly stays on a website for less than 5 seconds or so if the design is not catchy. So a web designer has to be careful enough to turn the first impression of the site into a good one. Acquiring designing skill is very important for a beginner which can be developed and polished with rigorous practice.

The web layouts, the look and feel of the website as well as many other things are taken into consideration for website designing. A proper knowledge and skill to use the web designing tools are essential for any web designer.

1. Remove links or textbox hightlight border

You can use the outline property to remove or hide a border highlighting the elements. Our author Anish Blon wrote this in his most popular post one line CSS in March 2008.

a, input {
	outline:none;
}
to remove underline from link
a:link {
  color: #0000FF;
  text-decoration: none;
  background: #FFFFFF;}/*normal links in the text*/

2. Hidden Text

You can hide the text by using the text-indent property as follows. We use hidden text when we’re using images to replace text but we want to make sure search engine can crawl the keyword.

a {
	text-indent:-999em;
	outline:none;
	width:200px;
	height:100px;
}

3. CSS Transparency Setting for all browsers
you can use the following opacity hacks features to set transparency for different kinds of browsers

 .transparent_class {
	filter:alpha(opacity=50);    /* ie  */
	-moz-opacity:0.5;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.5;    /* for really really old safari */
	opacity: 0.5;    /* css standard, currently it works in most modern browsers like firefox,  */
}

4. PNG Fix for IE6
Following hacks can be used to fix the PNG fix for IE6

.png_hack{
  background-image: url(../img/image.png) !important;
  background-image: none;
  filter: none !important;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}

Please have your say.

[Photo Credit: Russ Weakley]

1. Avoid CSS hacks, use future proof method

We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:

<!--[If IE 5]>
ie 5
< ![endif]-->
 
<!--[If lte 6]>
ie 6 and lower
< ![endif]-->
 
<!--[If gte 7]>
ie 7 or higher
< ![endif]-->

2. Use group selector

Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your style sheet. We can group the selector to avoid repeating declaring the same properties for different elements

h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}

3. Center elements

It’s easy to center an element, for Firefox and Safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.

body {
    text-align:center;  /* for ie   */
}
 
#container {
    width:800px;
    margin:0 auto;
    text-align:left;
}

4. CSS Positioning

This is something I’ve just discovered it few weeks ago. Set the abolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.

#container {
    position: relative;
    width:500; height:300;
}
 
#item {
    position: absolute;
    left: 200px;
    top: 50px;
}

5. Text transform

This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS – Text transform

h1 {
    text-transform:uppercase;
}
h2 {
    text-transform:capitalize;
}
p {
    text-transform:lowercase;
}

Please have your say.

Step 1:
Insert the following codes into the HEAD section of your webpage:

<style type="text/css">
 
.main {
width:200px;
border:1px solid black;
}
 
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
 
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
 
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
 
.days #today{
font-weight: bold;
color: red;
}
 
</style>
 
 
<script type="text/javascript" src="basiccalendar.js">
 
/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
 
</script>

Step 2:
Download basiccalendar.js (by right clicking, and selecting “Save As”), and upload to your webpage directory.

Step 3:
Finally, insert the below script where you wish the calendar to appear on your page:

<script type="text/javascript">
 
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
 
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>

Click here to see an DEMO

There are couple of ways to fix this min-height bug:

Solution 1: Put a comment inside the div

<div style="height: 10px;><!-- --></div>

If the above solution doesn’t solve the problem then:

Solution 2: Put   inside the div and add this to its style

div#seperator { font-size:1px;line-height:0;}

And specify the actual height using the tag

For example: if we need to set a height of 5px then

<div id="seperator" style="height:5px;">&nbsp;</div>

This it it. My problem was fixed. :)

Designing a layout of webpage using CSS is now a most popular and challenging among the web designer. The layout Design without a table have allowed us to add more features and control over the page.

While creating the box using CSS, it is necessary to understand the four terms MARGIN , BORDER , PADDING and ACTUAL CONTENTS.

Explanation of the different parts:

• Margin – This is an area around the border. [ outside the border]
• Border – A border that lies around the padding and content.
• Padding – This is an area around the content. [inside the border]
• Content – The content of the box, where text and images appear.

We have different types of tags to control these parts.

• Margin tag – This tag clears an area around the border. The margin does not have a background color, and it is completely transparent.
• Border tag – A border tag adds border around the padding and content. The border is affected by the background color of the box.
• Padding tag – This tag clears an area around the content. The padding is affected by the background color of the box.

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Width and Height of an Element

When we specify the width and height properties of an element with CSS, we are just setting the width and height of the actual content area. To know the full size of the element, we must also add the padding, border and margin tags.

The total width of the element in the example below is 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Let’s do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px

Imagine that we only had 250px of space. Let’s make an element with a total width of 250px:

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

The total width of an element should always be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should always be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin