Css3 tutorials

Below are the few css best practice which we should fallow.

1. Avoid using inline styles in page.
2. Declare your most generic items first, then the not-so-generic and so on.
3. Organize the Stylesheet with a Top-down Structure
4. If you don’t have to reference specific object, it is strongly recommended to use class instead of id selectors
5. Use Useful Naming Conventions: Use lowercase characters to define your class. Use always presentational naming example. When assigning a class or id, ask yourself “What is this element for? Avoid using names that rely on location
6. CSS Shorthand makes development much easier and keeps your CSS clean, short & accessible.
7. Use Multiple Classes
8. Avoid Extra Selectors
9. Optimize CSS code creating only the main classes and reusing HTML standard tags for child elements
10. If layout is not so complex in order to justify multiple files then it is better to have one large css file rather than multiple small files because that way you reduce http requests.
11. Giving precise and clear class names to your elements is a key. This will seriously avoid confusion & let you understand your CSS better and faster.
12. Combining all background images into one single image and displaying them using background positions is all we call CSS Sprites. CSS Sprites reduces the number of HTTP requests, saves bandwidth and loads faster.
13. Global Reset ensures almost an identical presentation of a site across all the browsers. There are many different resets from simple to complex ones.
14. CSS frameworks good for rapidly speed up our development time and creating clean grid structure. Some popular frameworks are:
15. 960 CSS Framework, Blueprint CSS Framework, YAML, Yahoo YUI Grids CSS etc.
16. Using a CSS Frameworks is not always recommended but a CSS Reset is all you need.
17. Always use em instead of pt, px, cm
18. Optimize your css with CSS Compressors
19. Its always important to validate your CSS when you build it. This is to make sure that your CSS is error free and is interpreted in the right way in all the browsers. The W3C Validator has been a very popular online tool that validates CSS.
    -------------------------
20. We should take a closer look at the elements and identify possible problem areas.
    At this early stage you may need to make important design decisions so you must have a clear idea of how the design can be achieved from the very start. If you identify areas that are impossible to create on a living web page or would cause to many browser issues then its best to locate them now and notify the client before you begin.
21. Webpage Layout
    After analyze your mockup Make webpage structure layout , Group content together, wrap each group with an rectangle, name each rectangle, comment each layer with comment.
22. PSD Group layers
    Unnamed layers (Layer 1, Layer 1 copy, etc.) can be confusing and time consuming. Items that are logically connected should be grouped together. If your psd template is not proper group ask designer for grouping or just link each layers with groups.
23. Fixed, Fluid layout
    The first question that needs to be asked is whether this is a fixed or liquid layout where each column can stretch.
    We can group web-page layouts into three categories based on how their
    width is set: ? xed-width, liquid (or ? uid), and elastic. for detail visit: http://www.flexiblewebbook.com/downloads/FlexibleWebDesign_sample_ch1.pdf
24. Browser support and accessibility
    Confirm about target browser and audience before slicing your page. If client not targeting ie6 browser then you can free to use png image without any trick.However, if your target audience is broader or less computer savvy, then make sure to program for IE6. If website user also using ipad/iphone then use viewport for iPad sites.
25. Web safe fonts?
    If in layout used fonts are not web safe font then clear client about the performance and browser related issue. Install font in your matchine before slicing your template.
26. File and Folder Structure:
    Let’s create a proper folderand/file structure in root folder. When I set up a site for the first time my first job is to design how the pages are going to look then I usually construct the front page. This page should always be called index.htm or index.html. If your site is a small site, with only 5-10 pages, you may want to just have your web pages within your root folder without any subdirectories, but if your site is larger, and especially if you expect it to grow over time, you might want to consider having each page in it’s own directory.
27. images – containing all your images.
    styles – containing your style sheets
    pages – containing all your html pages
    template – containing any templates
    documents – containing any documents other than html pages such as Adobe Acrobat files, Word Files etc.
28. Site define: Create and configure a site in Dreamweaver. If you do not think about your site structure before designing, you most likely will have a big mess of files and folders that will become cumbersome to manage.
    Benefit: Your links can be tracked and maintained easily.Steps:
