:nth-last-child(N)

:nth-last-child( { number expression | odd | even } )
{ declaration aria }

:nth-child

:nth-child ( { expression | odd | even } )
{ declaration aria }

CSS3 - Pseudo Classes

CSS objective "style of separation of content" depends largely on its ability to penetrate first the content. Well, in CSS3, that mission is enhanced by the addition of the Structural Funds of pseudo-classes. These selectors allow you to select children of a parent based on a set of common criteria, such as the third son, the children even / odd, the n-th child within each group of children of a certain type in the matrix, and more drugoe.Nemnogo overwhelming, yes, but better safe than disappointment.

CSS3 pseudo-classes are supported in IE8+ , Firefox 3.1+, and Safari 3.1+

Text Stroke

.classname { -webkit-text-stroke: 3px black; color: white; }

Text Outline

body { background-color: white; } .classname { text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black; color: white; }

Multiple Background

.bg { background: url(image/flower.jpg) 0 0 no-repeat, url(image2/tree.jpg) 100% 0 no-repeat; }

CSS3 Solutions for Microsoft Internet Explorer

CSS3 probably the latest trend in web design at this time, allowing developers to implement a series of solutions for their projects with a simple CSS to avoid having to semantic no marks, JavaScript complex and additional images,. Unfortunately, it is not surprising that Microsoft Internet Explorer, even in its most recent version is not yet compatible with most of the properties and features introduced in CSS3.

Transparency and Opacity

#idname {
opacity: .4; /* IE9+ and other browsers */
filter: alpha(opacity=40); /* IE6+ */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* works in IE8 only */ }

Rounded Corners or border-radius

.class-name {
border-radius: 15px;
behavior: url(border-radius.htc);
}

Box-shadow

.class-name
{
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /* ie */
}

Gradients

.class-name
{ background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Chrome and Safari */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 and IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

Conditional comments

<link rel="stylesheet" type="text/css" href="style.css" />

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="allversion-ie.css" />
<![endif]-->

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

<!--[if lt IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->