Simple Horizontal Drop Down Menu Using Css


Example :

<style type=”text/css”>
ul.dropdown,
ul.dropdown li,
ul.dropdown ul
{
list-style:none;
padding:0;
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
ul.dropdown
{
float:left;
position:relative;
z-index:111;

}
ul.dropdown li
{
float:left;
}

ul.dropdown li:hover
{
position:relative;
z-index:113;
}
ul.dropdown ul
{
position:absolute;
z-index:112;
visibility:hidden;
}
ul.dropdown ul li
{
float:none;
}
ul.dropdown li:hover > ul {

visibility:visible;
}
</style>

<div>
<ul class=”dropdown”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a>
<ul><li><a href=”#”>Menu 1</a></li><li><a href=”#”>Menu 2</a></li></ul>
</li>
</ul>
</div>

CSS3 Text Effects


CSS3 contains several new text features.

In this chapter you will learn about the following text properties:

  • text-shadow
  • word-wrap

Note :

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.

CSS3 Text Shadow

In CSS3, the text-shadow property applies shadow to text.

text_shadow_effect

You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

Example

Add a shadow to a header:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

CSS3 Word Wrapping

If a word is too long to fit within an area, it expands outside:

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:

The CSS code is as follows:

Example

Allow long words to be able to break and wrap onto the next line:

p {word-wrap:break-word;}

CSS3 Backgrounds


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

In this chapter you will learn about the following background properties:

  • background-size
  • background-origin

You will also learn how to use multiple background images.

Note :

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.

CSS3 The background-size Property

The background-size property specifies the size of the background image.

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.

Example 1

Resize a background image:

div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Old Firefox */
background-size:80px 60px;
background-repeat:no-repeat;
}

CSS3 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.

Example

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;
}

how to disable hyperlink in css


CSS pointer-events

The responsibilities taken on by CSS seems to be increasingly blurring with JavaScript. Consider the -webkit-touch-callout CSS property, which prevents iOS’s link dialog menu when you tap and hold a clickable element. The pointer-eventsproperty is even more JavaScript-like, preventing:

  • click actions from doing anything
  • the default cursor pointer from displaying
  • CSS hover and active state triggering
  • JavaScript click events from firing

One CSS property is capable of doing just that!

The CSS

The pointer-events property can have many values, but many of them are only applicable to SVG*:

autononevisiblePainted*visibleFill*,visibleStroke*visible*painted*,

fill*stroke*all*, andinherit. The none value prevents the click, state, and cursor actions:

.disabled { pointer-events: none; }

A few quick notes about pointer-events:

  • If children of the element have pointer-events explicitly enabled, clicks will be allowed on those child elements.
  • If you add a click event listener to an element, then remove the pointer-events style (or change its value to auto, the click event will fire the designated functionality. Basically, the click event respects the pointer-events value.

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.

In this chapter you will learn about the following border properties:

  • border-radius
  • box-shadow
  • border-image

Note :

Internet Explorer 9 supports border-radius and box-shadow.

Firefox supports all of the new border properties.

Chrome and Safari support border-radius and box-shadow, but require the prefix -webkit- for border-image.

Opera supports border-radius and box-shadow, but requires the prefix -o- for border-image.

CSS3 Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.

In CSS3, creating rounded corners is easy.

Example

Add rounded corners to a div element:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

CSS3 Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes:

Example

Add a box-shadow to a div element:

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 Border Image

With the CSS3 border-image property you can use an image to create a border:

 

Example

Use an image to create a border around a div element:

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 Introduction


CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.

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

CSS3 Recommendation

The CSS3 specification is still under development by W3C.

However, many of the new CSS3 properties have been implemented in modern browsers.

CSS3 Tutorial


CSS is used to control the style and layout of Web pages.

CSS3 is the latest standard for CSS.

This tutorial teaches you about the new features in CSS3!

CSS3 Example

div

{
transform:rotate(30deg);
}

Example Code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Transform – Rotate</title>
<style type=”text/css”>
div
{
background:#FFFF33;
width:300px;
height:100px;
border:1px solid #000;
transform:rotate(30deg);
}
</style>
</head>

<body>
<div>
test content test content test content test content test content test content test content test content test content
</div>
</body>
</html>