29. http://www.pserie.psu.edu/compcntr/guides/ConfigureDreamWeaver.pdf
30. http://www.adobe.com/designcenter/tutorials/drw8at_configure/
    Open Dreamweaver. Choose Site > New Site. The Site Definition dialog box appears.
    Local Root Folder – This is where all the files for the site are stored, the one which you created earlier. Browse for this folder and click on select.
    Enter a name for your site.
    Type in the location of this folder, or use the browse button to locate
    If this is checked, it can speed up your site management operations. You should have this checked.
    Define your Remote Site
31. Select Remote Info from the Category list in the Site Definition dialog.
    Select FTP in the Access menu. enter all required fields
32. Your Domain:
    Your Username:
    Your Password:
    Your site’s IP address:
33. Grab font sizes, font families and basic colors from the PSD and set up up CSS defaults for these including your favorite snippet.
    Measure the layout width so that we can create a #container block for the content as the page needs to be centred so all content can be within the container. For standard 1024px monitor target we use 1002px max width. If you layout more than this width then clear your client for the same.
    In the index.html file let’s type our basic layout with the main divs with proper comments.
34. Use Proper Image Formats and Optimize GIF, JPG, PNG files
    If you use the wrong image format, your images will be distorted and unclear, and will also slow down the speed of loading a website. When choosing an image format, we basically have three popular formats to choose from: JPEG, GIF and PNG. Each format has its own strength and weaknesses:
