УРОК 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)

 

borderradius (скругленные углы)

Добавим к бокам #programm-1 (2,3,4) свойство borderradius: 20px

Если возникли проблемы со скруглением углов, то добавьте префиксы -moz- и -webkit- (как мы делали ранее)

Можно задавать параметры скругления двумя (border-radius: 20px / 10px) или четырьмя значениями (border-radius: 20px 10px 10px 20px)

 

boxshadow (тень блока)

Цвет тени задается функцией 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;

}

@fontface (подключение шрифта)

Свойство @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) // красныйцвет 

Градиент 

lineargradient (линейный градиент)

Градиент задается тремя значениями начальная позиция, начальный, цвет конечный цвет

Начальная позиция задается

словами: 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);

Добавить комментарий