::before & ::after – CSS3


/* CSS3 ::before */

.w3_b div::before {
  content: "HI";
}

/* CSS3 ::after */

.w3_a div::after {
  content: "HELLO";
}

Example:

Some Text Here

Some Text Here

CSS3 Gradient Borders


.gradient_border{
    border-width: 3px;
    border-style: solid;
    -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper maximus mattis. Sed eu ex molestie, interdum lorem ac, rhoncus arcu. Donec varius urna enim, malesuada gravida ligula volutpat in. Nam sit amet efficitur lacus. Fusce a condimentum ante.

Conditional Stylesheets for IE Brsowsers


<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css">
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->

CSS3 ::selection Selector


::-moz-selection { /* For Firefox */
    color: white;
    background: #65208a;
}

::selection { /* WebKit/Blink Browsers */
    color: white;
    background: #65208a;
}

Example:

Select some text here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac dignissim purus. Integer aliquet urna lacus, vitae luctus justo dapibus et. Nulla finibus sapien felis, in suscipit diam lobortis et.