7 Important Things You Must Know About CSS3

If you are eager to read some unique features of CSS3 properties then this post going to help you.

In this post I'm sharing some important CSS3 properties. These properties includes @font-face, CSS Layout-Grid, Include-Source, HSL and HSLA Property, Size Property and many more.

Embedding a Font Face

The @font-face let you to attach external list of fonts in your CSS. Here's the following CSS code to do that:

@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
}
.NewCSS3_class {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}

You can also apply with CSS3 Shadow effect:

@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
}
.NewCSS3_class {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
text-shadow: 3px 3px 7px #111;
}

CSS Layout-Grid

The ‘layout-grid’ property is a shorthand method used to set the ‘layout-grid-mode’, ‘layout-grid-type’, ‘layout-grid-line’, ‘layout-grid-char’, and ‘layout-grid-char-spacing’ properties using a single property notation.

div.LayoutGrid {layout-grid: both loose 15px 15px 2cm;}

CSS Include-Source

This property gives you a freedom to inserts another document into the current document, replacing the current element’s content.

div {
position: absolute;
top: 100px; left: 300px;
width: 200px; height: 200px;
border: thin solid black;
include-source: url(http://www.example.com/testpage.htm);
}

HSL and HSLA Property

The HSL declaration sets color/colour using Hue (H), Saturation (S) and you maybe guessed it, Lightness (L).

Hue is derived from a degree on the color wheel: 0 & 360 being red, around 120 for the greens, 240 for the blues and everything else in between.

Saturation is a percentage: 0% being grayscale and 100% in full color.

Lightness is a percentage: 0% is dark, 50% the average and 100% the lightest.

HSL CSS code:

div.L1 { background:hsl(320, 100%, 50%); height:20px; }
div.L2 { background:hsl(320, 50%, 50%); height:20px; }
div.L3 { background:hsl(320, 100%, 75%); height:20px; }

HSLS CSS code:

div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

Text-Autospae Property

This property controls the autospacing and narrow space width adjustment behavior of text.

div { text-autospace: ideograph-numeric; }

Size Property

This property describes the orientation or dimensions of the page box. The ’size’ property classifies a page box so that it is either ‘relative’ or ‘absolute’.

body { size: 8.5in 11in;}

CSS Ruby-Align

This property specifies the horizontal alignment of the Ruby Text (RT) relative to the RUBY element content.

ruby { ruby-align: right; ruby-position: above; ruby-overhang: whitespace }

<ruby style=”ruby-align: right; ruby-position: above; ruby-overhang: whitespace”>Ruby base content<rt>Ruby text</rt></ruby>

If you any opinion, please leave a comment.

Photoshop Tutorial: Let's Design a Awesome Login Page

Today in this tutorial you'll learn how to design a awesome login page by using Photoshop. After completing this tutorial you can use this login page in your project as well. Either you are a beginner or a intermediate level photoshop user this tutorial will guide you step by step process that how to use photoshop tools better to create nice looking login page.

I am sharing a full PSD and JPEG file of login page which is free to use and for your reference:

Download PSD File | Download JPEG File

Ok let's start now. Following is the preview of final login page that we are going to design:



Step 1

Open Photoshop and create a new page size 1024x768 pixels by pressing Ctrl+N or go to File and press new.



Step 2

Now select a Rectangular Marquee tool (Shortcut key is M) to create a new layer size 1024x45 pixels by pressing Ctrl+Shift+N, name it header bar. With selected Marquee selection press Alt+Backspace to fill a color, I am using this color code #0d141c.



You can place your logo over here like left side or right side.

Step 3

Now select a Rectangular Marquee tool (Shortcut key is M) to create a new layer size 1024x723 pixels by pressing Ctrl+Shift+N, name it whatever you like. With selected Marquee selection press Alt+Backspace to fill a color, I am using this color code #263137.



Step 4

In this step we will decorate the new layer that we have created in step 3 by using some pattern and lighting effects. To give a similar pattern effect like I have used here you need to create a new pattern for that. So create a new page size 50x50 pixels by pressing Ctrl+N with transparent background.



Now select Custom Shape tool and choose shape which I have chosen and create it by dragging a tool. After creating custom shape go to Edit and select Define Pattern and click ok.



Step 5

Now go to your main page (Login page) and select body layer, Now go to Layer > Layer Style > Blending Options and configure following blending effects and click ok:



Step 6

In this step give we will give lighting effect to the same layer select Filter > Render > Lighting Effects. and configure following settings:





Adjust position of lighting circle in middle of the layer by dragging it with the center dot or point and click ok.

Step 7

In this step we'll create a login box. Now you need to create a new rounded corner shape layer (size 404x233 pixels) by selecting Custom Shape tool and setting Redius by 10px. Before creating rounded shape set your Foreground color to White.



Now go to Layer > Layer Style > Blending Options and configure following blending effects and click ok:



Use this color code #c1cdd5 for outer glow effect.

Step 8

Now add a Sign In, User Name and Password by selecting some good fonts. I have used Trebuchet MS and Times New Roman fonts over here. Now create a text box for User Name, Password and Submit. For this we need to create one text box, will make a copy of the same to use for Password for instance.

Create a new layer size 374x31 pixels by pressing Ctrl+Shift+N and press Alt+Backspace to fill a color on that. Always Keep in mind that Alt+Backspace fill color which is your Foreground color and Ctrl+Backspace fills Background color.

After filling color now go to Layer > Layer Style > Blending Options and configure following blending effets and click ok:





Now press Ctrl+J to make a copy of the same layer. After creating both text boxes adjust positioning of the same by selecting Move Tool (Short key is V).

Step 9

In this we will create submit button. Now create a new layer size 84x27 pixels by pressing Ctrl+Shift+N and press Alt+Backspace to fill a color on that. To give similar effect to the button select text box layer Right Click (of Mouse) on it and select Copy Layer Style, select button layer again and Right Click on it and select Paste Layer Style. Now you'll get similar effect like we have on text boxes. See images below:





Now write a text on it by selecting a Horizontal Type Tool or pressing T. Use Times New Roman font with Italic style and 18px size with Black Color.

For footer design I refer you my PSD file please download from above link. Footer design is very simple, I have used two white horizontal and 5 pairs of vertical dotted lines. I suggest you see my PSD file carefully you'll understand easily.

If you find any difficulty during the tutorial please leave a comment or DM at Twitter, @mytutorialfeed.

Visual Cheat Sheet: IE 8 and Firefox 3.5 Keyboard Shortcuts

In this post I am sharing a visual cheat sheet that will improve your day-to-day web browsing experience. This cheat sheet created by me and it is divided into two pages, page 1 contains a IE 8 keyboard shortcuts and page 2 contains Firefox keyboard shortcuts.

This cheat sheet is very helpful for upcoming web designers and web developers. This sheet includes shortcuts like...Find text and links, Short keys for Browser Window, Short keys for Menu Bar, Short keys for Forms and some other useful shortcuts.

Here's a preview of cheat sheet page 1 (IE 8 Keyboard Shortcuts):



and preview of cheat sheet page 2 (Firefox 3.5 Keyboard Shortcuts):



This Cheat Sheet is available in high resolution gif format. Here's link to preview or download the high resolution version:

DOWNLOAD HIGH RESOLUTION GIF - PAGE 1 (IE 8 SHORTCUT KEYS)

DOWNLOAD HIGH RESOLUTION GIF - PAGE 2 (FIREFOX 3.5 SHORTCUT KEYS)

If you want to download PDF version then you need to login with your gmail id:

PDF VERSION - PAGE 1 (IE 8 SHORTCUT KEYS) | PDF VERSION - PAGE 2 (FIREFOX 3.5 SHORTCUT KEYS)

If you have any opinion, please leave a comment or ReTweet this post.

12 Domain Name Auction Sites for Webmasters

The domain name auction is the process where domain owner buy and sell currently registered domain names. The auction facilitates individuals to purchase a previously registered domain that suits their needs from an owner wishing to sell.

In this post I am sharing few good sites to help web masters to auction their old domains at a good value. Following list includes famous sites like Sedo, Afternic, Bido, GoDaddy, DomainAuctions and NameSeek etc.

AFTERNIC



BIDO



Domain Auctions



DomainMonkey



DomainTools



Go Daddy



Great Domains



Moniker



NameJet



NameSeek



Sedo



Win Your Domain



If you have any opinion, please leave a comment.

Digg, Mixx, Twitter or Facebook, Which is your favorite content sharing site? Discuss

Now a days content sharing become a best platform to get a more traffic/publicity for your website or blog. Popular content sharing sites like digg, mixx, twitter, facebook, reddit, dzone etc. are front runners in the race.

There are also some very popular ready to use social bookmarking widgets available like share/save, sharethis, addthis etc.

I earn big amount of traffic on my blog from twitter and facebook. Rest of the traffic comes from other sources like google search, yahoo search, cssglobe, noupe etc.



Now I would like to request you please Discuss your favorite sites to sharing a content. This will help our community to choose the best source out of the other sharing networks.

Please leave a comment or Retweet this post.