Клуб мобильного творчества
*
Поэксперементируем с кнопкой и дивом.
Будем использовать:
box-shadow;
text-shadow;
border-radius;
[+]-gradient;
border-radius: (px);
{
Задает радиус элемента.
При возникновении конфликта пропорций,принимает родительский радиус.
Принимает аргументом число(количество пикселей).
Пример:
border-radius:10px;
Либо рядом чисел(максимум 4 числа)задает радиус каждого угла по часовой стрелке начиная с левого верхнего.
Пример:
border-radius:10px 0px 10px 0px;
}
box-shadow: (px,color)
{
Создает тень.
Принимает аргументами x y z color. Где
х-смещение по х.
у-смещение по у.
z-размытие.
color-цвет тени.
Пример:
box-shadow:3px 2px 5px black;
}
text-shadow: (px,color)
{
Создает тень текста элемента.
Аргументы(См. box-shadow.)
}
linear-gradient:
linear-gradient(a,c1,c2,cN)
Создает градиент.
Принимает аргументы:
a-старт градиента
[
top,bottom,right,left..
deg-градусы
]
c1-стартовый цвет.
c2-конечный цвет.
cN-дополнительный цвет

Пример простого градиента:

linear-gradient(top,white,black)

Пример множества градиента:

linear-gradient(top,white 20%,orange 40%,blue 20%,black)

radial-gradient
Создает радиальный градиент.

radial-gradient(a,b,c,d,e)
[
a-позиция или угол.
b-форма или размер.
c-от-стоп
d-стоп-цвет
e-до стоп
]
Синтаксис похож на линейный градиент, то тут
еще добавилась форма и размер. Форма бывает двух видов - ellipse и circle, по умолчанию значение: ellipse. Значение размера
может принимать одно из шести значений.
closest-side - Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
closest-corner - Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
farthest-side - Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
farthest-corner - Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
contain - тоже что и closest-side.
cover - тоже что и farthest-corner.
Пример:

radial-gradient(circle farthest-side,#000,#FFF,#000);

radial-gradient взято с webmasters.by (ибо много писанины)
Последний пример:
Изменил(а) _Artorius_ 11.06.13 в 19:11
Файл(ы):
test2.txt (916 байт) 210 раз(а)
*
по-возможности делайте скрины.
*
бле я градиент не описал
*
Вот скринIMG
Файл(ы):
Screen8.png (90.43 Кб) 210 раз(а)
*