-CSS Marquees-

Scrolling Text:

<!DOCTYPE html>

<title>Example</title>

.example1 {

height: 50px;

overflow: hidden;

position: relative;

}

.example1 h3 {

font-size: 3em;

color: limegreen;

position: absolute;

width: 100%;

height: 100%;

margin: 0;

line-height: 50px;

text-align: center;

/* Starting position */

-moz-transform:translateX(100%);

-webkit-transform:translateX(100%);

transform:translateX(100%);

/* Apply animation to this element */

-moz-animation: example1 15s linear infinite;

-webkit-animation: example1 15s linear infinite;

animation: example1 15s linear infinite;

}

/* Move it (define the animation) */

@-moz-keyframes example1 {

0% { -moz-transform: translateX(100%); }

100% { -moz-transform: translateX(-100%); }

}

@-webkit-keyframes example1 {

0% { -webkit-transform: translateX(100%); }

100% { -webkit-transform: translateX(-100%); }

}

@keyframes example1 {

0% {

-moz-transform: translateX(100%); /* Firefox bug fix */

-webkit-transform: translateX(100%); /* Firefox bug fix */

transform: translateX(100%);

}

100% {

-moz-transform: translateX(-100%); /* Firefox bug fix */

-webkit-transform: translateX(-100%); /* Firefox bug fix */

transform: translateX(-100%);

}

</style>

<h3>Scrolling text... </h3>

</div>

To See Output Copy The Whole Code And Past HERE

Slide-In Text:

<!DOCTYPE html>

<title>Example</title>

.example4 {

height: 50px;

overflow: hidden;

position: relative;

}

.example4 h3 {

position: absolute;

width: 100%;

height: 100%;

margin: 0;

line-height: 50px;

text-align: left;

/* Apply animation to this element */

-moz-animation: example4 10s ease-out;

-webkit-animation: example4 10s ease-out;

animation: example4 10s ease-out;

}

/* Move it (define the animation) */

@-moz-keyframes example4 {

0% { -moz-transform: translateX(200%); }

100% { -moz-transform: translateX(0%); }

}

@-webkit-keyframes example4 {

0% { -webkit-transform: translateX(200%); }

100% { -webkit-transform: translateX(0%); }

}

@keyframes example4 {

0% {

-moz-transform: translateX(200%); /* Firefox bug fix */

-webkit-transform: translateX(200%); /* Firefox bug fix */

transform: translateX(200%);

}

100% {

-moz-transform: translateX(0%); /* Firefox bug fix */

-webkit-transform: translateX(0%); /* Firefox bug fix */

transform: translateX(0%);

}

</style>

<h3>Slide-in text.</h3>

</div>

To See Output Copy The Whole Code And Past HERE

-CSS Patterns-

Zig-Zag Background Patterns:

.pattern {min-height:200px;}

#zig-zag3 {

background:

linear-gradient(145deg, #ccc 25%, transparent 25%) -50px 0,

linear-gradient(225deg, #ccc 25%, transparent 25%) -50px 0,

linear-gradient(315deg, #ccc 25%, transparent 25%),

linear-gradient(35deg, #ccc 25%, transparent 25%);

background-size: 100px 100px;

background-color: #eee;

}

</style>

<h2>Sample text</h2>

</div>

To See Output Copy The Whole Code And Past HERE

Circular Background Patterns:

.pattern {min-height:200px;}

#circular7 {

background: repeating-radial-gradient(closest-side at 25px 35px, #ccc 15%, #eee 40%);

background-size:60px 60px;

}

</style>

<h2>Sample text</h2>

</div>

To See Output Copy The Whole Code And Past HERE

Background Stripes:

#repeating-gradient {

height:100px;

border:1px solid black;

padding:15px;

color:white;

background: indigo;

/* Safari and Google Chrome */

background: -webkit-repeating-radial-gradient(bottom, indigo, violet 10%, indigo 20%);

/* Firefox */

background: -moz-repeating-radial-gradient(bottom, indigo, violet 10%, indigo 20%);

/* Opera */

background: -o-repeating-radial-gradient(bottom, indigo, violet 10%, indigo 20%);

/* Internet Explorer */

background: -ms-repeating-radial-gradient(bottom, indigo, violet 10%, indigo 20%);

/* W3C Standard */

background: repeating-radial-gradient(bottom, indigo, violet 10%, indigo 20%);

}

</style>

<div id="repeating-gradient">Repeating gradient...</div>

To See Output Copy The Whole Code And Past HERE

Repeating Gradients:

<style>

#repeating-gradient2 {

height:100px;

border:1px solid black;

padding:15px;

background: gold;

/* Safari and Google Chrome */

background: -webkit-repeating-radial-gradient(bottom, khaki 15%, lightyellow 30%);

/* Firefox */

background: -moz-repeating-radial-gradient(bottom, khaki 15%, lightyellow 30%);

/* Opera */

background: -o-repeating-radial-gradient(bottom, khaki 15%, lightyellow 30%);

/* Internet Explorer */

background: -ms-repeating-radial-gradient(bottom, khaki 15%, lightyellow 30%);

/* W3C Standard */

background: repeating-radial-gradient(to top, khaki 15%, lightyellow 30%);

}

</style>

<div id="repeating-gradient2">Repeating gradient 2...</div>

To See Output Copy The Whole Code And Past HERE

Repeating Gradients:

<style>

#repeating-gradient3 {

height:100px;

border:1px solid black;

padding:15px;

background: gold;

/* Safari and Google Chrome */

background: -webkit-repeating-radial-gradient(15px 25px, khaki 15%, lightyellow 40%);

/* Firefox */

background: -moz-repeating-radial-gradient(15px 25px, khaki 15%, lightyellow 40%);

/* Opera */

background: -o-repeating-radial-gradient(15px 25px, khaki 15%, lightyellow 40%);

/* Internet Explorer */

background: -ms-repeating-radial-gradient(15px 25px, khaki 15%, lightyellow 40%);

/* W3C Standard */

background: repeating-radial-gradient(closest-side at 15px 25px, khaki 15%, lightyellow 40%);

}

</style>

<div id="repeating-gradient3">Repeating gradient 3...</div>

To See Output Copy The Whole Code And Past HERE

CSS overflow-wrap:

<!DOCTYPE html>

<title>Example</title>

<style>

p {

width: 12em;

overflow-wrap: break-word;

background: beige;

}

</style>

<p>

Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu is located in New Zealand.

</p>

To See Output Copy The Whole Code And Past HERE

CSS box-decoration-break:

<!doctype html>

<title>Example</title>

<style>

.multicol-3 {

width: 350px;

padding: 5px;

border: 1px solid black;

margin: 30px;

font: 12px/16px sans-serif;

vertical-align: text-top;

-webkit-columns: 70px 3; /* Safari and Chrome */

-moz-columns: 70px 3; /* Firefox */

columns: 70px 3; /* CSS3 */

}

.inner-box {

border: 3px solid limegreen;

padding: 10px;

-webkit-box-decoration-break: clone; /* Safari and Chrome */

box-decoration-break: clone; /* CSS */

}

</style>

The abdominal crunch (also known as the Ab Crunch) is a popular exercise that can be incorporated into any workout routine. Try performing ab crunches at the end of your workout. You won't regret it!</p></p>

</div>

To See Output Copy The Whole Code And Past HERE

CSS backface-visibility:

<!DOCTYPE html>

<title>Example</title>

<style>

div.rotate {

width: 50px;

height: 30px;

padding: 20px;

text-align: center;

background: gold;

animation: rotate 5s linear 0s infinite normal none;

backface-visibility: hidden;

}

@keyframes rotate {

from {

transform: rotateY(0deg);

}

to {

transform: rotateY(360deg);

}

</style>

<div class="rotate">Rotating box...</div>

<p>This example uses <a target="property" href="/css/css3/properties/css_transform.cfm"><code>transform</code></a> along with the <a target="property" href="/css/css3/properties/css_animation.cfm"><code>animation</code></a> property and <a target="property" href="/css/css3/properties/css_@keyframes.cfm"><code>@keyframes</code></a> at-rule to create a rotating <a target="property" href="/html/tags/html_div_tag.cfm"><code>div</code></a>.</p>

<p>Modify the above code to see what happens when you change the values.</p>

To See Output Copy The Whole Code And Past HERE

CSS transform-origin:

<!doctype html>

<title>Example</title>

<style>

div {

width: 100px;

padding: 30px 20px;

margin-top: 40px;

background: yellowgreen;

font-family: sans-serif;

}

.rotate

{

transform: rotate(20deg);

transform-origin: 80% 80% 0;

</style>

Rotated box...

</div>

To See Output Copy The Whole Code And Past HERE

CSS Content bgcolor:

<p style="background-color:limegreen;color:green;">CSS background color example.</p>

</div>

To See Output Copy The Whole Code And Past HERE

-CSS Cellpadding-

Method 1:

table.padded-table-2 td { padding-top:20px; padding-right:2px; padding-bottom:10px; padding-left:12px; }

</style>

<tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr>

<tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr>

</table>

Method 2:

table.padded-table-3 td { padding:20px 2px 10px 12px; }

</style>

<tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr>

<tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr>

</table>

To See Output Copy The Whole Code And Past HERE

CSS Cellspacing:

table.space {

border:1px solid black;

border-spacing: 5px 10px;

}

td {

border:1px dotted orange;

}

</style>

<tr>

<td>Table Cell 1</td>

<td>Table Cell 2</td>

</tr>

<tr>

<td>Table Cell 3</td>

<td>Table Cell 4</td>

</tr>

</table>

To See Output Copy The Whole Code And Past HERE

Floating Menu:

<!DOCTYPE html>

<html>

<head>

<title>Example</title>

<style>

body {

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3X8eYAxdHz3R1mXGQfs3ciwLn8gy7zgtrtFEDYJej8ph9DtGl0og_ButnmghkwtQhsnzBUu-8Zz7VI52GYBLT4UILwEwLJbxa9OXBRQSlAWvyzAVZJP2dlMviBmtOc1G2PAs9Ly5XyCU/s1600/download.jpg');

}

main {

margin-bottom: 200%;

}

.floating-menu {

font-family: sans-serif;

background: yellowgreen;

padding: 5px;;

width: 130px;

z-index: 100;

position: fixed;

}

.floating-menu a,

.floating-menu h3 {

font-size: 0.9em;

display: block;

margin: 0 0.5em;

color: white;

}

</style>

</head>

<body>

<main>

<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>

<h3>Floating Menu</h3>

<a href="http://noterring.blogspot.com/">ColdFusion</a>

<a href="http://noterring.blogspot.com/">Database</a>

</nav>

</main>

</body>

</html>

To See Output Copy The Whole Code And Past HERE

Floating Menu Position:

<!DOCTYPE html>

<html>

<head>

<title>Example</title>

<style>

body {

}

main {

margin-bottom: 200%;

}

.floating-menu {

font-family: sans-serif;

background: yellowgreen;

padding: 5px;;

width: 130px;

z-index: 100;

position: fixed;

bottom: 0px;

right: 0px;

}

.floating-menu a,

.floating-menu h3 {

font-size: 0.9em;

display: block;

margin: 0 0.5em;

color: white;

}

</style>

</head>

<body>

<main>

<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>

<h3>Floating Menu</h3>

<a href="http://noterring.blogspot.com/">ColdFusion</a>

<a href="http://noterring.blogspot.com/">Database</a>

</nav>

</main>

</body>

</html>

To See Output Copy The Whole Code And Past HERE

CSS z-index:

<!doctype html>

<title>Example</title>

<style>

div {

width:150px;

height: 60px;

position: relative;

padding:10px;

font-family: sans-serif;

}

.infront {

background-color:limegreen;

top: 30px;

left: 80px;

z-index: 2;

}

.behind {

background-color:beige;

top: -80px;

left: 35px;

z-index: 1;

}

</style>

z-index: 2

</div>

z-index: 1

</div>

To See Output Copy The Whole Code And Past HERE

CSS top:

<!doctype html>

<title>Example</title>

<style>

div {

width: 200px;

height: 100px;

border:1px solid #ff9900;

position: relative;

top: 0px;

}

</style>

<div class="inner">This div is positioned using the CSS top property. Try changing the values to see the effect it has on the position of the div.</div>

To See Output Copy The Whole Code And Past HERE

CSS word-wrap:

<!DOCTYPE html>

<title>Example</title>

<style>

p {

width: 6em;

overflow-wrap: break-word;

background: beige;

}

</style>

<p>

Floccinaucinihilipilification of antidisestablishmentarianism.

</p>

To See Output Copy The Whole Code And Past HERE

CSS mix blend mode:

<!DOCTYPE html>

<title>Example</title>

<style>

body {

font-family: sans-serif;

background-color: yellowgreen;

}

div {

width: 220px;

float: left;

}

.blender {

mix-blend-mode: luminosity;

}

</style>

<div>

Not Blended:

</div>

<div>

Blended:

</div>

To See Output Copy The Whole Code And Past HERE

CSS background blend mode:

<!DOCTYPE html>

<title>Example</title>

<style>

div {

width: 200px;

height: 200px;

color: white;

font-family: sans-serif;

text-align: center;

padding: 10px;

float: left;

background-color: red;

background-size: cover;

}

.blender {

background-blend-mode: hard-light;

}

</style>

<div>

Not Blended

</div>

Blended

</div>

To See Output Copy The Whole Code And Past HERE

CSS background-clip:

<!DOCTYPE html>

<title>Example</title>

<style>

.clipped {

width: 220px;

height: 150px;

padding: 10px;

background-color: yellowgreen;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3X8eYAxdHz3R1mXGQfs3ciwLn8gy7zgtrtFEDYJej8ph9DtGl0og_ButnmghkwtQhsnzBUu-8Zz7VI52GYBLT4UILwEwLJbxa9OXBRQSlAWvyzAVZJP2dlMviBmtOc1G2PAs9Ly5XyCU/s1600/download.jpg);

border: 20px solid rgba(0,0,0,0.3);

background-clip: border-box;

background-origin: border-box;

}

</style>

Testing the <code>background-clip</code> property!

</div>

<p>Change the value to see the difference between <code>content-box</code>, <code>padding-box</code>, and <code>border-box</code>.</p>

To See Output Copy The Whole Code And Past HERE

CSS @keyframes:

<!doctype html>

<style>

.zorro {

width: 50px;

padding: 20px;

text-align: center;

background: gold;

position: relative;

animation: zorro 1s ease-in 0s 6 alternate;

}

@keyframes zorro {

from {

top: 0px;

left: 0px;

}

33% {

top: 0px;

left: 150px;

}

66% {

top: 120px;

left:0px;

}

to {

top: 120px;

left: 150px;

}

</style>

<div class="zorro">Zorro!</div>

To See Output Copy The Whole Code And Past HERE

CSS cubic-bezier:

<style>

.ease {

transition: width 2s ease;

}

.cubic-bezier {

transition: width 2s cubic-bezier(.63,.05,.43,1.7);

}

.ease:hover,

.cubic-bezier:hover {

width: 80%;

}

div {

background: orange;

color: white;

width: 90px;

margin: 10px;

padding: 10px;

}

</style>

<div class="cubic-bezier">cubicbezier</div>

To See Output Copy The Whole Code And Past HERE

Bouncing animation:

<!DOCTYPE html>

<title>Example</title>

<style>

div.bounce {

width: 100px;

padding: 20px;

background: gold;

position: relative;

animation: bounce 1s ease-in 2s 6 alternate none;

}

@keyframes bounce {

from {

top: 0px;

left: 0px;

}

to {

top: 150px;

left: 150px;

}

</style>

<div class="bounce">Bouncing box...</div>

To See Output Copy The Whole Code And Past HERE

CSS resize:

<!DOCTYPE html>

<title>Example</title>

<style>

div {

width: 40%;

padding: 30px;

background: gold;

overflow: auto;

resize: both;

}

</style>

<div>

Resize me!

</div>

To See Output Copy The Whole Code And Past HERE

CSS iteration count:

<!DOCTYPE html>

<title>Example</title>

<style>

.chameleon {

color: orange;

animation-name: chameleon;

animation-duration: 1s;

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 3.0);

animation-delay: 0s;

animation-iteration-count: 15;

animation-direction: normal;

animation-fill-mode: forwards;

}

@keyframes chameleon {

0% {

font-size: 1em;

}

50% {

font-size: 2em;

color: limegreen;

}

100% {

font-size: 1em;

}

</style>

<h3 class="chameleon">Animations!</h3>

To See Output Copy The Whole Code And Past HERE

CSS animation name:

<!DOCTYPE html>

<title>Example</title>

<style>

.springy-text {

color: white;

animation-name: springy-text;

animation-duration: 1s;

animation-timing-function: ease;

animation-delay: 0s;

animation-iteration-count: 1;

animation-direction: normal;

animation-fill-mode: forwards;

}

@keyframes springy-text {

0% {

letter-spacing: 1.2em;

color: white;

}

100% {

letter-spacing: 0.1em;

color: orange;

}

</style>

<h3 class="springy-text">Animations!</h3>

To See Output Copy The Whole Code And Past HERE

CSS timing function:

<!DOCTYPE html>

<title>Example</title>

<style>

.springy-text {

color: white;

animation-name: springy-text;

animation-duration: 1s;

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 3.0);

animation-delay: 0s;

animation-iteration-count: 1;

animation-direction: normal;

animation-fill-mode: forwards;

}

@keyframes springy-text {

0% {

letter-spacing: 1.2em;

color: white;

}

100% {

letter-spacing: 0.1em;

color: orange;

}

</style>

<h3 class="springy-text">Animations!</h3>

To See Output Copy The Whole Code And Past HERE

CSS animation direction:

<!DOCTYPE html>

<title>Example</title>

<style>

.springy-text {

color: darkslateblue;

animation-name: springy-text;

animation-duration: 1s;

animation-timing-function: ease-in;

animation-delay: 0s;

animation-iteration-count: 6;

animation-direction: alternate-reverse;

animation-fill-mode: backwards;

}

@keyframes springy-text {

0% {

letter-spacing:1.2em;

color: thistle;

}

100% {

letter-spacing:0.1em;

color: darkslateblue;

}

</style>

<h3 class="springy-text">Animations!</h3>

To See Output Copy The Whole Code And Past HERE

CSS border image slice:

<!DOCTYPE html>

<title>Example</title>

<style>

.cool-border {

width: 200px;

padding: 30px;

border: 1em double #edb742;

border-image-source: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3X8eYAxdHz3R1mXGQfs3ciwLn8gy7zgtrtFEDYJej8ph9DtGl0og_ButnmghkwtQhsnzBUu-8Zz7VI52GYBLT4UILwEwLJbxa9OXBRQSlAWvyzAVZJP2dlMviBmtOc1G2PAs9Ly5XyCU/s1600/download.jpg);

border-image-slice: 14;

border-image-width: 7px;

border-image-outset: 0;

border-image-repeat: round;

}

</style>

This box has a cool border?

</div>

To See Output Copy The Whole Code And Past HERE

CSS border image repeat:

<!DOCTYPE html>

<title>Example</title>

<style>

.cool-border {

width: 200px;

padding: 30px;

border: 1em double #edb742;

border-image-slice: 28;

border-image-width: 0.6em 1.0em;

border-image-outset: 0em 1.1em 1.5em 0.6em;

border-image-repeat: round stretch;

}

</style>

This box has a cool border?

</div>

To See Output Copy The Whole Code And Past HERE

CSS border image outset:

<!DOCTYPE html>

<title>Example</title>

<style>

.cool-border {

width: 200px;

padding: 30px;

border: 1em double #edb742;

border-image-slice: 28;

border-image-width: 0.6em 1.0em;

border-image-outset: 0em 1.1em 1.5em 0.6em;

border-image-repeat: round;

}

</style>

This box has a cool border?

</div>

To See Output Copy The Whole Code And Past HERE

CSS align self:

<!DOCTYPE html>

<title>Example</title>

<style>

.outer-container {

height: 200px;

font-family: sans-serif;

font-size: 24px;

color: white;

border: 1px solid #ccc;

display: flex;

align-items: flex-start;

}

.outer-container div {

width: 20%;

padding: 2%;

}

.red {

background: orangered;

align-self: center;

}

.green {

background: yellowgreen;

}

.blue {

background: steelblue;

}

</style>

</div>

To See Output Copy The Whole Code And Past HERE

CSS align items:

<!DOCTYPE html>

<title>Example</title>

<style>

.outer-container {

height: 200px;

font-family: sans-serif;

font-size: 24px;

color: white;

border: 1px solid #ccc;

display: flex;

align-items: center;

}

.outer-container div {

width: 20%;

padding: 2%;

}

.red {

background: orangered;

height: 40%;

}

.green {

background: yellowgreen;

height: 30%;

}

.blue {

background: steelblue;

height: 60%;

}

</style>

</div>

To See Output Copy The Whole Code And Past HERE

CSS align content:

<!DOCTYPE html>

<title>Example</title>

<style>

.outer-container {

height: 200px;

font-family: sans-serif;

color: white;

border: 1px solid #ccc;

display: flex;

flex-wrap: wrap;

align-content: space-between;

}

.outer-container div {

width: 60%;

padding: 2%;

}

.red {

background: orangered;

}

.green {

background: yellowgreen;

}

.blue {

background: steelblue;

}

</style>

</div>

To See Output Copy The Whole Code And Past HERE

CSS justify content:

<!DOCTYPE html>

<title>Example</title>

<style>

.outer-container {

height: 200px;

font: 100 24px/100px sans-serif;

text-align: center;

color: white;

border: 1px solid #ccc;

display: flex;

justify-content: space-around;

}

.outer-container div {

width: 20%;

}

.red {

background: orangered;

}

.green {

background: yellowgreen;

}

.blue {

background: steelblue;

}

</style>

</div>

To See Output Copy The Whole Code And Past HERE

-CSS Hyperlinks-

Hyperlinks with no underline:

.example2 a:link { text-decoration: none }

</style>

<div class="example2">Here goes an example <a href="http://www.noterring.blogspot.com/">hyperlink</a>.</div>

To See Output Copy The Whole Code And Past HERE

Text rollovers:

.example3 a:hover { text-decoration: none }

</style>

<div class="example3">Here goes an example <a href="http://www.noterring.blogspot.com/">hyperlink</a>.</div>

To See Output Copy The Whole Code And Past HERE

Cursor Effects:

.example4 a:hover { cursor: help }

</style>

<div class="example4">Here goes an example <a href="http://www.noterring.blogspot.com/">hyperlink</a>.</div>

To See Output Copy The Whole Code And Past HERE

Try..It:

<!DOCTYPE html>

<html>

<head>

a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor: auto}

a:link {color:blue;}

a:visited {color: #660066;}

a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}

a:active {color: #ff0000;text-decoration: none}

</style>

</head>

<body>

<p><a href="http://www.noterring.blogspot.com/">CSS Hyperlinks</a></p>

</body>

</html>

To See Output Copy The Whole Code And Past HERE

<----HYPER LINKS END HERE---->

CSS clear:

<!doctype html>

<title>Example</title>

<style>

div.float {

border:1px solid #ff9900;

width:120px;

float: right;

}

div.clear {

border:1px solid #cccccc;

width:120px;

clear: right;

}

</style>

<div class="float">div.float</div>

<div class="clear">div.clear</div>

To See Output Copy The Whole Code And Past HERE

CSS outline:

<!doctype html>

<title>Example</title>

<style>

div.color {

width: 100px;

height: 100px;

outline: 5px solid limegreen;

border: 5px solid black;

}

</style>

<div class="color">Green outline, black border.</div>

To See Output Copy The Whole Code And Past HERE

CSS opacity:

<!doctype html>

<title>Example</title>

<style>

div {

height: 100px;

width: 200px;

border: 1px solid black;

}

.bottom {

background-color: gold;

z-index: 1;

}

.top {

position: relative;

top: -65px;

left: 50px;

background-color: lime;

z-index: 2;

opacity: 0.4;

}

</style>

To See Output Copy The Whole Code And Past HERE

CSS filter:

<!DOCTYPE html>

<title>Example</title>

<style>

div {

width: 200px;

margin: 0 15px;

float: left;

}

.filtered {

filter: hue-rotate(180deg) drop-shadow(10px 10px 10px gray);

}

</style>

<div>

Original Image:

</div>

<div>

Filtered Image:

</div>

To See Output Copy The Whole Code And Past HERE

CSS leading:

<p style="line-height: 280%;max-width:200px;">There is no "CSS leading" property - the CSS specification uses the line-height property to apply leading. Leading gives the impression of lines of text being closer together or further apart.</p>

To See Output Copy The Whole Code And Past HERE

CSS letter spacing:

<!doctype html>

<title>Example</title>

<style>

p {

font-family: sans-serif;

color: limegreen;

}

.wide-tracking {

letter-spacing: 0.2em;

}

</style>

<p>Normal text.</p>

<p class="wide-tracking">Modified letter spacing</p>

To See Output Copy The Whole Code And Past HERE

CSS word spacing:

<!doctype html>

<title>Example</title>

<style>

p {

font-family: sans-serif;

font-size: 1.5em;

color: limegreen;

word-spacing: 1.5em;

}

</style>

<p>CSS word-spacing allows you to determine the space in between words.</p>

To See Output Copy The Whole Code And Past HERE

Inline Style Sheets:

<p style="font-size: x-large; color: #ff9900">Using inline style sheets - or is that inline styles?</p>

To See Output Copy The Whole Code And Past HERE

Embedded Style Sheets:

<!DOCTYPE html>

<html>

<head>

p {

font-family: georgia, serif;

font-size: x-large;

color:#ff9900;

}

a:hover {

color: LimeGreen;

text-decoration: none;

}

</style>

</head>

<body>

<p>This paragraph tag has been preset using embedded style sheets. Same for the horizontal rule below and the hyperlink under that. </p>

</body>

</html>

To See Output Copy The Whole Code And Past HERE

CSS Scrollbars:

<!DOCTYPE html>

<html>

<head>

<title>My Example</title>

<style>

/* Box styles */

.myBox {

border: none;

padding: 5px;

font: 24px/36px sans-serif;

width: 200px;

height: 150px;

overflow: scroll;

}

/* Scrollbar styles */

::-webkit-scrollbar {

width: 12px;

height: 12px;

}

::-webkit-scrollbar-track {

box-shadow: inset 0 0 10px olivedrab;

border-radius: 10px;

}

::-webkit-scrollbar-thumb {

border-radius: 10px;

background: yellowgreen;

box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

</style>

</head>

<body>

Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.

</div>

</body>

</html>

To See Output Copy The Whole Code And Past HERE

Hide Scrollbar:

Enter as much text as you can... until you'd expect a vertical scrollbar to appear. Go on!

</textarea>

To See Output Copy The Whole Code And Past HERE

CSS Table-layout:

<tr>

<td style="width:70px;">Cell Contents</td>

<td style="width:80px;">Cell Contents</td>

</tr>

<tr>

<td style="width:70px;">Cell Contents</td>

<td style="width:80px;">Cell Contents</td>

</tr>

</table>

To See Output Copy The Whole Code And Past HERE

CSS matrix-Function:

<style>

div {

transform-origin: 0 0;

transform: matrix(0.707107, 0.707107, -0.707107, 0.707107, 150, 0);

padding: 20px;

width: 120px;

background: limegreen;

color: white;

font-family: sans-serif;

}

</style>

<div>

<code>matrix</code>.

</div>

To See Output Copy The Whole Code And Past HERE

CSS sepia-Function:

<style>

.filtered {

filter: sepia(100%);

}

</style>

To See Output Copy The Whole Code And Past HERE

CSS rgba-Function:

<!DOCTYPE html>

<title>Example</title>

<style>

body {

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1rT1E0AAd5Gbs01aXe3eF99QXKWuZZWryzzHyomTVCgzbHo_PefYQMOpKope9nFMGqFf6AR9AdHfo42_mXYHKJZdR-DivnqRTqGuJ2zSWg85DH68RfYTM7BugyIOZFIi5teQ9j46uL8/s1600/bg2.png') beige;

color: rgba(0, 0, 0, 1);

font-size: 2em;

}

article {

background-color: rgba(30, 255, 50, 0.5);

border: 5px solid olive;

margin: 20px;

text-align: center;

}

</style>

<h1>Stars</h1>

</article>

GET MORE CSS RGBA COLOR SOURCE HERE

To See Output Copy The Whole Code And Past HERE

CSS calc-Function:

<style>

nav {

width: 100px;

float: left;

background: gold;

}

article {

width: calc(100% - 100px);

float: right;

background: orange;

}

article, nav {

color: white;

padding: 30px;

box-sizing: border-box;

}

</style>

<nav>

</nav>

<h1>Article</h1>

</article>

To See Output Copy The Whole Code And Past HERE

Calculating Margins:

<style>

nav {

width: 20%;

margin-right: 1em;

float: left;

background: gold;

}

article {

width: calc(80% - 1em);

float: right;

background: orange;

}

article, nav {

color: white;

padding: 30px;

box-sizing: border-box;

}

</style>

<nav>

</nav>

<h1>Article</h1>

</article>

To See Output Copy The Whole Code And Past HERE

CSS blur:

<style>

.filtered {

filter: blur(3px);

}

</style>

To See Output Copy The Whole Code And Past HERE

<style>

.filtered {

filter: invert(100%);

}

</style>

To See Output Copy The Whole Code And Past HERE

CSS hue-rotate:

<style>

.filtered {

filter: hue-rotate(180deg);

}

</style>

To See Output Copy The Whole Code And Past HERE

CSS inset:

<style>

img {

-webkit-clip-path: inset(10px round 80px 20px 30px 10px);

clip-path: inset(10px round 80px 20px 30px 10px);

}

</style>

To See Output Copy The Whole Code And Past HERE

CSS brightness:

<style>

.filtered {

filter: brightness(200%);

}

</style>

To See Output Copy The Whole Code And Past HERE

CSS contrast:

<style>

.filtered {

filter: contrast(70%);

}

</style>

To See Output Copy The Whole Code And Past HERE

CSS circle:

<style>

div {

float: left;

width: 200px;

height: 150px;

shape-outside: circle();

}

</style>

<p> Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

To See Output Copy The Whole Code And Past HERE

CSS saturate:

<style>

.filtered {

filter: saturate(200%);

}

</style>

To See Output Copy The Whole Code And Past HERE