35. JPEG (JPEGsare the default choice for the web. JPEG can display millions of colors and because it has the smallest file size of all, it is the best choice for detailed images and photographs )
    Excellent for rich coloured images
    Decent file size compression to quality ratio
    Doesn’t support animation
    Doesn’t support transparency or alpha-blending
    GIF (GIFsare similar to PNGs. Using this format your limited to 256 colours, GIF is a lossless format, which means that no image quality is lost when the image is compressed. GIFs can be made transparent and can be animated as well.
    Small file size
    Supports transparent regions
    Supports animation
    Limited colours (supports up to 256 colours maximum)
    Doesn’t support partial transparency or alpha-blending; making transparent regions look chipped and unsmooth
    PNG (PNGs are my preferred choice when it comes to background images and logos; especially when full or partial transparency is involved)
    Can be in true or indexed colour format
    Supports true transparency and alpha-blending
    Cannot be animated
    File size can be big
    Cross-browser support is an iffy deal (especially when it comes to Internet Explorer)
36. PNG-8 and PNG-24 – 8-bit PNGs mean that the image is 8 bits per pixel, while 24-bit PNGs mean 24 bits per pixel. PNG-24 can handle a lot more color and is good for complex images with lots of color such as photographs (just like JPEG), while PNG-8 is more optimized for things with simple colors, such as logos and user interface elements like icons and buttons. PNG-24 natively supports alpha transparency, which is good for transparent backgrounds.
    For details: http://sixrevisions.com/web_design/web-designers-guide-to-png-image-format/.
    There are other formats too – such as TIF,TGA, ICO, and others but none of these are useful on the Web since they are not viewable in Web browsers.
    You can read more about these image formats on Wikipedia:
    Start at the top and work down.
    Working logically helps you break the job down into sections so that you can work on one thing at a time and plan the work accordingly.
    Naming convention.
    I like to use logical names for the sections and although there is some debate about what to use for each element it does help if your naming convention allows for the fact that maybe your html will be arranged at a later date and that your element names still make sense. If for instance your left column is called #leftcol and the at a later date you switch it using CSS to be the right column then it could be very confusing. It’s better to use a more generic but functional name such as #sidebar1 for the left column and #sidebar2 for the right column.
    Remember that IDs must be unique and can’t be used more than once per page.
    CSS Reset and CSS Framework.
    Declare the Correct DocType.
    The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup.
    Don’t use inline styles.
    Inline styles cause more maintenance headaches. Inline CSS should not be allowed in strict doctypes.
    Add all CSS Files Within the Head Tag.
    Putting stylesheets in the HEAD allows the page to render progressively.
    Place Scripts at the Bottom of Your Page.
    Set up some reasonable defaults for text, link colors and font styles heading, img border, clear property.
    Ensure All Tags are Closed.
    Tag Names Lowercase.
    Compress Your CSS and order the properties.
    Minify JavaScript and CSS.
    Don’t forget the “alt” tags.
    Save HTTP Requests by Combining Images.
    CSS Sprites are the preferred method for reducing the number of image requests.
    Group External CSS Files.
    Group Selectors.
    Use Shorter Class and ID Names.
    Utilizing long class names can add additional bytes to a site, and slow it down in the process.

• Long names are great for allowing designers to understand them more clearly, but using shorter class and ID names can be more beneficial in the long run.
  CSS Comments Should Be Removed.
  create grouped css blocks and define each group in top in a comments.
  Abbreviate Hexadecimal Colors ( color:#fff;).
  Providing Fallback Fonts.
  Redundant Units For Zero Values (padding:0 0 5px 0;).
  Avoid Mountain of Div Tags.
  Use Modular IE Fixes.
  Using Global Styles.
  Encoding Special Characters.
  Don’t use improperly nesting tags.
  Define accesskey when appropriate.
  Using a stylesheet for print allows you to hide elements you don’t want printed.
  Don’t use quotation marks around paths/URLs when setting a background image.
  Declare relative font sizes instead of absolute.
  Avoid !important.
  Clear floated containers.
  Avoid Extra Selectors.
  Use shortcuts while slicing it will save your time.
  Photoshop shortcut:
  http://morris-photographics.com/photoshop/shortcuts/downloads/PSCS3_Keyboard_Shortcuts_PC.pdf.
  If you do not use the web font for your design, please:
  Substitute images for the fonts.
  Utilize them by using the Cufon technique.
  Utilize them by using the sIFR technique.
  Utilize them by using the @font-face technique.
  Test with different browsers.
  Validate Your Code.
  

                            Css3-xhtml

• CSS is used to control the style and layout of Web pages.
• CSS3 is the latest standard for CSS.
• Let’s start about new features in CSS3!
• The CSS3 specification is still under development by W3C. However, many of the new CSS3 properties have been implemented in modern browsers.

CSS3 Modules

CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added.
Some of the most important CSS3 modules are:

• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

Properties :

1) CSS3 Borders:

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.
The following border properties are:

• border-radius
• box-shadow
• border-image
• Internet Explorer 9 supports two of the new border properties.
• Firefox requires the prefix -moz- for border-image.
• Chrome and Safari requires the prefix -webkit- for border-image.
• Opera requires the prefix -o- for border-image.
• Opera supports the new border properties.

A. Rounded corners:

In CSS3, the border-radius property is used to create rounded corners:

Syntax:

• -webkit-border-radius: 10px;  
• -moz-border-radius: 10px;  
• border-radius: 10px;  

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
Example:
<!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> border-radius </title>
<style type="text/css">
#box
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
<div id="box">The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
Result:

  

---

B. Circle :

we can also create circles by using this property.
Syntax:
·  -moz-border-radius: 50px;
·  -webkit-border-radius: 50px;
·   border-radius: 50px;
Example:

---

2.CSS3 Box Shadow:

In CSS3, the box-shadow property is used to apply shadow to boxes or depth of the elements.

Syntax:
·  -webkit-box-shadow: 1px 1px 3px #292929;
·  -moz-box-shadow: 1px 1px 3px #292929;
·  box-shadow: 1px 1px 3px #292929;
Box-shadow accepts four parameters:

• x-offset -1px
• y-offset - 1px
• blur - 3px 
• color of shadow - #292929

div
{
box-shadow: 10px 10px 5px #888888;
}
Example:
<!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> box-shadow </title>
<style type="text/css">
#box
{
width:300px;
height:100px;
background-color: #663333;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
Result:

---

B. box-shadow in color :  use  blue and green color to magnify each shadow.

Syntax:
·  -webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
·  -moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
·  box-shadow: 1px 1px 3px green, -1px -1px blue;
Example:
<!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> box-shadow in color </title>
<style type="text/css">
#box
{
width:300px;
height:100px;
background-color: #fff;
-moz-box-shadow: 3px 3px 3px green, -2px -3px blue; /* Firefox 3.6 and earlier */
box-shadow: 3px 3px 3px green, -2px -3px blue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Result:

 

---

C. Clever Shadows: By using shadows to the(:before )and (:after) in pseudo-classes, we can create shadow.

HTML:
<div class="box">
<img src="box.jpg" alt="clever" />
</div>
Syntax: css
.box:after { content: ‘ ‘;  position: absolute;
z-index: -1; /* hide shadow behind image */
 /* The Shadow */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);              
width: 70%;
 left: 15%; /* one half of the remaining 30% (see width above) */
height: 100px;
}
Example:
                 

---

D. Flexible Box Model:

The flexible model allows us to get away from the floats. It will wrap according to the properties.
Let’s create a simple two-column layout.
HTML:
<div id="container"> 
<div id="column1"> Column1content here </div> 
<div id="column2"> Column2 content here </div>
</div>
Syntax: css
#container {
background: none repeat scroll 0 0 #EEEEEE;
display: -moz-box;
height: 350px;
margin: auto;
width: 870px;
}
#column1 {background: #33FFFF ;}
#column2 {background: #9900CC ;}
Example:

When we fix width of the content area #column1, let see what will happen.
Syntax: css
#column1 {background: #33FFFF; width: 700px ;}
Example:

Note:
 Still the second column hasn’t taken all of the remaining space. By using the new box-flex property, the instruct element will take up all available space.
Syntax:
#column2{background:#9900CC;display: block; /* cause is HTML5 element */ 
/* take up all available space */ 
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
Example:
           
 

---

D. CSS3 Border Image:
With the CSS3 border-image property you can use an image to create a border:
The border-image property allows you to specify an image as a border!
Syntax:
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border-width:15px;
width:250px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(border.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the border-image property.</p>
<p>The border-image property specifies an image to be used as a border.</p>
<div id="round">Here, the image is tiled (repeated) to fill the area.</div>
<br />
<div id="stretch">Here, the image is stretched to fill the area.</div>
<p>Here is the image used:</p>
<img src="border.png" />
</body>
</html>
Result:

Property	Description
border-image	A shorthand property for setting all the border-image-* properties
border-radius	A shorthand property for setting all the four border-*-radius properties
box-shadow	Attaches one or more drop-shadows to the box

 

---

3) CSS3 Text Effects:

CSS3 Text Effects

CSS3 contains several new text features.
The following text properties are:

• text-shadow
• word-wrap

Browser Support:

Internet Explorer does not yet support the text-shadow property.
Firefox, Chrome, Safari, and Opera support the text-shadow property.
All major browsers support the word-wrap property.

---

A. text-shadow:

Text-shadow is quite similar to box-shadow. it must be applied to text by using same four parameters:

• x-offset
• y-offset
• blur
• color of shadow

Syntax:
h1 {  text-shadow: 0 1px 0 #fff;  color: #292929; }
Note: Internet Explorer does not support the text-shadow property.
 Example:
               

---

B. Text-Outline:

By using a comma as the separator, we can apply multiple shadows,
webkit offers a stroke effect for creating the outline for the text.
Syntax:
body { background: #ffffff; }
  h1 {text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
color: #ffffff;
  }
 Example:

---

C. Text-Stroke:

Webkit supports it (Safari, Chrome, iPhone). In this case, with white text, Firefox will display a seemingly blank page. You can either use JavaScript feature detection to get around this, or make sure that your base text color is not the same as the body’s background.
Syntax:
h1 {-webkit-text-stroke: 3px black; color: white ;}
Example:

---

D. text-overflow:

The text-overflow properties accept two values:

• clip
• ellipsis

This property can be used to cut off text that exceeds its container.
Syntax: css
.box {
Background-color:#eee;
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 350px;
padding: 20px;
cursor: pointer;
            }
    HTML:
<div class="box">
This property can be used to cut off the over-flowing text that exceeds its container….. </div>
Example:

---

E. Resize: textarea

CSS3 module allows to resize a textarea . The browser support as of Firefox 4 and Safari 3. By default, webkit browsers and Firefox 4 allow to resize the textarea both in vertically and horizontally.
    HTML:
<textarea name="elem" id="elem" rows="5" cols="50"></textarea>
Syntax: css
textarea {
-moz-resize: vertical;
 -webkit-resize: vertical;
 resize: vertical;
}

Possible Values

• both: Resize vertically and horizontally
• horizontal: Limit resizing to horizontally
• vertical: Limit resizing to vertically
• none: Disable resizing

Example:
      

---

F.  Word Wrapping:

• If a word is too long to fit within an area, it expands outside:
• This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
• In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:
• This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Syntax:
p {word-wrap:break-word;}
Example:
<!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> Word Wrapping </title>
<style type="text/css">
body{margin:0 auto; width:500px; background:#eee}
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
p {word-wrap:break-word;}
</body>
</html>
Result:

---

New Text Properties

Property	Description
hanging-punctuation	Specifies whether a punctuation character may be placed outside the line box
punctuation-trim	Specifies whether a punctuation character should be trimmed
text-align-last	Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"
text-emphasis	Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text
text-justify	Specifies the justification method used when text-align is "justify"
text-outline	Specifies a text outline
text-overflow	Specifies what should happen when text overflows the containing element
text-shadow	Adds shadow to text
text-wrap	Specifies line breaking rules for text
word-break	Specifies line breaking rules for non-CJK scripts
word-wrap	Allows long, unbreakable words to be broken and wrap to the next line

---

5) CSS3 Backgrounds:

CSS3 contains several new background properties,
which allow greater control of the background element.
The following background properties:

• background-size
• background-origin
• use of multiple background images

Firefox 3.6 and earlier does not support the background-origin property, and requires the prefix -moz- to support the background-size property.
Safari 4 requires the prefix -webkit- to support the new background properties.
Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support the new background properties.

A. The background-size Property:

• The background-size property specifies the size of the background image. It will accept two parameters: the x and y widths, respectively.
• Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts.
• You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element.

• If we wanted a particular image to take up the entire background of the body element, then the code below will take up all available space direct the background image.

Syntax: Resize a background image:
div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}
Example 1:
<!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> Resize- background-image </title>
<style type="text/css">
#wrapper
{ margin:auto; width:500px;
background:url(../4oct-business/images/img1.jpg);
background-size:80px 60px;
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Original image: <img src="../4oct-business/images/img1.jpg" height="100" width="282"/></p>
</div>
</body>
</html>
Result:

---

Example 2:
<!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> Resize- background-image- %</title>
<style type="text/css">
#wrapper
{ margin:auto; width:500px;
background:url(../4oct-business/images/img1.jpg);
background-size:100% 100%;
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Original image: <img src="../4oct-business/images/img1.jpg" height="100" width="282"/></p>
</div>
</body>
</html>
Result:

---

 

B. The background-origin Property:

The background-origin property specifies the positioning area of the background images.
The background image can be placed within the content-box, padding-box, or border-box area. 

Syntax:

Position the background image within the content-box:
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
Example:
<!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>background-origin </title>
<style type="text/css">
body{margin:0 auto; width:500px;}
div
{
border:1px solid black;
padding:35px;
background-image: url(../4oct-business/images/right-img7.jpg);
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Result:

---

C. Multiple Backgrounds Images:

CSS3 allows you to use several background images for an element. You might use a texture, a gradient color, and images in the background.
By using a comma as the separator, we’re referencing two separate background images. Notice how, in the first case, it’s placed in the top left position (0 0), and, in the second, the top right position (100% 0).
Syntax:
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
Example:

                    

New Background Properties

Property	Description
background-clip	Specifies the painting area of the background images
background-size	Specifies the positioning area of the background images
background-origin	Specifies the size of the background images

---

7) CSS3 Fonts

With css3, web designers are no longer forced to use only “web-safe” fonts.

A. @ Font-face Rule:

• Before CSS3, web designers had to use fonts that were already installed on the user's computer.
• With CSS3, web designers can use whatever font he/she likes.
• When you have found/bought the font you wish to use, simply include the font file in the web site, and it will be downloaded automatically to the user when needed.
• You will have to describe your selected font with the new CSS3 @font-face rule.
• In the @font-face rule you define a name for the font, and the URL to the font file:

Syntax:
           To use the new font, add "myFirstFont" as the value of the font-family property:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot') format("opentype"); /* IE */
}
Example:
<!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>background-origin </title>
<style type="text/css">
body{margin:0 auto; width:500px; background:#eee}
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer only supports .eot fonts.</p>
<div>
With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.
</div>
</body>
</html>

Browser Support:

Internet Explorer only support fonts of type .eot (Embedded OpenType).
Firefox, Chrome, Safari, and Opera support fonts of type .ttf (True Type Fonts) and      .otf (OpenType Fonts).

---

B. Using Bold Text:

You must add another @font-face rule containing descriptors for bold text:

• The file "Sansation_Bold.ttf" is another font file, that contains the bold characters for the Sansation font.
• Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.
• This way you can have many @font-face rules for the same font.

Syntax:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot') format("opentype"); /* IE */
}
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf')
,url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer only support .eot fonts.</p>
<div>
With CSS3, websites can <b>finally</b> use new fonts!
</div>
</body>
</html>

---

CSS3 Font Descriptors

The following table lists all the font descriptors that can be defined inside
the @font-face rule:

Descriptor	Values	Description
font-family	name	Required. Defines a name for the font
url	URL	Required. Defines the URL to the font file
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default is "normal"
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default is "normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default is "normal"
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"

---

7) CSS3 2D Transforms

With CSS3 transform, we can move, scale, turn, spin, and stretch elements.

• A transform is an effect that lets an element change shape, size and position.

• You can transform your elements using 2D or 3D transformation.

We will learn about the 2d transform methods:

• translate()
• rotate()
• scale()
• skew()
• matrix()

Browser Support:

• Internet Explorer 9 requires the prefix -ms-.
• Firefox requires the prefix -moz-.
• Chrome and Safari requires the prefix -webkit-.

• Opera requires the prefix -o-.

---

A. CSS3 Transforms:

Syntax:
div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
Example:
<!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> Transforms </title>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:#660000;
border:1px solid black;
color:#fff;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

---

B. The translate() Method:

With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:
Syntax:
div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
Example:
<!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> translate Method </title>
<style type="text/css">
body{margin:0;padding:50px; }
div
{
width:200px;
height:75px;
background-color: #CC9900;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">World. This is a DIV element.</div>
</body>
</html>
Result:
                   

---

C. The rotate() Method:

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotate the element counter-clockwise.
Syntax:
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
Example:
<!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> The rotate Method </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee }
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element. </div>
</body>
</html>
Result:

---

D. The scale() Method:

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):
Syntax:
The value scale(2,4) transforms the width to be twice its original size, and the   height 4 times its original size.
div{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
Example:
<!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> scale Method </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee }
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element. </div>
<div id="div2">World. This is a DIV element. </div>
</body>
</html>
Result:

---

E. The skew() Method:

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:
Syntax: The value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around the Y-axis.
div{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
Eample:         
<!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> skew Method </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; color:#fff }
div
{
width:100px;
height:75px;
background-color:#660066;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">World. This is a DIV element.</div>
</body>
</html>
Result: 
           

---

F. The matrix() Method:

• The matrix() method combines all of the 2D transform methods into one.
• The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

Syntax:    How to rotate a div element 30 degrees, using the matrix method
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
Example:   
<!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> matrix Method </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; color:#fff }
div
{
width:100px;
height:75px;
background-color: #660066;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">World. This is a DIV element.</div>
</body>
</html>
Result:   
           

---

The following table lists are New Transform Properties:

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on transformed elements

2D Transform Methods

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n)	Defines a 2D translation, moving the element along the X-axis
translateY(n)	Defines a 2D translation, moving the element along the Y-axis
scale(x,y)	Defines a 2D scale transformation, changing the elements width and height
scaleX(n)	Defines a 2D scale transformation, changing the element's width
scaleY(n)	Defines a 2D scale transformation, changing the element's height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis

---

8) CSS3 3D Transforms

          CSS3 allows you to format your elements using 3D transforms.
The 3D transforms methods are:

• rotateX()
• rotateY()

Browser Support:

Internet Explorer, Firefox, and Opera does not yet support the 3D transform methods.
Chrome and Safari requires the prefix -webkit-.
Let’s see the difference between a 2D transform and a 3D transform:

---

A. The rotateX() Method:

With the rotateX() method, the element rotates around its X-axis at a given degree.
Syntax:   
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

---

B. The rotateY() Method:

With the rotateY() method, the element rotates around its Y-axis at a given degree.
Syntax:   
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

---

The following table lists are the transform properties:

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on transformed elements
transform-style	Specifies how nested elements are rendered in 3D space
perspective	Specifies the perspective on how 3D elements are viewed
perspective-origin	Specifies the bottom position of 3D elements
backface-visibility	Defines whether or not an element should be visible when not facing the screen

3D Transform Methods:

Function	Description
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z)	Defines a 3D translation
translateX(x)	Defines a 3D translation, using only the value for the X-axis
translateY(y)	Defines a 3D translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z)	Defines a 3D scale transformation
scaleX(x)	Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y)	Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotateX(angle)	Defines a 3D rotation along the X-axis
rotateY(angle)	Defines a 3D rotation along the Y-axis
rotateZ(angle)	Defines a 3D rotation along the Z-axis
perspective(n)	Defines a perspective view for a 3D transformed element

