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.

Related Posts :