background-image: linear-gradient(blue, red);
background-image: linear-gradient(to right, blue, red);
background-image: linear-gradient(to bottom right, blue, red);
background-image: linear-gradient(190deg, blue, red);
background-image: linear-gradient(to right, blue, white, red);
background-image: repeating-linear-gradient(blue, red 10%, yellow 20%);
background-image: radial-gradient(blue, red, yellow);
background-image: radial-gradient(blue 5%, red 15%, yellow 65%);
background-image: radial-gradient(circle, blue, red, yellow);
background-image: repeating-radial-gradient(blue 15%, red 45%);
text-shadow: horizontal vertical blur color
text-shadow: 3px 3px 3px black;
text-shadow: 0 0 6px black;
text-shadow: 0 0 3px red, 0 0 15px purple;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
box-shadow: 10px 10px 5px grey;
box-shadow: 20px -16px coral;
box-shadow: inset 30px 15px violet;
box-shadow: -10px 0 6px red, 6px 6px white;
outline: outline-width outline-style outline-color
outline: 3px solid lime;
outline: 3px dotted lime;
outline: 3px dashed lime;
outline: 6px double lime;
outline: 6px groove lime;
outline: 6px ridge lime;
outline: 6px inset lime;
outline: 6px outset lime;
outline: 3px solid lime;
outline-offset: -10px;
border: border-width border-style border-color
border: 4px solid magenta;
border-top: dashed yellow;
border-right-width: 10px;
border-color: yellow magenta aqua lime;
border-style: dotted;
border-radius: 20px;
list-style-type: circle;
list-style-type: square;
list-style-type: disc;
list-style-type: decimal;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-greek;
list-style-type: upper-alpha;
cursor: value;
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
0 1 2 3 4 5 6 7 8 9
transition: property duration timing-function delay
transition: all 1s;
transition: background-color 1s 1s, width 2s;
translate(x-axis, y-axis)
rotate(degrees)
scale(width, height)
skew(x-axis degrees, y-axis degrees)
transform: scale(3,2);
transform: skew(30deg, 20deg);
transform: rotate(45deg);
transform: translate(30px, 10px);
selector::psuedo-element
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos natus suscipit quo, libero, nemo quibusdam non alias tempore eaque deleniti.
.class::first-letter { color: orangered; font-weight: bold; }
.class::first-line {color: royalblue;}
.class::marker {color: lime;}
.class::selection {background-color: magenta;}
.class::before { content: ''; width: 20px; height: 10px; background-color: darkblue; position: absolute; left: 2px; top: 2px; }
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
animation: animation1 2s linear infinite alternate;
@keyframes animation1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
animation: animation2 1.5s 2;
@keyframes animation2 { 0% { font-size: 2rem; } 50% { font-size: 3rem; } 100% { font-size: 2rem; } }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet id minus reiciendis fugit, assumenda rerum consectetur.
.class { text-align: justify; word-spacing: 5px; letter-spacing: 2px; line-height: 1.2; text-transform: uppercase; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet id minus reiciendis fugit, assumenda rerum consectetur harum dolore modi illum, dolorum sunt reprehenderit quo veniam accusamus dolores aut suscipit facilis?
.class { text-align: left; columns: 2; column-rule: 1px dashed red; font-style: italic; font-variant: small-caps; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet id minus reiciendis fugit, assumenda rerum consectetur.
.class { white-space: nowrap; overflow: scroll; text-decoration: overline; }
| Head 1 | Head 2 | Head 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
.table1 { border: 4px solid tomato; padding: 1rem; border-collapse: collapse; }
.table1 th, .table1 td { border: 2px solid tomato; padding: 5px 10px; }
.table1 tr:nth-child(odd) { background-color: lightcyan; }
| Head 1 | Head 2 | Head 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
.table2 { padding: 1rem; border-collapse: collapse; text-align: left; border-radius: 5px 5px 0 0; overflow: hidden; box-shadow: 0 0 20px #666; }
.table2 thead tr { background-color: slateblue; font-weight: bold; }
.table2 th, .table2 td { padding: 10px 12px; }
.table2 tbody tr:nth-child(even) { background-color: #333; }
.table2 tbody tr:last-of-type { border-bottom: 2px solid slateblue; }