9.css3  Transition:

• Without using JavaScript or Flash animations, CSS3 is the ability to apply animations to the instruct elements. IE9 still won’t support CSS transitions.

• CSS3 transitions are effects that let an element gradually change from one style to another.

• Let’s try for the simple effect. When you hover a link in a sidebar, the text will slide to the right ever slightly.

Note: If the duration is not specified, the transition will have no effect, because default value is 0.
The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

---

Syntax:1
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
Specify :hover for <div> elements:
div:hover
{
width:300px;
}
 Example:
ul a { 
-webkit-transition: padding .5s; 
-moz-transition: padding .5s; 
-o-transition: padding .5s; 
transition: padding .5s; 
}
a: hover { padding-left: 6px; }  
HTML:
<ul>
<li> <a href="#"> One Over Me </a></li>
<li> <a href="#"> Two Over Me </a> </li>
<li> <a href="#"> Three Over Me </a> </li>
<li> <a href="#"> Four Over Me </a> </li>
<li> <a href="#"> Five Over Me </a> </li>
</ul>
 Note: We don’t directly apply the transition to the hover state of the anchor tag,  because, if we did, the animation would only take effect during mouseover. On mouseout, the element would immediately return to its intial state.
Transition will accept three parameters:

• The property to transition. (Set this value to all if needed)
• The duration
• The easing type

