Sunday, 24 June 2012

image opicity in css


Example 1 - Creating a Transparent Image The CSS3 property for transparency is opacity. First we will show you how to create a transparent image with CSS. Regular image: klematis The same image with transparency: klematis Look at the following CSS: img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent. Example 2 - Image Transparency - Hover Effect Mouse over the images: klematis klematis The CSS looks like this: img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hover over one of the images. In this case we want the image to NOT be transparent when the user hover over it. The CSS for this is: opacity=1. IE8 and earlier: filter:alpha(opacity=100). When the mouse pointer moves away from the image, the image will be transparent again. Example 3 - Text in Transparent Box This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. The source code looks like this:

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.
Posted by at No comments:

CSS Margin

Margin The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. Possible Values Value Description auto The browser calculates a margin length Specifies a margin in px, pt, cm, etc. Default value is 0px % Specifies a margin in percent of the width of the containing element inherit Specifies that the margin should be inherited from the parent element Remark It is possible to use negative values, to overlap content. Margin - Individual sides In CSS, it is possible to specify different margins for different sides: Example margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; Margin - Shorthand property To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property. The shorthand property for all the margin properties is "margin": Example margin:100px 50px; The margin property can have from one to four values. margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px 50px; top and bottom margins are 25px right and left margins are 50px margin:25px; all four margins are 25px
Posted by at No comments:

Saturday, 23 June 2012

Create Contact Page In Blogger

1. Go to Emailmeform and click the signup button on the page.
3. Now write all the information they ask from you and press Signup button.
4. An activation email will be sent to your inbox. Go to your inbox and activate your new account.
5. Now again go to Emailmeform.com and login there.
7. After login, click Add Form button on the top right of your page.
8. Now you have 2 options to select. Then select the first option: Go to the Template section .....
9. Now your form will be in front of you. Click the Customize button on the page.
10. Edit your form on the left side of the page. After you have done editing click Save Form below the page.
11. Then a small window will open. There will be 4 options. Click to the option which says Take me back to the form manager.
12. Now you will see a many options like Edit, View, Data.... Click to the option Code.
13. You will see 4 options on the left side of the page. Click HTML with Javascript / CSS.
14. Now copy all the code and save it anywhere on your disk.
15. Now login to blogger and go to the Posting > Edit Pages and click New Page.
16. Click Edit HTML button on the page and paste all the code you copied.
17. Now click Compose button on the right side of Edit HTML button.
18. Set the title of your page and publish it.

Now you can check your new contact form on the contact page of your blog.
Posted by at No comments:

Rounded-Corner Elements

7 Quick CSS Enhancements for Better User Experience

The beauty in CSS is that a tiny directive can make a huge difference in how the page displays. Here are seven quick CSS snippets that will give your website more "pop" and make your user's experience more functional and enjoyable.

Change Text Highlight Color

copy::selection      { background:#c3effd; color:#000; /* Safari and Opera */ }
::-moz-selection  { background:#c3effd; color:#000; /* Firefox */ }
The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you'd like!

Prevent Firefox Scrollbar Jump

copyhtml { overflow-y:scroll; }
Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn't reach below the fold, thus creating an undesireable "jump." The above snippet prevents that.

Rounded-Corner Elements

copyinput    { -moz-border-radius:10px; -webkit-border-radius:10px; }
Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.

Print Page Breaks

copy.page-break    { page-break-before:always; }
Don't forget that many users print off your informational pages! The above CSS snippet allows you to set page breaks within each page.

Attribute-Specific Icons

copya[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }
Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.

CSS Pointer Cursors

copyinput[type=submit],label,select,.pointer  { cursor:pointer; }
New rule for you to live by: if the user is meant to click on any element, it should have the "pointer" cursor when the user mouses over it. Links, buttons, SELECT elements, etc.

display:block Links

copy#navigation li a  { display:block; }
When you've built a navigation menu with UL/LI/A elements, be sure to set each anchor 's display property to "block" so that the user doesn't necessarily need to hover over the anchor's text for the link to work.
Posted by at No comments:

Gradient Terms and Ideas in css

Gradient Terms and Ideas

Gradients provide a method to, over a customizable amount of space, transition from one color to another.  Gradients come in two variants:  linear (one consistent gradient) and radial (circular).  While gradients are obviously graphical elements, they're simplistic in creation which makes them outstanding candidates for simple, programmatic creation via CSS.  CSS3 introduced CSS gradients but their implementation took longer than we all wanted.

CSS Linear Gradient Syntax

The linear gradient implementations are different in each browser but there is a set standard:
copybackground-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]* )</stop></stop></stop></angle></point>
The first argument is the point of which to start the gradient or the angle at which the gradient should be drawn.  The subsequent arguments are "color stops" along the gradient.  Two color stops are required (start and end), but any number of color stops can be added for increased customization of the gradient.  Color stops can include just a color or a color and percentage or point:
copy/* old:  color-stop(percentage/amount,color) */
color-stop(0.20,red)

