Слайд 1CSS3
Кушнир Дмитрий Викторович
Слайд 2Единицы измерения
Абсолютные **:
in, cm, mm, pt, pc.
1in = 2.54cm =
25.4mm = 72pt = 6pc.
Относительные:
px
%
em размер относительно текущего
размера шрифта
rem размер относительно размера шрифта корневого элемента (html)
vh 1% высоты окна
vw 1% ширины окна
vmin * 1vw или 1vh, в зависимости от того, что меньше
vmax * 1 vw или 1vh, в зависимости от того, что больше
calc() *
* - некоторые проблемы совместимости (2015)
** - используют как стили для печати
Слайд 3Рамки
Закругленные углы
.border_rounded {
background-color: #ddccb5;
border-radius: 5px;
border: 2px
solid #897048;
padding: 10px; width: 310px;
}
Пример1
Слайд 4Рамки Градиентные границы
(http://www.colorzilla.com/gradient-editor/)
Только FF:
.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:
#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;}
Слайд 5Рамки Градиентные границы
border-image: linear-gradient(-45deg, rgb(255,236,161) 15%, rgb(245,199,213) 70%) 50;
Пример
Слайд 6Рамки Изображения на границах
http://border-image.com/
.border_image {
border-style:solid
border-image: url(border.png) 27 27 27
27 round round;
}
/* величины указываются без размерности, но: */
.border_image
{
border-style:solid
border-image: url(border.png) 5% 6% 5% 7% round round;
}
Слайд 7Тени у блоков
http://css3gen.com/box-shadow/
box-shadow: Сдвиг x, сдвиг, y размытие, толщина, цвет
.border_shadow
{
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}
#a1 {box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .2);}
#a2 {box-shadow: inset 20px -15px 10px 5px navy;}
Слайд 8Текстовые эффекты в CSS3
http://css3gen.com/text-shadow/
Тень от текста
.text_shadow {
color: #897048;
background-color:
#fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px; }
Несколько теней:
#a1
{text-shadow: 1px 1px 2px black, 0 0 1em red;}
Слайд 9Перенос длинных слов
.text_wrap { word-wrap: break-word; }
Слайд 10Использование шрифтов
«безопасные» Web-шрифты:
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Слайд 11Использование своих шрифтов
@font-face {
font-family: 'my_font';
src: url('http://mysite.net/files/font.ttf'); }
…
h1 {font-famaly: my_font}
…
Слайд 12Форматы шрифтов
WOFF (Web Open Font Format): открытый сжатый формат шрифта
OpenType или TrueType, поддерживающий дополнительные метаданные. *
WOFF2
TTF: TrueType.
EOT (Embedded OpenType):
компактный формат OpenType-шрифтов.
SVG (Scalable Vector Graphics): формат векторной графики.
Поддержка браузерами:
ни один не обеспечивает полную кроссбраузерность (http://caniuse.com/woff)
* В большинстве случаев можно ограничиваться форматом WOFF
Слайд 13@font-face {
font-family: JournalRegular;
src: url(journal-webfont.woff) format("woff");
font-weight: normal;
font-style: normal;
}
Слайд 14/* для IE < 9.0 */
@font-face {
font-family: JournalRegular;
src: url(journal-webfont.eot);
src: url(journal-webfont.eot?#iefix)
format("embedded-opentype");
}
h1 { font-family: JournalRegular; }
Слайд 15http://webfont.ru/
https://www.google.com/fonts/- подготовка шрифтов из набора google - скрипты подключаются с
самого сайта google.
http://www.fontsquirrel.com/fontface/generator - генертор шрифтов для сайта. Ограниченный набор
шрифтов без лицензионных ограничений (для CSS-подключения и для JS-подключения()).
http://edgewebfonts.adobe.com/
http://www.font2web.com/ - конвертр своего шрифта для сайта. Возможно использование лицензионных шрифтов.
http://www.microsoft.com/typography/WEFT.mspx - создание EOT шрифтов - EOT - встроена защита от использования на других сайтах и локально.
http://fonts.philip.html5.org/ - подготовка шрифта для css внедрения из списка шрифтов.
Слайд 16Размеры шрифтов
Можно использовать только один набор из шрифта, или даже
отдельные символы.
Слайд 17Скрипт cufon:
http://cufon.shoqolate.com/js/cufon-yui.js
Подготовка шрифта:
http://cufon.shoqolate.com/generate/
cufon-генератор]">
Cufon.replace("h1");
Слайд 18Пользовательский интерфейс
Растягивание блоков
none пользователь не может изменять размеры элемента;
both пользователь может изменять
размеры элемента;
horizontal пользователь может изменять только ширину элемента;
vertical пользователь может изменять только
высоту элемента.
.ui_resizable { padding: 20px; border: 1px solid; resize: both; overflow: auto; }
Слайд 19Выделение
.ui_outline {
width: 150px;
padding: 10px;
height: 70px;
border: 2px
solid black;
outline: 2px solid #897048;
outline-offset: 15px; }
* outline-offset
– сдвигает рамку
Слайд 20Разбиение на колонки
.multiplecolumns {
-moz-column-count: 4;
-moz-column-width: 150px;
-moz-column-rule: 1px
solid #999;
-webkit-column-count: 4;
-webkit-column-width: 150px;
-webkit-column-rule: 1px solid #999;
column-count: 4;
column-width: 150px;
column-rule: 1px solid #999; }
Слайд 21Объединение колонок
h2 { column-span: all; }
Слайд 22Фоновые изображения
Размер фоновой картинки
#wrap1 {
background-image:url("image2.gif"); background-size:150px 250px; }
Слайд 23Фоновые изображения
Комбинирование фоновых изображений
.multiplebackgrounds {
height: 150px;
width: 270px;
padding:
40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif)
bottom left no-repeat,
url(middle.gif) left repeat-y;
}
Слайд 24Фоновые изображения
background-clip
border-box фон будет занимать все пространство внутри элемента включая границы;
padding-box фон
будет занимать только пространство внутри границ элемента;
content-box фон будет занимать только
содержимое элемента.
Слайд 25Фоновые изображения
background-origin
border-box положение элемента вычисляется относительно верхнего левого угла с внешней
стороны границы элемента;
padding-box положение элемента вычисляется относительно верхнего левого угла с
внутренней стороны границы элемента (является значением по умолчанию);
content-box положение элемента вычисляется относительно верхнего левого угла содержимого.
Слайд 26Прозрачность
.op1 {
opacity:0.8;
filter:alpha(opacity=80); }
* filter:alpha(opacity=80); - для IE
Слайд 27CSS3 Линейные градиенты
http://www.colorzilla.com/gradient-editor/
http://www.cssmatic.com/gradient-generator
background:linear-gradient(270deg,white,black);
background:-webkit-linear-gradient(top,white,black); /* для Chrome и Safari */
background:-o-linear-gradient(top,white,black);
/* для Opera */
background:-moz-linear-gradient(top,white,black); /* для Firefox */
background:-ms-linear-gradient(top,white,black); /* для
IE10+ */
Слайд 28background:linear-gradient(left,white 0%,green 50%,black 100%);
0% - начало градиента
100% - конец градиента
Слайд 29Сферические градиенты
background:radial-gradient(white 20%,black 40%);
background:-webkit-radial-gradient(white 20%,black 40%); /* для Chrome и
Safari */
background:-o-radial-gradient(white 20%,black 40%); /* для Opera */
background:-moz-radial-gradient(white 20%,black 40%);
/* для Firefox */
background:-ms-radial-gradient(white 20%,black 40%); /* для IE10+ */
Слайд 30background:
repeating-linear-gradient
(50deg,white,white 5px, black 5px,black 10px);
background:
repeating-radial-gradient (circle,#8F04A8 0%,#5D016D 40%,black 60%);
Пример
Слайд 31CSS3 трансформирование
CSS3 функции трансформирования (transform)
Функция Описание
translate(x,y) Смещает элемент от изначальной позиции по
горизонтали и вертикали.
translateX(x) Смещает элемент по горизонтали.
translateY(y) Смещает элемент по вертикали.
scale(x,y) Растягивает элемент
по вертикали и горизонтали.
scaleX(x) Растягивает элемент по горизонтали.
scaleY(y) Растягивает элемент по вертикали.
rotate(градусы) Поворачивает элемент по часовой стрелке.
skew(x,y) Скашивает элемент по горизонтали и вертикали.
skewX(x) Скашивает элемент по горизонтали.
skewY(y) Скашивает элемент по вертикали.
matrix(x,x,x,x,x,x) Трансформирует элемент с помощью матрицы из 6 значений.
Пример:
transform:rotate(7deg);
….
Слайд 33CSS3 трансформирование
#d1
{
border:1px #000 solid;
width:200px;
padding:10px;
font-size:1.5em;
-webkit-transition: width 4s; /* Chrome и Safari*/
-o-transition: width 4s;
/* Opera */
-moz-transition: width 4s; /* Firefox 4 */
transition: width 4s;
}
#d1:hover {width:500px; }
Слайд 34#d1:hover {
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox
*/
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera
*/
transform:rotate(7deg);
}
Пример
Слайд 35Плавная трансформация
CSS свойство transition
div {transition: color 4s, width 4s,
background-color 4s;}
div:hover { width:600px; }
Слайд 36Плавность переходов контролируется с помощью функциями:
linear
ease (функция смягчения по умолчанию)
ease-in
ease-out
ease-in-out
cubic-bezier(x,x,x,x)
(поведение функции контролируется переданными параметрами)
Слайд 37CSS3 трансформирование
CSS3 свойства переходов
transition Позволяет задать значения четырех различных свойств перехода
в одном определении.
transition-property Позволяет указать имя CSS свойства, к которому будет
применен эффект перехода.
transition-duration Позволяет указать время выполнения перехода (по умолчанию имеет значение 0).
transition-timing-function Позволяет задать функцию смягчения отвечающую за плавность выполнения перехода (по умолчанию имеет значение 'ease').
transition-delay Позволяет задать задержку перед началом выполнения перехода (по умолчанию имеет значение 0).
Слайд 38Примеры:
div { width:230px; transition:width 4s; }
div { transition-timing-function:linear; }
div:hover
{ width:600px; }
Пример
http://html5book.ru/css3-transform/
Слайд 39CSS 3D трансформация
http://html5book.ru/3d-transform/
Слайд 40CSS3 Анимация
@-webkit-keyframes anim1 {
from {top: 0px;}
to
{top: 200px;}
}
@keyframes anim1{
from {top: 0px;}
to {top: 200px;}}
#d1{
border:2px
#000 solid;
background-color:#7F0055;
height:100px; width:100px; font-size:2em;
-webkit-animation: anim1 4s 3;
animation: anim1 4s 3;
}
Пример
Слайд 41@keyframes anim {
0% { margin-left:3px;
margin-top:3px;
background-color:#7F0055;}
30% { margin-left:3px;
margin-top:250px;
background-color:#7F0055;}
60% { margin-left:500px;
margin-top:250px;
background-color:black;}
100% { margin-left:3px;
margin-top:3px;
background-color:#7F0055;}
}
Слайд 43Селекторы
*
h1
#el1
.group1
мультиселекторы классов…
td p {…} Вложенные селекторы (только
для параграфов внутри ячеек)
td > em {…} дочерние селекторы
em + strong
{…} cоседние селекторы
h1 ~ p {} родственные селекторы
a:hover
p:first-letter
Слайд 44p[id] все с атрибутом id
:not(div) все не div
::selection выделено пользователем
[href='http://www.ya.ru']
[src*="picture"] атрибут
содержит строку picture
[src^="http://"] атрибут начинается на http
[src$=".gif"] атрибут завершается gif
p:first-child первый из элементов
p:last-child последний
из элементов
Слайд 45:first-child
:focus
:hover
:last-child
:nth-child
:nth-last-child
:nth-last-of-type
…
Слайд 46:before; :after; :content
Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента,
к которому он добавляется. Работает совместно со свойством content.
Псевдоэлемент :after
используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент :after работает совместно со свойством content.
Слайд 47:before
:after
p:before
{
content: ' Это добавим перед.';
font-weight:bold;
}
p:after
{
content: ' Это добавим после.';
}
…
Это
будет в центре.
Это опять будет в центре.
Слайд 48.email-address:before {
content: "Email address: ";
}
chriscoyier@gmail.com
Слайд 49\2018 - Left Single Smart Quote
\2019 - Right Single Smart
Quote
\00A9 - Copyright
\2713 - Checkmark
\2192 - Right arrow
\2190 - Left
arrow
#main-content a:visited:before { content: "\2713 "; }
Слайд 50ссылки
http://css3generator.com/
http://cubic-bezier.com
http://css3.me/
http://css3button.net/
http://www.css3maker.com/
http://www.colorzilla.com/gradient-editor/
http://colorschemedesigner.com/
http://livetools.uiparade.com/button-builder.html
http://livetools.uiparade.com/form-builder.html
http://livetools.uiparade.com/icon-builder.html
http://livetools.uiparade.com/ribbon-builder.html
http://enjoycss.com/
![p[id] все с атрибутом id:not(div) все не div::selection выделено пользователем[href='http://www.ya.ru'] [src*=](/img/thumbs/8c494ca6d0e4e06841bb12c55bcaea37-800x.jpg "CSS3 p[id] все с атрибутом id:not(div) все не div::selection выделено пользователем[href='http://www.ya.ru'] [src*=")