Example: View

Browser Support:

Internet Explorer does not yet support the transition property.
Firefox 4 requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Opera requires the prefix -o-.

---

B. Multiple changes:

To add a transitional effect for more than one style, add more properties, separated by commas:
Sytax:   Add effects on the width, height, and the transformation:
div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
The following table lists are  the transition properties:

Property	Description
transition	A shorthand property for setting the four transition properties into a single property
transition-property	Specifies the name of the CSS property to which the transition is applied
transition-duration	Defines the length of time that a transition takes. Default 0
transition-timing-function	Describes how the speed during a transition will be calculated. Default "ease"
transition-delay	Defines when the transition will start. Default 0

The two examples below sets all transition properties:

Example:1

Use all transition properties in one example:
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

Example:2

The same transition effects as above, using the shorthand transition property:
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

---

10. Horizontally and Vertically Centered:

By using flexible box model we can create data perfectly in center. Due to containing this data we can use the body element as a wrapper.
Step 1: Create a container .box, and then add two divs: one for the front size, and the other for the back.
HTML:
<body>
<div class="box"> 
<div>Hello</div> 
<div> World </div>
</div>
</body>
Syntax: css
body, html { height: 100%; width: 100%; }
body {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
      -moz-box-pack: center;
    -moz-box-align: center;
      -webkit-box-pack: center;
    -webkit-box-align: center;
    box-pack: center;
    box-align: center;
}
Example:
 

