The Blog!
Some important things 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 base content
Leave a Reply