CSS3 Basics
Border-radius
Синтаксис:
border-radius: top-left top-right
bottom-right bottom-left
Применяется к border и background
border-radius:50%
Box-shadow
Синтаксис:
box-shadow: inset сдвиг по x сдвиг по y радиус размытия растяжение цвет
- inset - Тень выводится внутри элемента. Необязательный параметр.
- сдвиг по x - Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
- сдвиг по y - Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
- размытие - Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
- растяжение - Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
- цвет - Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.
P.S. можно задать несколько теней через запятую
Text-shadow
Синтаксис:
text-shadow: сдвиг по x сдвиг по y радиус размытия цвет
- сдвиг по x - Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
- сдвиг по y - Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр.
- радиус - Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
- цвет - Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр.
RGBA
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
background: rgba ( *составляющая красного*, *составляющая зеленого*, *составляющая синего*, *составляющая alpha*);
h1 {
color: rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}
linear-gradient
Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background
Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left.
radial-gradient
Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки. Радиальный градиент создаётся с помощью свойства background или background-image с параметром radial-gradient. В простейшем случае для задания радиального градиента понадобится всего два параметра: начальный и конечный цвет.
transform
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
matrix
Задаёт матрицу преобразований.
rotate
Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.
transform: rotate(<угол>)
scale
Масштаб элемента по горизонтали и вертикали.
transform: scale(sx[, sy]);
Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.
scaleX
Масштабирует элемент по горизонтали.
transform: scaleX(sx);
scaleY
Масштабирует элемент по вертикали.
transform: scaleY(sy);
skewX
Наклоняет элемент на заданный угол по вертикали.
transform: skewX(<угол>)
skewY
Наклоняет элемент на заданный угол по горизонтали.
transform: skewY(<угол>)
translate
Сдвигает элемент на заданное значение по горизонтали и вертикали.
transform: translate(tx[, ty])
translateX
Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.
transform: translateX(tx)
translateY
Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.
transform: translateY(ty)
transition
transition: [transition-property] [transition-duration] [transition-timing-function]
[transition-delay];
Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript
div {
transition: background-color 0.5s ease;
background-color: red;
}
div:hover {
background-color: green;
}
CSS3 Basics
By Maria Putyrskaya
CSS3 Basics
Box-shadow, text-shadow, border-radius, transition, transform, rgba, gradients
- 2,333