Google Web Fonts CSS3

Before Google fonts it was very hard to use different font styles, designer/developers were stick to use Arial, Georgia, Verdana, Times New Roman - web-safe fonts that a majority of web users have installed on their computer. Now with the Google Web Font API is becoming an excellent source to find and easily import fonts. The directory, as of now contains over 573 font families listed freely. Using CSS or Javascript you can import and embed any of these fonts on your Website or WordPress installation.

To use a font you first need to find a suitable font for this you have to go to http://www.google.com/webfonts

find a font and click on Quick-Use

from there you will three different options to embed code on your site, use the standard method that make use of <style> tag, other option is @import directive, @import is not supported by some older browser versions, and it has also been shown the be less efficient than using the <style> tag to include stylesheets, thirdly there is a javascript option which should only be used if you have special requirements like loading a special font on demand, etc. We will use the standard option for this tutorial, copy the whole text and paste in the HEAD of the HTML page.

<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>

Now that we have successfully import our "Happy" font in our page we now need a simple CSS to use it.

.myPreciousClass{
 font-family:'Happy Monkey', cursive;
 /* Place your font name in single quotes
       and declare a font to fall back on */
}

Use the class and you should get results somthing like this.

Continue Reading...

CSS Rounded Corners Example

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3. It offers a clean and easy way of adding rounded corners to elements on the page. The rounded corner look can be applied to any or all four corners of an element, and even works with elements with a background image. Now it works in all browser so it is cross browser compatible.

Syntax

border-radius: top-left, top-right, bottom-right, bottom-left;

The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Examples

border-radius: 15px;

Tutorial Jinni

you can also use it like this

border-bottom-right-radius:15px;
border-top-left-radius:15px;

Tutorial Jinni

or you can individually assign radius to all the four corners.

border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;

Tutorial Jinni

Continue Reading...

CSS Text Shadow Examples

CSS Text Shadows can create a variety of different effects on a website, like create depth, dimension, contrast and many other just by using simple CSS code. The best thing about these effects is, it can be achieved with pure CSS, no image replacements and image heavy web designs. CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows.

text-shadow: <horizontal-offset> <vertical-offset> <blur-radius>* <color>*

1. horizontal-offset: The horizontal offset of the shadow (in any valid CSS unit) relative to the text. A negative value places the shadow to the left of the text. 
2. vertical-offset: The vertical offset of the shadow (in any valid CSS length unit) relative to the text. A negative value places the shadow to the top of the text. 
3. blur-radius*: Optional value to set the strength of the blue (in any valid CSS length unit). Defaults to 0 if not specified. A large blur-radius value 
4. color*: Optional value to set the color of the shadow. The value can be defined either at the start or very end of text-shadow. Defaults to the UI color if not specified. 

Note: Values with asterisks following them (*) denote they are optional.

Examples

text-shadow: 2px 2px 2px #33CC66;

CSS is Cool!

Double Shadow

CSS text-shadow property does not restrict you to with one shadow you can use as many shadows as you want. Syntax will be

text-shadow: shadow-one, shadow-two, shadow-three;

an example will be...

text-shadow: 4px 3px 0px #fff, 
9px 8px 0px rgba(0,0,0,0.15);

CSS is Cool!

text-shadow:0px 3px 0px #33CC66,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);

Tutorial Jinni

Continue Reading...

CSS Rounded Corners Without Images

Roundness look good than the sharp edges, also it gives a sleek look, in web applications we normally make round images with the help of images, which is a tough task in making images and adjusting them too, in this tutorial we will make round corners with the help of CSS and also without CSS3, the concept is to make layers of line of different lengths pile up on each other to give a feeling of roundness.

.layer1 , .layer2 , .layer3 , .layer4{
font-size:1px;
overflow:hidden; 
display:block;
height:1px;
background:#EEEEEE;
}
.layer1{
margin:0 1px;
}
.layer2{
margin:0 2px;
}
.layer3{
margin:0 3px;
}
.layer4{
margin:0 5px;
}

only thing in this CSS is background:#EEEEEE; assign color to it whatever you want, to use it simple use the classes i.e.

 
Please Authenticate Yourself !
 
 
Pass Pharse : 
 
 
 
 

this combination of <b> in the above example give you the upper round corners of the table if you want lower round corners too just simply reverse the order of the divs, when you apply this you will get result similar as shown in images.

Continue Reading...