/* current:  color _ percentage/amount */
#dea222 20%
As is the case with most newer, advanced CSS capabilities, each browser tends to provide its own implementation.  WebKit, for example, even has multiple syntaxes.  The following code snippet should cover all the bases for a basic, top-to-bottom linear gradient:
copy#example1  {
  /* fallback */
  background-color:#063053;
  /* chrome 2+, safari 4+; multiple color stops */
  background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99));
  /* chrome 10+, safari 5.1+ */
  background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99);
  /* firefox; multiple color stops */
  background-image:-moz-linear-gradient(top,#063053,#395873,#5c7c99);
  /* ie 6+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
  /* ie8 + */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
  /* ie10 */
  background-image: -ms-linear-gradient(#063053,#395873,#5c7c99);
  /* opera 11.1 */
  background-image: -o-linear-gradient(#063053,#395873,#5c7c99);
  /* The "standard" */
  background-image: linear-gradient(#063053,#395873,#5c7c99);
}
Note that a basic background-color is provided first.  This background-color is a fallback for browsers that have not yet implemented CSS gradients.  The CSS gradient spec allows for degree'd CSS gradients instead of basic top-to-bottom gradients.  These can be accomplished with the following syntax:
copy#example2  {
  /* fallback */
  background-color:#063053;
  /* chrome 2+, safari 4+; multiple color stops */
  background-image:-webkit-gradient(linear,left bottom,right top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99));
  /* chrome 10+, safari 5.1+ */
  background-image:-webkit-linear-gradient(45deg,#063053,#395873,#5c7c99);
  /* firefox; multiple color stops */
  background-image:-moz-linear-gradient(45deg,#063053,#395873,#5c7c99);
  /* ie10 */
  background-image: -ms-linear-gradient(45deg,#063053 0%,#395873 100%);
  /* opera 11.1 */
  background-image: -o-linear-gradient(45deg,#063053,#395873);
  /* The "standard" */
  background-image: linear-gradient(45deg,#063053,#395873);
}
Or how about a more ... colorful CSS gradient?  Let's do a rainbow gradient:
copy/* example 3 - linear rainbow */
#example3  {
  /* fallback */
  background-color:#063053;
  /* chrome 2+, safari 4+; multiple color stops */
  background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange));
  /* chrome 10+, safari 5.1+ */
  background-image:-webkit-linear-gradient(red,green,blue,purple,orange);
  /* firefox; multiple color stops */
  background-image:-moz-linear-gradient(top,red,green,blue,purple,orange);
  /* ie10 */
  background-image: -ms-linear-gradient(red,green,blue,purple,orange);
  /* opera 11.1 */
  background-image: -o-linear-gradient(red,green,blue,purple,orange);
  /* The "standard" */
  background-image: linear-gradient(red,green,blue,purple,orange);
}
A quick note about Internet Explorer's gradient support.  Internet Explorer's filter and -ms-filter syntax takes precedence over the newer -ms-linear gradient syntax.  It's best to use IE conditional comments to create reliable gradients:
copy<!--[if lt IE 10]>
<style>
.gradientElement {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
}
</style>
<![endif]-->
Not ideal but reliability is important when designing a website.

CSS Radial Gradients

Radial gradients are unlike linear gradients because they don't move from one simple direction to another;  they start with a center-point and move outward at 360 degrees.  Radial gradients are not supported by Internet Explorer at this time, and the browsers that do support radial gradients have had significantly different syntaxes...I'm looking at you, WebKit! WebKit has, however, overhauled their radial gradient syntax.  Here's a brief look at the current-but-soon-to-be-legacy radial gradient code:
copy/* basic */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));
/* color stops */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange));
WebKit recently announced its new syntax for creating radial gradients which happens to fall in line with Firefox's implementation:
copyradial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*)</stop></stop></stop></size></shape></angle></position>
This radial gradient syntax works in Firefox 4 and the WebKit nightlies.  There are a number of size constants available with radial gradients:
  • closest-side: The gradient's shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
  • closest-corner: The gradient's shape is sized so it exactly meets the closest corner of the box from its center.
  • farthest-side: Similar to closest-side, except the shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
  • farthest-corner: The gradient's shape is sized so it exactly meets the farthest corner of the box from its center.
  • contain:  A synonym for closest-side.
  • cover:  A synonym for farthest-corner.
