Тени и прозрачность box-shadow - CSS свойство box-shadow позволяет добавить одну или более тень для блока. Тень блока не влияет на размер и расположение самого элемента (несмотря на то, что тень может быть расположена далеко за его пределами), но она может перекрываться другими элементами, расположенными в коде после текущего элемента, или перекрывать другие элементы, расположенные в коде перед текущим элементом.
Использование свойства box-shadow - Для каждой тени можно задать от 2 до 6 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую:
opacity - CSS свойство opacity (в переводе с анг. - непрозрачность) устанавливает уровень прозрачности элемента. Прозрачность задаётся числом от 0 (полная прозрачность) до 1 (полная непрозрачность).
- Значение прозрачности применяется ко всему элементу, включая его содержимое, даже не смотря на то, что значение не наследуется дочерними элементами. Таким образом элемент, его содержимое, его дочерние элементы и содержимое дочерних элементов имеют одинаковый уровень прозрачности, даже если у самого элемента и его дочерних элементов установлены разные значения прозрачности.
- Прозрачность картинки задаётся также с помощью CSS свойства opacity.
- #myDIV {
- background-color: lightblue;
- width: 200px;
- height: 100px;
- opacity: 1;
- }
- #myDIV {
- background-color: lightblue;
- width: 200px;
- height: 100px;
- opacity: 0.6;
- }
Text-shadow
CSS свойство text-shadow позволяет добавить одну или более тень для текста. Тень текста не влияет на его размер и расположение.
Для каждой тени можно задать от 2 до 4 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую.
Первые два параметра являются обязательными, они определяют сдвиг тени относительно текста: первый параметр указывает смещение по горизонтали, второй по вертикали. Оба параметра могут принимать как положительные, так и отрицательные значения. Положительное значение первого параметра сдвигает тень вправо, отрицательное значение - влево. Положительное значение второго параметра сдвигает тень вниз, отрицательное - вверх.
#myH1 { text-shadow: -10px -10px red; } - #myH1 {
- text-shadow: 2px 2px red;
- }
|
Скачать 0.87 Mb.