УРОК 7. CSS3 И ЕГО СВОЙСТВА
В HTML5 CSS3 фактически превратился в абсолютно новую технологию по сравнению с предыдущими версиями. Технология CSS3 позволяет использовать многочисленные визуальные эффекты к объектам (скругленные углы, тени, вращение, яркость, масштабирование и т.д.)
Для раскрытия потенциала CSS3 внутри блока section (после текста) создадим блок programs.
в файле style.css
#programms {
width:1024px;
height:100px;
margin:0 auto;
text-align:center;
color:#fff;
}
#programm-1 {
background: #6600FF;
}
#programm-2 {
background: #6495ED;
}
#programm-3 {
background: #6600FF;
}
#programm-4 {
background: #6495ED;
}
#programm-1, #programm-2, #programm-3, #programm-4 {
float:left;
height:70px;
width: 180px;
padding:20px 10px;
margin:20px;
line-height:1.5em;
}
line-height задаеммежстрочноерасстояние
Свойства CSS3 мы будем смотреть на блоках #programm-1 (2,3,4)
border—radius (скругленные углы)
Добавим к бокам #programm-1 (2,3,4) свойство border—radius: 20px
Если возникли проблемы со скруглением углов, то добавьте префиксы -moz- и -webkit- (как мы делали ранее)
Можно задавать параметры скругления двумя (border-radius: 20px / 10px) или четырьмя значениями (border-radius: 20px 10px 10px 20px)
box—shadow (тень блока)
Цвет тени задается функцией rgb() тремя значениями, следующие две цифры – смещение тени
box-shadow: rgb(100,100,100) 5px 5px;
Добавив еще одно значение мы получим эффект размытия тени
box-shadow: rgb(100,100,100) 5px 5px 10px; (примените это свойство для блоков #programm-1 ,2,3,4)
Если добавить слово inset, то тень станет внутренний
box-shadow: rgb(100,100,100) 5px 5px 10px inset;
РАБОТА С ТЕКСТОМ
В CSS возможно задать выравнивания тексте:
- по левому краю — left,
- по правому краю — right,
- по центру — center
- по ширине содержимого — justify.
Пример: text-align:center ;
Для трансформации текста существуют четыре свойства:
- отсутствие преобразования — none,
- преобразование первых букв слов в заглавные — capitalize,
- преобразование всех букв в заглавные — uppercase
- преобразование всех букв в строчные — lowercase.
Пример: text-transform:uppercase;
С помощью свойства text-indent задаётся отступ первой строки :
text-indent:20px;
text-shadow (теньтекста)
Правила для данного свойства аналогично box-shadow
Данное свойство применим к заголовку сайта
header h1 {
text-shadow: rgb(150,150,150) 5px 5px 10px;
}
@font—face (подключение шрифта)
Свойство @font-fасе требует указания не менее двух свойств для названия шрифта и пути к файлу.
@font-face {
font-family: ‘NewFont’; src:url(magnolia.ttf’);
}
Далее мы можем использовать шрифт с любыми элементами документа, указав его имя
ЦВЕТА И ГРАДИЕНТ
Цвета могут применяться тексту и фону свойствами color и background-color (фон).
Значение цвета можно задать названием, с помощью трех шестнадцатеричных чисел RGB (например, #с4с4с4 ) или CSS-функции rgb.
Названия 16 стандартных цветов: аквамарин — aqua, черный — black, синий — blue, яркий пурпурно-красный, или фуксия, — fuchsia, серый — gray, зеленый — green, яркий светло-зеленый — lime, красно-коричневый — maroon, темно-синий — navy, оливковый — olive, фиолетовый — purple, красный — red, серебристый — silver, зеленовато-голубой — teal, белый — white и желтый — yellow.
Примеры задания красного цвета:
color:red;
color:#ff0000;
background-color:rgb(255, 0, 0) // красныйцвет
Градиент
linear—gradient (линейный градиент)
Градиент задается тремя значениями начальная позиция, начальный, цвет конечный цвет
Начальная позиция задается
словами: to top, to bottom, to left или to right
background: linear-gradient(to top, #FFFFFF, #24b5fe);
углом: deg (например, 50deg)
background: linear-gradient(50deg, #FFFFFF, #24b5fe);
Применим градиент для шапки <header>
header {
border: 1px solid #999999;
padding: 20px;
background: linear-gradient(50deg, #FFFFFF, #24b5fe);
}
Радиальный градиент (radial-gradient)
Для определения фигуры используются два слова — circle и ellipse, описание промежуточных точек включает в себя значение цвета и позиции, в которой начинается переход.
background: radial-gradient(ellipse, #FFFFFF 20%, #24b5fe 200%);
Примените это свойство к блоку #programm-1
RGBA
Функция аналочична rgb(), но в rgba() добавляется четвертый параметр opacity (прозрачность), который принимаем значения от 0 до 1 (0 — полностью прозрачный цвет, 1 -непрозрачный).
text-shadow: rgba(100,100,100,0.5) 3px 3px 5px
HSLA
Функция hsla() определяет следующие параметры: тон, насыщенность, яркость и непрозрачность.
Тон представляет один из цветов воображаемого цветового круга — это значение от 0 до 360, выраженное в градусах. Вокруг значений 0 и 360˚ находятся красные цвета, вокруг 120˚ — зеленые, а вокруг 240 ˚ — синие. Насыщенность — это процентное значение в диапазоне от 0 % (шкала серых тонов) до 100 % (полный цвет или полное насыщение). Яркость — это также процентное значение от 0 % (абсолютно темный цвет) до 100 % (абсолютно яркий цвет). Значение 50 % определяет среднюю яркость. Последний аргумент — уровень непрозрачности.
background-color: hsla(240, 80%, 50%, 0.5);