HTML5
<!DOCTYPE html>
<header>
<footer>
<nav>
<aside>
<article>
<section>
<figure>
<progress>
<audio>
<video>
<canvas>
CSS 3
BORDER RADIUS
-webkit-border-raidus: 10px 10px 10px 10px; /* top, right, bottom, left*/
border-radius: 10px 10px 10px 10px;
BORDER IMAGE
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
BOX SHADOW
-webkit-box-shadow: inset 10px 10px 5px 5px; /* inset, horizontal length, vertical length, blur rarius, spread, shadow color */
box-shadow: inset 10px 10px 5px 5px;
TEXT SHADOW
text-shadow: 10px 10px 5px #ff0000; /* horizontal length, vertical length, blur radius, shadow color */
filter: dropshadow(color=#ff0000, offx=10, offy=10);
BREAK WORD WRAP
word-wrap: break-word;
RGBA COLOR
background-color: rgba(255, 255, 255, 0.5); /* red, green, blue, opacity 0.1 - 1*/
color: rgba(255, 255, 255, 0.5);
BACKGROUND SIZE
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: 80px 60px;
background-origin: content-box;
MULTIPLE BACKGROUND IMAGES
background-image: url(img_flwr.gif), url(img_tree.gif);
FONT FACE
@font-face {
font-family: 'RBC-font'; /* font family */
src: url('RBC.eot?') format('eot'), /* font-name */
url('RBC.woff') format('woff'),
url('RBC.ttf') format('truetype');
}
div {
font-family: RBC-font;
}
MULTIPLE COLUMNS
-moz-column-count: 2; /* number of columns */
-moz-column-gap: 100px; /* gap between columns */
-webkit-column-count: 2;
-webkit-column-gap: 100px;
column-count: 2;
column-gap: 100px;
COLUMN RULES
-moz-column-rule: 3px outset #ff0000; /* Firefox */
-webkit-column-rule: 3px outset #ff0000; /* Safari and Chrome */
column-rule: 3px outset #ff0000;
BOX RESIZE
resize: horizontal;
overflow: auto;
min-width: 50px;
min-heoght: 50px;
BOX SIZING
-moz-box-sizing: border-box; /* -moz-box-sizing: content-box; */
-webkit-box-sizing: border-box; /* -webkit-box-sizing: content-box; */
box-sizing: border-box; /* box-sizing: content-box; */
OUTLINE
outline: 10px solid #ff0000; /* thickness, style, color */
outline-offset: 10px; /* delete this if you don't want an offset */
TRANSITIONS
-webkit-transition: background: 10s ease; /* property: (background, color, height, width, outline), duration: (seconds, milliseconds), functions: (ease, linear, ease-in, ease-out, ease-in-out)
-moz-transition: background: 10s ease;
-ms-transition: background: 10s ease;
-o-transition: background: 10s ease;
transition: background: 10s ease;
MULTIPLE TRANSITIONS
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
TRANSITIONS PROPERTIES
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
TRANSFORM
-moz-transform: scale(1.5) rotate(45deg) translateX(10px) translateY(10px) skewX(15deg) skewY(15deg);
-webkit-transform: scale(1.5) rotate(45deg) translateX(10px) translateY(10px) skewX(15deg) skewY(15deg);
-o-transform: scale(1.5) rotate(45deg) translateX(10px) translateY(10px) skewX(15deg) skewY(15deg);
-ms-transform: scale(1.5) rotate(45deg) translateX(10px) translateY(10px) skewX(15deg) skewY(15deg);
transform: scale(1.5) rotate(45deg) translateX(10px) translateY(10px) skewX(15deg) skewY(15deg);
TRANSFORM USING MATRIX METHOD
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
ANIMATIONS
@-webkit-keyframes myfirst { /* Safari and Chrome */
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
div {
-webkit-animation: myfirst 5s; /* Safari and Chrome */
animation: myfirst 5s;
}
@-webkit-keyframes mysecond { /* Safari and Chrome */
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@keyframes mysecond{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
div {
-webkit-animation: mysecond 5s; /* Safari and Chrome */
animation: mysecond 5s;
}
div {
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
GRADIENTS
background: #1e5799; /* Old browsers */
background: -webkit-gradient (linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient (top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient (top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -o-linear-gradient (top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient (top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient (to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
Комментариев нет:
Отправить комментарий