---

11. Styling the Box: Transition

If the instructed element have any changes to their state, then the change can possible by  transition (transition: all 1s).

Syntax: css
.box { 
background: #e3e3e3; 
border: 1px dashed #666; 
margin: auto; 
width: 400px; 
height: 200px; 
cursor: pointer; 
position: relative; 
-webkit-transition: all 1s; 
-moz-transition: all 1s; 
transition: all 1s; 
}   
Example: view

---

9. An Effective Shadow:

We learned earlier about shadow of box by by using the: after pseudo class.
Syntax: css
.box:after {
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.4);
    content: "";
    height: 10px;
    left: 15%;
    position: absolute;
    top: 95%;
    width: 70%;
    z-index: -1;
}
Example:

---

10. Styling of the instruct Children Divs: Text Transitions

The children divs take place right on top of each other. Let’s position them absolutely, and instruct them to take up all available space.
 Example: View
 

---

11. Rotating the Card :

when we hover over the card, it should flip around, and display the “back-side” of the card (at the least the illusion of the “back-side”). For this effect, use transformations and the rotateY function.
Syntax1: css
.box:hover {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);
}
 Example: 1
       

---

Example3: Transition-rotate
<!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>transition-rotate </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee;  }
div
{color:#fff;
width:100px;
height:100px;
background:#663366;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer, Firefox and Opera does not support the rotateX method.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">World. This is a DIV element.</div>
</body>
</html>
Result: click on image
  

---

 Example4: Transition-linear
<!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>transition-linear </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{color:#fff;
width:100px;
height:100px;
background: #663366;
transition-property:width 1s linear 1s;
/* Firefox 4 */
-moz-transition:width 1s linear 1s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 1s;
/* Opera */
-o-transition:width 1s linear 1s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div>Hello. Hover over the div element above, to see the transition effect.</div>
<div id="div2">World. The transition effect will wait 2 seconds before starting.</div>
</body>
</html>
Result: click on image

---

12) CSS3 Animations

• An animation is an effect that lets an element gradually change from one style to another.
• With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.

• You can change as many styles as many times as you want.
• Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.
• 0% is the beginning of the animation, 100% is when the animation is complete.
• For best browser support, you should always define both the 0% and the 100% selectors.
• When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

• Specify the name of the animation
• Specify the duration of the animation

Browser Support

Internet Explorer and Opera do not yet support the @keyframes rule or the animation property.
Firefox requires the prefix -moz-, while Chrome and Safari require the prefix -webkit-.

CSS3 @keyframes Rule

To create animations in CSS3, you will have to learn about the @keyframes rule.
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

The following table lists are the @keyframes rule and all the animation properties:

Property	Description
@keyframes	Specifies the animation
animation	A shorthand property for all the the animation properties, except the animation-play-state property
animation-name	Specifies the name of the @keyframes animation
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0
animation-timing-function	Describes how the animation will progress over one cycle of its duration. Default "ease"
animation-delay	Specifies when the animation will start. Default 0
animation-iteration-count	Specifies the number of times an animation is played. Default 1
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"
animation-play-state	Specifies whether the animation is running or paused. Default

Syntax 1: @keyframes rule or the animation property.

@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

Example:

<!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>animation-backcolor </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{
width:300px;
height:300px;
background:#663399;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
</style>
</head>
<body>
<div>Hello World. Hover over the div element above, to see the transition effect.
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</div>
</body>
</html>

Result: click in image

---

Syntax 2:

Change the background color and position:
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

---

Example:

<!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>animation-rotation </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee;color:#fff }
div
{
width:200px;
height:200px;
background: #663366;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div>Hello World.
<p> Hover over the div element above, to see the Animation effect.</p>
</div>
</body>
</html>

Result: click on image

---

Syntax 3:  

Change the background color when the animation is 25%, 50%, and again   when the animation is 100% complete:@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}

---

Syntax 4:

Run an animation called myfirst, with all the animation properties set:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

---

Syntax 5:

The same animation as above, using the shorthand animation property:
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

---