A basic usage of a radial gradient would look like:
copy#example4 {
  background-image: -moz-radial-gradient(orange, red);
  background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
  background-image: -webkit-radial-gradient(orange, red); /* new syntax */
  background-image: radial-gradient(orange, red);
}
Note that no positioning or size has been given -- simply two color stops to it over the course of the gradient.  Any number of color stops can be used so a simple rainbow gradient would look like:
copy#example5 {
  background-image: -moz-radial-gradient(red,green,blue,purple,orange);
  background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */
  background-image: -webkit-radial-gradient(red,green,blue,purple,orange); /* new syntax */
  background-image: radial-gradient(red,green,blue,purple,orange);
}
A more customized radial gradient with positioning and detailed color stops would look like:
copy#example6 {
  background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
  background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
  background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}
Note that my examples are using hex colors and px units.  You may use any of the color constructs or measuring units with your gradients.

CSS Gradients:  Tips and Tricks

CSS gradients are quite valuable but can be difficult to implement.  Even when you've got the gradient you want, browser support can be different.  Here are a few tips for using CSS gradients:
  • Want opacity within your gradients?  Use rgba colors.
  • Always use a fallback background so that clients that doesn't support gradients aren't hung out to dry.
  • Both Firefox and WebKit-based browsers provide prefixed repeating-linear-gradient and repeating-radial-gradient capabilities.  An example of usage:
    copy#example7 {
  background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);
  background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
}
  • If gradient are critical (i.e. charting, animation, etc.), I highly recommend using Dojo's GFX library, which is a masterpiece of vector graphic creation.  GFX also allows for radial gradients in Internet Explorer!

CSS Gradient Fallbacks

Older browsers like Internet Explorer 6 and 7, along with Opera and older versions of Firefox, don't support CSS gradients so the best fallback for such cases is defining a regular background property with a color of your choice:
copy/* example 1 - basic */
#example1  {
  /* fallback */
  background-color:#063053;
  /* gradients below */
}
Posted by at No comments:

how we can set box-shadow Property in html

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari
The box-shadow property is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.
Safari supports an alternative, the -webkit-box-shadow property.

Definition and Usage

The box-shadow property attaches one or more drop-shadows to the box.
Default value: none
Inherited: no
Version: CSS3
JavaScript syntax: object.style.boxShadow="10px 10px 5px #888888"

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;
Note: The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.

Value Description Play it
h-shadow Required. The position of the horizontal shadow. Negative values are allowed Play it »
v-shadow Required. The position of the vertical shadow. Negative values are allowed Play it »
blur Optional. The blur distance Play it »
spread Optional. The size of shadow Play it »
color Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values Play it »
inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow Play it »

Posted by at No comments:
Subscribe to: Posts (Atom)