Генератор CSS3

Границы должны быть округлены в равной степени?

Да

Нет

Border Radius: px

Ваш код

-webkit-border-radius: ;
border-radius: ;

В буфер

Просмотр

Top Left: px
Top Right: px
Bottom Right: px
Bottom Left: px

Ваш код

-webkit-border-radius: px px px px;
border-radius: px px px px;

В буфер

Просмотр

Inset:
Horizontal Length: px
Vertical Length: px
Blur Radius: px
Spread: px
Shadow Color:
Hex: # R:
G:
B:
Opacity:

Ваш код

-webkit-box-shadow: ;
box-shadow: ;

В буфер

Просмотр

Horizontal Length: px
Vertical Length: px
Blur Radius: px
Shadow Color:

Ваш код

text-shadow: px px px #;
filter: dropshadow(color=#, offx=, offy=);

В буфер

Просмотр

R:
G:
B:
Opacity:

Ваш код

background-color: rgba(, , , );

color: rgba(, , , );

В буфер

Просмотр

Font Family:
Font Name:

Ваш код

@font-face {
font-family: '';
src: url('.eot?') format('eot'),
url('.woff') format('woff'),
url('.ttf') format('truetype');
}

В буфер

В основе лежит Bulletproof @Font-Face Syntax.

Просмотр

Нечего здесь смотреть - всё и так понятно.

# of Columns:
Column Gap: px

Ваш код

-moz-column-count: ;
-moz-column-gap: px;
-webkit-column-count: ;
-webkit-column-gap: px;
column-count: ;
column-gap: px;

В буфер

Lorem ipsum — название классического текста-«рыбы». «Рыба» — слово из жаргона дизайнеров, обозначает условный, зачастую бессмысленный текст, вставляемый в макет страницы. Lorem ipsum представляет собой искажённый отрывок из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры на латинском языке. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником в XVI веке.

Размер:

Ваш код

resize: ;
overflow: auto;
min-width: 50px; /*suggest a mid-width & min-height*/
min-height 50px;

В буфер

Просмотр

Опции:

Ваш код

-moz-box-sizing: ;
-webkit-box-sizing: ;
box-sizing: ;

В буфер

Содержимое блока

Толщина Outline: px
Стиль Outline:
Цвет Outline:

Ваш код

outline: px #;
outline-offset: 10px; /*Delete if you don't want an offset*/

В буфер

Просмотр

Должна появиться внешняя граница элемента

Параметр:
Длительность:
Функция:

Ваш код

-webkit-transition: all ;
-moz-transition: all ;
-ms-transition: all ;
-o-transition: all ;
transition: all ;

В буфер

Просмотр

Введите данные и наведите курсор.

Scale:
Rotate: deg
Translate: px px
Skew: deg deg

Ваш код

-moz-transform: scale() rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale() rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale() rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale() rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale() rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

В буфер

Просмотр