WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

CSS

CSS clipping


  • clip-path
  • shape-outside
  • mask-border
  • mask
  • mask-clip
  • -webkit-background-clip: text


Клипы

Клип (clip-path) позволяет менять форму HTML элемента. Форму можно создать  как: circle, ellipse, polygon, SVG - image.

circle( [<shape-radius>]? [at <position>]? )

ellipse( [<shape-radius>{2}]? [at <position>]? )

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )


shape-radius - радиус, для эллипса задаются 2 радиуса

position - две координаты центра - смещения от левой границы и от верхней границы блока

fill-rule - способ заливки внутренней области многоугольника

shape-arg - массив координат вершин многоугольника


Простой клип

CSS:

#clipTest { display: inline-block; padding: 10px; margin: 20px; height: 300px; width: 200px; background-color: blue; clip-path: circle(150px at 0px 0px); color: #fff; font-size: 1.5rem; font-weight: bold; }


HTML


<div id="clipTest">Clip test</div>





Текст и клип

Текст, располагающийся вокруг области клипа в форме окружности. Клип-окружность создаёт свойство   

clip-path: circle(100px at 0px 0px) 

Область, которая "вырезана" из блока с текстом, создаёт свойство

shape-outside: circle(110px at 0px 0px)

Свойство 

float: left

для клипа обязательно для того, чтобы текст "обтекал" клип.


<!DOCTYPE html> <head> <style> #shapeOutsideTest1 { display: inline-block; position: relative; height: 300px; width: 300px; position: relative; border: 1px solid red; padding: 10px; } #shapeOutsideTest1 > #shape1-1 { float: left; height: 100%; width: 100%; background-color: blue; shape-outside: circle(110px at 0px 0px); -webkit-clip-path: circle(100px at 0px 0px); clip-path: circle(100px at 0px 0px); } </style> </head> <body> <div id="shapeOutsideTest1"> <div id="shape1-1"></div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores id, ad illo ea iste totam, consectetur ab praesentium repudiandae iusto perferendis consequuntur, recusandae suscipit fugit dolorum impedit? Blanditiis, pariatur quae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut consequuntur provident eum illo doloremque ducimus alias molestiae quo illum eveniet, debitis saepe ex, recusandae magni veniam esse! Excepturi, ratione tenetur! </div> </body> </html>




Два клипа и текст

Два клипа в форме многоугольников и текст между ними.

Один клип - слева () , второй клип - справа ()

<!DOCTYPE html> <head> <style> #shapeOutsideTest2 { display: inline-block; height: 400px; width: 400px; border: 1px solid gray; padding: 10px; } #shapeOutsideTest2 #shape2-1 { float: left; width: 50%; height: 100%; margin-right: 10px; background-color: red; clip-path: polygon(0% 0%, 38% 0, 54% 50%, 38% 100%, 0% 100%); shape-outside: polygon(0% 0%, 38% 0, 54% 50%, 38% 100%, 0% 100%); } #shapeOutsideTest2 #shape2-2 { float: right; width: 45%; height: 100%; background-color: green; shape-outside: polygon(100% 0, 0 100%, 100% 100%); clip-path: polygon(100% 0, 0 100%, 100% 100%); } </style> </head> <body> <div id="shapeOutsideTest2"> <div id="shape2-1"></div> <div id="shape2-2"></div> <div id="shape2Text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores id, ad illo ea iste totam, consectetur ab praesentium repudiandae iusto perferendis consequuntur, recusandae suscipit fugit dolorum impedit? Blanditiis, pariatur quae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut consequuntur provident eum illo doloremque ducimus alias molestiae quo illum eveniet, debitis saepe ex, recusandae magni veniam esse! Excepturi, ratione tenetur!Aut consequuntur provident eum illo doloremque ducimus alias molestiae quo illum eveniet, debitis saepe ex! </div> </div> </body> </html>





<!DOCTYPE html> <head> <style> #shapeOutsideTest3 { display: inline-block; border: 1px solid #157cca; width: 300px; height: 300px; } #shapeOutsideTest3 .leftTriangle { width: 40%; height: 100%; background-color: #157cca; margin: 0 20px 0 0; float: left; clip-path: polygon(0 0, 0 100%, 50% 0); shape-outside: polygon(0 0, 0 100%, 50% 0); } #shapeOutsideTest3 .rightTriangle { width: 40%; height: 100%; background-color: #157cca; float: right; clip-path: polygon(100% 0, 50% 100%, 100% 100%); shape-outside: polygon(100% 0, 50% 100%, 100% 100%); } </style> </head> <body> <div id="shapeOutsideTest3"> <div class="leftTriangle"></div> <div class="rightTriangle"></div> Lorem isum dolor sit amet consectetur adipisicing elit. Beatae aspernatur aut molestias, expedita ipsa quae deserunt, non, magni recusandae dolor blanditiis asperiores ex itaque accusantium alias. Voluptas quis corrupti ducimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni nihil repellendus soluta doloribus, totam sunt aliquam facere a maxime itaque, cupiditate deleniti molestias nostrum eos ipsum, ex rerum. Minus, perspiciatis. </div> </body> </html>



Картинка - в фоне клипа

Картинка - background-image: url(../images/image.jpg);

Многоугольник - клип (clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%))


<!DOCTYPE html> <head> <style> #wrapper4 { width: 320px; height: 300px; display: inline-block; margin: 20px; } #wrapper4 #clip4 { float: left; width: 100%; height: 100%; margin-right: 30px; background-image: url(../images/image.jpg); background-size: auto 100%; shape-outside: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%); -webkit-clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%); clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%); } #wrapper4 p { color: #0099ff; } </style> </head> <body> <div id="wrapper4"> <div id="clip4"></div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati voluptatum inventore facilis eum illum corporis, dolor possimus repellendus tenetur rerum aliquid sint aliquam! Nostrum amet id accusamus delectus ad. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem voluptate eveniet sit molestiae enim? Necessitatibus voluptas delectus cupiditate error, iste sapiente earum perspiciatis sint voluptatem, debitis impedit porro assumenda nulla! </div> </div> </body> </html>



Клип - текст

-webkit-background-clip: text;

Фоновая картинка вставлена в клип-текст. Цвет текста задан с прозрачностью.

 

<!DOCTYPE html> <head> <style> #wrapper5 { display: inline-block; border: 1px solid blue; text-align: center; background-image: url("../images/coffee-writing-computer-blogging-34676.jpg"); background-size: auto 100%; background-position: center; -webkit-background-clip: text; color: #74000077; padding: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: bolder; font-size: 200px; } </style> </head> <body> <div id="wrapper5"> TEST </div> </body> </html>







CSS 2D transforms

Трансформации в CSS позволяют перемещать, поворачивать, масштабировать и деформировать элементы.

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

Примеры:


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS transform</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="rotate">rotate</div> <div class="scale">scale</div> <div class="skewX">skewX</div> <div class="translateX">translateX</div> </body> </html>


div { min-width: 100px; font-size: 2rem; background-color: orange; padding: 50px; margin: 50px; text-align: center; transition: transform 500ms linear; color: #FFF; } div:hover { background-color: rgba(255, 166, 0, 0.582); } .rotate:hover { transform: rotate(0.01turn); } .scale:hover { transform: scale(1.5, 1); } .skewX:hover { transform: skewX(-10deg); } .translateX:hover { transform: translateX(10px); }



CSS Media Queries


В спецификации CSS3 введены медиа-звпросы.

Наряду с HTML тегом <meta name="viewport" ... > - это удобный и гибкий мехпнизм для создания сайтов с адаптивным дизайном.

Медиа-запросы позволяют модифицировать CSS таблицы стилей для разных устройств, HTML тег META с параметрами типа:

<meta name="viewport" content="width=device-width, initial-scale=1">

Позволяет задать некоторые параметры отображения сайта на разных устройствах (начальное увелечение - zoom, соотношение физических рикселей экрана устройства к CSS пикселям и тд). 

В атрибуте контент ( content) можно задавать параметры:

Параметр Описание
width Ширина экрана (виртуальная). Может быть задана в CSS пикселях (width=600) или равной физически возможному разрешению экрана устройства (width=device-width)
device-width Ширина экрана (физическая)
height Высота (длина) экрана (логическая, виртуальная)
device-height Высота (длина) экрана (физическая)
initial-scale Начальное увеличение (zoom) для странички на экране устройства. 1.0 - нет увеличения.
minimum-scale Минимальное увеличение, доступное пользьзователю.
maximum-scale Минимальное увеличение, доступное пользьзователю.
user-scalable Разрешено или запрещено пользователю увеличивать (уменьшать) страничку. Может быть yes или no.

При задании ширины экрана для устройства вывода нужно иметь в виду, что CSS пиксели (логические пиксели) не соответствуют физическим пикселям (разрешающая способность экрана). Для мобильных устройств эти параметры сильно отличаются.

Подробнее, для разных устройств, можно посмотреть, например, здесь: http://viewportsizes.com/

Медиа-запросы в CSS3 расширили идею медиа-типов CSS2: вместо того, чтобы определять тип устройства, в CSS3 определяются параметры устройства.

Такие как:

  • ширина и высота окна просмотра
  • ширина и высота устройства
  • ориентация (это планшет / телефон в альбомном или портретном режиме?)
  • разрешающая способность

Использование медиа-запросов - это удобный, популярный метод корректировки CSS стилей для различных устройств: настольные компьютеры, ноутбуки, планшеты и мобильные телефоны (например, телефоны iPhone и Android).

Медиа-запрос состоит из типа носителя и может содержать одно или несколько выражений, которые принимают значения true, либо false.

@media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-Code; }


@media - директива: медиа-запрос ( совместно с ней также может использоваться CSS диретива @support, которая позволяет проверить, поддерживает ли браузер те или иные CSS свойства )

mediatype - тип устройства

mediafeature - набор логических выражений, состоящий из описаний свойств устройств, связанных длгическими операторами and, not, or.

Результат запроса истинен, если:

указанный тип носителя соответствует типу устройства, на котором отображается документ

все выражения в запросе на мультимедиа являются истинными. 

Когда медиа-запрос является истинным, применяются соответствующие таблицы стилей или правила стилей.

Если не использутся операторы not или only, тип носителя можно не указывать (подразумевается: все типы).

Иакже можно задать разные таблицы стилей для разных носителей:


<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="/print.css">



CSS3 - некоторые типы устройств (CSS3 media types)

Тип устройства (media type) Описание
all Любые устройства.
print Устройства печати.
screen Экран компьютера, таблета, мобильного телефона.
speech Устройства чтения экрана, которые озвучивают текст.
handheld
Наладонники.
projection
Проекторы.
printПринтеры.


Свойства устройств (CSS3 media features)


Синтаксически мультимедиа-свойства напоминают свойства CSS: они имеют имена и принимают определенные значения. Однако есть несколько важных различий между свойствами и средствами массовой информации::

  • Свойства CSS используются в объявлениях для предоставления информации о том, как представить документ. Свойства мультимедиа-устройств используются в выражениях для описания требований к устройству вывода.
  • Большинство мультимедиа-свойств принимают необязательные ‘min-’ или ‘max-’ префиксы для того, чтобы задать константы "больше или равно" и "меньше или равно". Этот синтаксис используется, чтобы избежать символов "<" и ">" которые могут вступать в конфликт с HTML и XML. Те свойства, которые допускают префиксы, чаще всего (но не обязательно) используются с префиксами.
  • Свойства CSS всегда требуют значения для формирования объявления. С другой стороны, свойства мультимедиа могут использоваться и без значений. В случае иультимедиа-свойств, выражение (свойство) будет принимать значение true, если (свойство: x) будет принимать значение true для значения x, отличного от нуля или нуля, за которым следует идентификатор единицы измерения (то есть - любое, кроме 0, 0px, 0em и т. Д. ). Те multimedia - свойства, которые описаны с префиксом min / max, не могут использоваться без конкретного значения.
  • Свойства CSS могут принимать более сложные значения, например, вычисления, которые включают в себя несколько других значений. Media-свойства могут иметь только единственное значение: одно ключевое слово, одно число или число с единицей измерения. (Исключение составляют ‘aspect-ratio’ и ‘device-aspect-ratio’ )

Например, медиа-свойство «color» может формировать выражения без значения (‘(color)’) или со значением (‘(min-color: 1)’).


Свойство Описание Пример
width

Описывает ширину области отображения устройства. Для непрерывных носителей это ширина окна просмотра , включая размер отображаемой полосы прокрутки (если есть). Для постраничных носителей это ширина окна страницы.

Значение не может быть отрицательным.

Допускает префиксы min/max

Например, этот мультимедийный запрос определяет, что таблица стилей применится для печати на устройстве вывода, ширина которого более 25 см:


<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

Этот мультимедийный запрос задаёт, что таблицу стилей нужно использовать для устройств? у которых viewport (часть экрана / бумаги, где отображается документ) шириной от 400 до 700 пикселей:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Этот мультимедийный запрос определяет устройства, для которых viewport больше 20em.

@media all and (min-width: 20em)


height  Описывает длину целевой области отображения устройства вывода. Для непрерывных носителей это высота окна просмотра, включая размер отображаемой полосы прокрутки (если есть). Для постраничных носителей это высота окна страницы.

Указанная <длина> не может быть отрицательной.

Допускает префиксы min/max
@media screen and (height: 800px) { … }
device-height
высота (длмна) поверхности рендеринга устройства. Значение свойства height не всегда равно значению device-height. Это зависит от зарактеристик конкретного устройства (логический - CSS пиксель может не соответствовать физическому пикселю устройства).

В последние годы физическое разрешение экрана современных устройств увеличилось до такого размера, что отдельные пиксели неразличимы для человеческого глаза. Например, последние смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920-1080 пикселей (~ 400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы в меньшем физическом размере, использую несколько аппаратных пикселей для каждого пикселя CSS.

 HTML tag meta позволяет задать параметр width=device-width
<meta name="viewport" content="width=device-width, initial-scale=1">

device-width
ширина поверхности рендеринга устройства вывода. Для сплошных носителей это ширина экрана. Для постраничного носителя это ширина размера листа страницы.
@media screen and (device-width: 800px) { … }
В приведенном выше примере таблица стилей будет применяться только к экранам, на которых в настоящее время отображается ровно 800 горизонтальных пикселей. Единица «px» здесь - логический пиксель
orientation
Принимает заначение portrait, если для этого устройства height больше или равна width.
В противном случае - landscape.

Значение не может быть отрицательным.


Эта директива описывает стили для любых типов устройств (all) с вертикальной ориентацией экрана.

@media all and (orientation:portrait) { … }

aspect-ratio

Отношение значения  свойства width к значению свойства  height

 Допускает префиксы min/max


device-aspect-ratio
Отношение значения свойства device-width к значению свойства device- height
@media screen and (device-aspect-ratio: 1280/720) { … }
colorКоличество битов, которое устройство использует для обозначения увета. Для монохромных устройств color = 0
Допускает префиксы min/max
Все устройства с цветным экраном:
@media all and (color) { … }

color-index
количество записей в таблице поиска цветов устройства вывода
Допускает префиксы min/max
media="all and (min-color-index: 256)"
Те устройства, у которых 256 цветов
monochrome
количество бит на пиксель в монохромном буфере кадров. Если устройство не является монохромным устройством, значение  будет равно 0.
В примере одна таблица стилей определяется для цветных, а другая -  для монохромных устройств:
<link rel="stylesheet" media="print and (color)" href="http://…" /> <link rel="stylesheet" media="print and (monochrome)" href="http://…" />
resolution
Разрешение - плотность пикселей для устройства.@media print and (min-resolution: 300dpi) { … }
@media print and (min-resolution: 118dpcm) { … }
scanпроцесс сканирования выходных устройств «ТВ».
Например, этот мультимедийный запрос задаёт, что таблица стилей - для устройств с прогрессивной разверткой (progressive scan):
@media tv and (scan: progressive) { … }
grid
Свойств используется для запроса устройства, является ли оно точечным или графическим (grid или bitmap ). Если выходное устройство основано на сетке (например, терминал «tty» или дисплей телефона с одним фиксированным шрифтом), значение будет равно 1. В противном случае значение будет равно 0.

Только 0 и 1 являются допустимыми значениями. 
@media handheld and (grid) and (max-width: 15em) { … }





Примеры

CSS - диреrтивы @media и @support могут быть размещены на одном уровне кода или вложены.

/* Расположено в самой программе */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* Вложено в другую директиву */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } }



@media print { body { font-size: 10pt; } } @media screen { body { font-size: 13px; } } @media screen, print { body { line-height: 1.2; } } @media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) { body { line-height: 1.4; } }



@media print { body { font-size: 10pt } }


@media screen { body { font-size: 13px } }


@media screen, print { body { line-height: 1.2 } }











CSS Grid Layout

CSS Grid Layout — новая и мощная система построения макета окна браузера, позволяющая с лёгкостью разделить веб-страницу на столбцы и строки.

Главным отличием Grid от Flexbox является количество измерений (осей). При работе только с последним вам придётся выбирать между осью X и осью Y. Иначе говоря, Flexbox может быть направлен на создание только колонок или только строк.

Однако эти инструменты не конкурируют друг с другом, поэтому можно применять их вместе.

Сегодня большинство браузеров поддерживает Grid. Но Grid новее, чем FlexBox (Bootstrap подерживает FlexBox) , поэтому при использовании GRID больше вероятность того, что возникнут проблемы с совместимостью браузеров. Возможно, какие-то версии браузеров не поддерживают все свойства Grid или поддерживают частично.

Основные понятия

Контейнер (CSS grid container)

Планирование макета начинается с контейнера. Контейнер задаёт сетку - разбиение экрана. Сетка состоит из ячеек (пересечение рада и колонки) и разделительных линий между ячейками.

Контейнер - основа макета. Есть корневой - главный, родительский контейнер. В его ячейки могут быть, в свою очередь, вложены другие элементы - контейнеры.

Элемент-контейнер описывается свойством display: grid (контейнер - блочный элемент) или display:inline-grid (контейнер - строчный элемент).

Количество, размер ячеек внутри контейнера может быть определено автоматически или задано вручную.

Элемент внутри контейнера (Grid Item)

Дочерний элемент контейнера. Элемент, расположенный определённым образом на сетке-макете, которую задал контейнер. Элементы на сетке можно расположить произвольным образом. Автоматически или вручную. В одной или нескольких ячейках. Задать координаты начала и конца элемента по клеткам или по (поименованным или пронумерованным) разделительным линиям, расположенным между ячейками.

Пример: простой макет

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <div id='container0'> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> <span class='items1'>&nbsp;</span> </div> </body> </html>

Определим один контейнер (#container0) с дочерними элементами (.items1) - колонками автоматического размера и автоматического расположения, с промежутками между ними - 2 px.

#container0 { display: grid; grid-auto-flow: row; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; }

Зададим расположение дочерних элементов - по колонкам.

#container0 { display: grid; grid-auto-flow: column; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; }

Определим вручную ряды для размещения дочерних элементов (grid-template-rows). Зададим высоту каждого ряда в px.

#container0 { display: grid; grid-template-rows: 10px 20px 30px 40px 50px 60px 70px; } .items1 { background-color: lightgray; border: 1px dotted red; }

Разобьём контейнер на 15 ячеек: 5 колонок и 3 ряда.

#container0 { display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px 100px 100px; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; }

Дочерние элементы распределились по ячейкам. Так как элементов меньше, чем ячеек. то в сетке остались незаполненные ячейки.

Использованные директивы

grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px 100px 100px;

можно переписать, используя CSS grid функцию repeat() в виде:

grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(5, 100px);

Добавим стили к первому и последнему дочерним элементам (first-child, last-child), которые заставят элементы занять 5 колонок (целый ряд) в первом и третьем рядах соответственно.

#container0 { display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px 100px 100px; grid-gap: 2px; } .items1 { background-color: lightgray; border: 1px dotted red; } .items1:first-child { grid-row: 1 / 2; grid-column: 1 / 6; background-color: red; } .items1:last-child { grid-row: 3 / 4; grid-column: 1 / 6; background-color: red; }

Единицы измерения (CSS grid units)

Для задания размеров ячеек макета (CSS grids), расстояний между ними можно использовать различные единицы ихмерения.

Это могут быть как стандартные для CSS 3 единицы (px, %, em, ...) так и новая единица измерения - fr (fractions).

В примере ниже, внутри контейнера element, колонки распределяются равномерно по ширине окна, причём соотношение их ширины - 1:3:1 , высота рядов задаётся для первого (60px ) и последнего ряда (5em), высота среднего ряда автоматически вычисляется, в соответствии с контентом.

element { display: grid;grid-template-columns: 1fr 3fr 1fr;grid-template-rows: 60px auto 5em;}

Единицы измерения - fr и % похожи. Например, 2 директивы: grid-template-columns: 50% 50%; и grid-template-columns:1fr 1fr; приводят к одинаковым результатам (когда используются только % или только fr ).

В том случае, когда эти (относительные) единицы измерения используются совместно с другими (такими как px , em), результаты разные.

Директива

grid-template-columns: 100px 50% 50%;

создаст одну колонку 100px и 2 шириной 50% от ширины контейнера (общая ширина = 100% + 100px)

Директива

grid-template-columns: 100px 1fr 1fr;

создаст колонку 100px, поделит оставшуюся ширину на 2 и создаст ещё 2 колонки равной ширины. (общая ширина колонок - 100% от контейнера)

Создание поименованных областей (Named Grid Areas)

В дополнение к тому, что дочерние элементы (grid items) можно размещать по ячейкам сетки (например: grid-column-start: 2;grid-row-start: 2;), можно создавать на сетке поименованные области и размещать контент в них.

Область можно создать директивой:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |area_name;

Где:

grid-row-start - ряд, в котором область начинается

grid-column-start колонка, в которой область начинается

grid-row-end - ряд - конец области

grid-column-end - колонка - конец области

area_name - имя области

Тогда можно разместить элемент в контейнере в этой области, указав для него:

grid-area: area_name;

Например:

index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <div id='wrapper'> <div id='logo'>&nbsp; </div> <div id='menu'>&nbsp; </div> <div id='leftCol'>&nbsp; </div> <div id='content'>&nbsp; </div> <div id='note'>&nbsp; </div> <div id='footer'>&nbsp; </div> </div> </body> </html>

style.css

#wrapper { display: grid; grid-template-areas: 'logo menu menu menu' 'left content content content' 'left notes footer footer'; grid-template-rows: 50px minmax(100px, auto) 10px; grid-template-columns: repeat(4, 1fr); grid-gap: 2px; } #logo { grid-area: logo; background-color: gray; background-image: url('../images/logo.png'); background-size: auto 100%; background-repeat: no-repeat; } #menu { grid-area: menu; background-color: red; } #leftCol { grid-area: left; background-color: gray; } #content { grid-area: content; background-color: lightgray; } #note { grid-area: notes; background-color: green; } #footer { grid-area: footer; background-color: blue; }

Автоматическое разбиение на ячейки (implicit grid)

Для автоматического разбиения grid - контейнера на ячейки, используются CSS свойства:

grid-auto-columns - определяет размеры автоматически создаваемых колонок

grid-auto-rows - размеры автоматически создаваемых рядов

grid-auto-flow -

Для задания размеров ячейки контейнера могут использоваться:

Размер (px, em) - положительное число. Проценты (%) - положительное число. Fractures - положительное число, с единицей измерения - fr. Функция minmax(min, max), которая позволяет задать минимальное и максимальное значение для размера элемента. Ключевое слово auto, которое определяет автоматическое вычисление размеров.

Пример:

Стиль для контейнера

display: grid; grid-auto-columns: 1fr; grid-auto-rows: 100px;

задаёт алгоритм, по которому в окне браузера будут, при необходимости, организовываться ячейки для дочерних элементов.Согласно этому алгоритму, колонки для ячеек займут всю ширину экрана (если нужна будет одна колонка, то шириной 100%, четыре колонки - по 25%), а каждый ряд будет высотой 100px.

Реальные позиции ячеек в такой структуре будут определяться необходимым количеством ячеек в контейнере и их стилями.Зададим HTML шаблон документа (index.html):

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <div id='wrapper'> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> <div class='item1'>&nbsp;</div> </div> </body> </html>

Стили для этого примера:

/* Стиль контейнера */ #wrapper { display: grid; grid-auto-columns: 1fr; grid-auto-rows: 100px; grid-gap: 1px; } /* Стили для ячеек */ .item1 { background-color: blue; } .item1:nth-child(1) { grid-column: 1 / 5; }

Директива:grid-column: 1 / 5; задаёт, что элемент () должен занять в контейнере колонки с номера 1 по номер 5, что приводит к автоматическому созданию этих колонок по алгоритмуgrid-auto-columns: 1fr; - то есть одинакого размера, равномерно распределённых по ширине экрана.

Всего в HTML щаблоне описано 11 дочерних эдементов (.item1) в контейнере (.wrapper ). Все они размещены последовательно в созданной сетке.

Если задать для последнего элемента (:last-child) область его размещения, предусматривающую, 2 ряда? начиная с третьего (grid-row: 3 / span 2;), то размещение элементов в контейнере изменится..item1:last-child {grid-row: 3 / span 2;background-color: red;}

Выравнивание элементов внутри grid - контейнера

HTML структура макета GRID состоит из трёх уровней, на которых элементы могут быть отцентрованы (выравнены): GRID - container (элемент, с заданным свойством display: grid;),  GRID-item (дочерний элемент grid- контейнера), GRID-content (содержимое элемента ).

При работе с шаблоном grid есть две оси для выравнивания объектов: горизонтальная (inline ) и вертикальная (block).

Для выравнивания GRID-элементов (GRID items) по вертикальной оси используются свойства CSS:align-self и align-items.

Для выравнивания по горизонтальной оси - justify-items и justify-self.

Эти свойства могут принимать значения:

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baselinefirst
  • baselinelast
  • baseline

Для GRID-контейнера используются свойства:

align-items:

justify-items:


Для дочерних элементов

justify-self:

align-self:


CSS grid properties

  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid
  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end
  • grid-row
  • grid-column
  • grid-area
  • grid-row-gap
  • grid-column-gap
  • grid-gap

CSS grid функции

  • repeat()
  • minmax()
  • fit-content()

Масштабируемая векторная графика (SVG)

SVG (Scalable Vector Graphics) - это язык разметки, построенный на основе XML и предназначенный для описания двумерной векторной графики. SVG – это графическое расширение для языка HTML. То, что HTML  делает с текстом, SVG делает с графикой.

SVG похож на фирменную технологию Adobe Flash, но это - текстовый открытый веб-стандарт вместо закрытого двоичного формата. Он разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.

Изображение в формате SVG - это текстовый файл. Этот файл создаётся в формате XML. Поэтому изображения в этом формате можно создавать в текстовом редакторе. 

Часто удобнее создавать такие изображения, использую специальные программы (например - INKSCAPE ) или экспортируя из популярных графических программ (например - Adobe Photoshop).

 

Графические элементы, созданные в формате SVG, можно вставить в HTML страничку разными способами:

 

 

 

  • используя теги img, embed, iframe, object (для вставки изображения из отдельного файла)
  • в любой HTML тег в качестве фона
  • используя тег svg (описание изображения непосредственно в документе)

 

 

 

Синтаксис описания SVG

Теги <svg>, <g>, <defs>

 

Пример


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG 1</title>
<style>
SVG {
height :300px;
width :300px;
border :1px solid black;
}
</style>
</head>
<body>
<svg >
<line x1="0" y1="0" x2="300" y2="300" stroke-width="10" stroke="rgb(255,0,0)"/>
</svg>
<svg>
<polyline points="0,0 100,0 100,100 200,100 200,200 300,200 300,300" fill="rgb(255,0,0)" stroke-width="2" stroke="rgb(0,0,255)"/>
</svg>
<svg>
<rect width="300" height="300" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
<rect width="200" height="200" fill="rgb(255,0,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
<rect width="100" height="100" fill="rgb(0,255,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
</svg>
<svg>
<circle cx="150" cy="150" r="150" fill="rgb(255,255,0)" stroke-width="0" />
<circle cx="150" cy="150" r="100" fill="rgb(0,0,255)" stroke-width="0" />
</svg>
<svg>
<ellipse cx="150" cy="150" rx="150" ry="50" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
</svg>
<svg>
<polygon points="0,100 100,100 100,50 300,150 100,250 100,200 0,200" fill="rgb(255,255,0)" stroke-width="1" stroke="rgb(255,0,0)" />
</svg>
</body>
</html>

 

Результат 

 

Базовые формы изображений SVG 

Линия - прямая <line>

Тег рисует прямую линию. Использует параметры:

x1, y1 - координаты начала

x2, y2 - координаты конца

stroke-width - толщина линии

stroke - цвет линии

 

Линия - ломаная  <polyline>

Тег рисует ломаную линию. Использует параметры:

points - массив координат узлов линии

fill - цвет заливки

stroke-width - толщина линии

stroke - цвет линии

 

Прямоугольник <rect>

Тег рисует прямоугольник. Использует параметры:

x, y - координаты прямоугольника 

width - ширина

height - высота

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

 

Круг <circle>

Тег рисует круг. Использует параметры:

cx, cy - координаты центра

r - радиус

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

 

 

Эллипс <ellipse>

Тег рисует элипс. Использует параметры:

cx, cy - координаты центра

rx - ширина

ry - высота

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

 

Многоугольник <polygon>

Тег рисует многоугольник. Использует параметры:

points - массив координат углов

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

 

Путь <path>

Этот тип формы позволяет нарисовать на экране кривую сложной формы, состоящую из разных участков: отрезков прямых, дуг и тд..

Атрибут d тегв <path> задаёт набор команд рисования:

M - переместить курсор в точку (Move)

L - нарисовать отрезок прямой (Line)

A - нарисовать дугу (Arc)

Q - кривая Безье (Quadratic Bezier Curves)

C - кривая Безье (Cubic Bezier Curves)

Z - замкнуть путь 

 

Например:

<path d="M100,100
L150,100
a50,25 0 0,0 150,100
q50,-50 70,-170
Z"
style="stroke: #006666; fill: none;"/>

 

 

 

Команды, используемые при рисовании линии пути (path)

Каждая команда обозначается буквой, за которой следует набор цифр (параметры команды). Команды, который обозначаются заглавными буквами, обычно используют абсолютные координаты.Сторочными - как координаты, относительно текущего положения карандаша.

Команда Параметры Имя Описание
M x,y moveto Перемещает карандаш в точку с абсолютными координатами x,y без рисования
m x,y moveto Перемещает карандаш на x точек по горизонтали и на y - по вертикали, без рисования
 
L x,y lineto Рисует строку из текущего местоположения пера в указанную точку x, y.
l x,y lineto Рисует прямую от текущего положения до точки x,y относительно текущего положения
 
H x horizontal lineto Draws a horizontal line to the point defined by 
(specified x, pens current y).
h x horizontal lineto Draws a horizontal line to the point defined by 
(pens current x + specified x, pens current y). The x is relative to the current pens x position.
 
V y vertical lineto Draws a vertical line to the point defined by 
(pens current x, specified y).
v y vertical lineto Draws a vertical line to the point defined by 
(pens current x, pens current y + specified y). The y is relative to the pens current y-position.
 
C x1,y1 x2,y2 x,y curveto Draws a cubic Bezier curve from current pen point to x,y. x1,y1 and x2,y2 are start and end control points of the curve, controlling how it bends.
c x1,y1 x2,y2 x,y curveto Same as C, but interprets coordinates relative to current pen point.
 
S x2,y2 x,y shorthand / 
smooth curveto
Draws a cubic Bezier curve from current pen point to x,y. x2,y2 is the end control point. The start control point is is assumed to be the same as the end control point of the previous curve.
s x2,y2 x,y shorthand / 
smooth curveto
Same as S, but interprets coordinates relative to current pen point.
 
Q x1,y1 x,y quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. x1,y1 is the control point controlling how the curve bends.
q x1,y1 x,y quadratic Bezier curveto Same as Q, but interprets coordinates relative to current pen point.
 
T x,y shorthand / smooth quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. The control point is assumed to be the same as the last control point used.
t x,y shorthand / smooth quadratic Bezier curveto Same as T, but interprets coordinates relative to current pen point.
 
A rx,ry 
x-axis-rotation 
large-arc-flag,
sweepflag 
x,y
elliptical arc Draws an elliptical arc from the current point to the point x,y. rx and ry are the elliptical radius in x and y direction.
The x-rotation determines how much the arc is to be rotated around the x-axis. It only seems to have an effect when rx and ry have different values.
The large-arc-flag doesn't seem to be used (can be either 0 or 1). Neither value (0 or 1) changes the arc. 
The sweep-flag determines the direction to draw the arc in.
a rx,ry 
x-axis-rotation 
large-arc-flag,
sweepflag 
x,y
elliptical arc Same as A, but interprets coordinates relative to current pen point.
 
Z   closepath Closes the path by drawing a line from current point to first point.
z   closepath Closes the path by drawing a line from current point to first point.
 

 

 

Текст

 

<text x="20" y="40" style="fill: #000000; stroke: none; font-size: 48px;"> Fill only </text> <text x="20" y="100" style="fill: none; stroke: #000000; font-size: 48px;"> Stroke only </text> <text x="20" y="150" style="fill: #999999; stroke: #000000; font-size: 48px;"> Fill and stroke </text>

 

 

 

Оператор - switch

Этот оператор позволяет использовать разные изображения, в зависимости от языка.

 

 

<switch>
<g systemLanguage="en-UK">
<text x="10" y="20">UK English</text>
</g>
<g systemLanguage="en">
<text x="10" y="20">English</text>
</g>
<g systemLanguage="es">
<text x="10" y="20">Spanish</text>
</g>
</switch>

 

 SVG система координат

В SVG отсчёт координат (точка с координатами х=0, y=0) начинается из левого верхнего угла. Ось y - направление сверху вниз. Ось x - направление слева направо.

 

Единицы измерения

Единица измерения указывается после значения. Например:  10cm или 125mm.

Если единицы измерения не указаны, то имеются в виду пиксели - pixels (px).

Кроме этого допускается использование:

Единица Описание
em Высота букв шрифта по умолчанию.
ex Высота символа - x
px Пиксели
pt Пойнты (1 / 72 дюйма - inch)
pc Picas (1 / 6 дюйма)
cm Centimeters
mm Миллиметры
in Дюймы

Единицы, установленные в элементе <svg> для  атрибутов width и height, влияют только на элемент <svg> (viewport - область просмотра).

Формы, находящиеся  внутри элемента <svg> должны иметь свои собственные единицы.

Если единицы измерения не указаны, то по умолчанию используются пиксели.

 

Размеры форм, размер области их размещения

Область, в которую выводятся SVG - формы, определяется тегом <svg>. Эта область - ViewPort определяется параметрами тега <svg> - width, height и параметром viewPort. 

Если параметра viewBox в теге svg нет, то width и height определяют абсолютные размерый этой области.

Это - абсолютные размеры области видимости форм. И параметры размеров самих форм, которые выводятся на экран тоже абсолютные (x, y, r, cx, cy, ... ).

Например, если задано в теге svg  height :500 и width :200, то на экране выделится для вывода изображений область шириной 200 и высотой 500 пикселей. Если в ней определено: 

<rect   width=50 height=70 fill ="#0b0" stroke-width="1" stroke="#050" />

то внутри области будет нарисован прямоугольник шириной 50 рикселей и высотой - 100.

Параметр viewBox пропорционально меняет размеры всех элементов. Эта область имеет координаты (x, y ) и размеры (ширину, высоту).  Например: viewBox="0 0 50 20". Если для нашего примера задать такой viewBox, то реальные размеры всех элементов увеличется по горизонтали на коэффициент 500/50, а по вертикали - на коэффициент 200/20. То есть реальные размеры прясоугольника будут - 500 на 700 пикселей, а размер вилимой области - 5000 на 2000 пикселей.

 

 

Применение стилей к SVG 

С SVG можно использовать стили как внутри SVG - тегов, так и отдельно описанныа, аналогично HTML стилям.

Примеры:

 

<svg> <rect x="203" width="200" height="200" style="fill:red; stroke:black; stroke-width:3;"/> </svg>

 

<style type="text/css" media="screen"> rect { fill: green; stroke: black; stroke-width: 3; } rect:hover { fill: green; } </style>

 

 

<link rel="stylesheet" type="text/css" href="/style.css">

 

 

<?xml-stylesheet type="text/css" href="/style.css"?>

 

 

Назначение стилей для всех сгруппированных элементов

<g style="fill:blue; stroke:black; stroke-width:3; fill-opacity: 0.5;"> <rect x="200" width="200" height="200"/> <circle cx="120" cy="100" r="100"/> </g>

 

 

Анимация SVGs при помощи CSS

<svg> <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff"> <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 60 60" repeatCount="indefinite" /> </rect> </svg>

 

 

 

 

<rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;"> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" rotate="auto" /> </rect>

 

 

 

Пример: таймер


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Javascript test1</title>
<script>
var x2, y2, grad, clockFace, secCounter, arrLength// Declare globals
function drawTimer(){
// Init counter
x2=0, y2 = 0, grad = -90, clockFace = 400, secCounter = 0, arrLength = 180

document.getElementById("myTimer").style.width = clockFace + "px";
document.getElementById("myTimer").style.height = clockFace + "px";
document.getElementById("myTimer").style.border = "4px solid red";
document.getElementById("myTimer").style.backgroundColor = "#FFDDDD";
document.getElementById("myTimer").style.borderRadius = "30%";
x1 = clockFace/2;
y1 = clockFace/2;
x2 = arrLength;
y2 = 0;
rad = grad * (Math.PI / 180);
x2 = x1 + Math.cos(rad)*arrLength;
y2 = y1 + Math.sin(rad)*arrLength;
console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2);
// Draw Line
document.getElementById("arrow").setAttribute("x1",x1);
document.getElementById("arrow").setAttribute("y1",y1);
document.getElementById("arrow").setAttribute("x2",x2);
document.getElementById("arrow").setAttribute("y2",y2);
document.getElementById("arrow").setAttribute("stroke-width",2);
document.getElementById("arrow").setAttribute("stroke","#FF0000");
// Draw arrow end point
document.getElementById("arrowEnd").setAttribute("cx",x2);
document.getElementById("arrowEnd").setAttribute("cy",y2);
document.getElementById("arrowEnd").setAttribute("r",4);
document.getElementById("arrowEnd").setAttribute("fill","#FF0000");

document.getElementById("arrowEnd").setAttribute("stroke-width",0);

// Draw arrow start point
document.getElementById("arrowStart").setAttribute("cx",x1);
document.getElementById("arrowStart").setAttribute("cy",y1);
document.getElementById("arrowStart").setAttribute("r",15);
document.getElementById("arrowStart").setAttribute("fill","none");
document.getElementById("arrowStart").setAttribute("stroke","#F00");
document.getElementById("arrowStart").setAttribute("stroke-width",2);

// draw numbers
document.getElementById("out2").setAttribute("x",x1);
document.getElementById("out2").setAttribute("y",y1);
document.getElementById("out2").setAttribute("fill","#FFBBBB");
document.getElementById("out2").setAttribute("font-size",arrLength);


}

function arrowStep(){
// Move arrow once
grad += 1;
secCounter += 1;
rad = grad * (Math.PI / 180);
x2 = x1 + Math.cos(rad)*arrLength;
y2 = y1 + Math.sin(rad)*arrLength;
document.getElementById("arrow").setAttribute("x2",x2);
document.getElementById("arrow").setAttribute("y2",y2);
console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2 + ", angle (degrees) = " + grad);
console.log(secCounter);
// Draw arrow top point

document.getElementById("arrowEnd").setAttribute("cx",x2);
document.getElementById("arrowEnd").setAttribute("cy",y2);
document.getElementById("arrowEnd").setAttribute("r",4);
document.getElementById("arrowEnd").setAttribute("fill","#FF0000");
document.getElementById("arrowEnd").setAttribute("stroke-width",0);
document.getElementById("out2").innerHTML = secCounter;
}
</script>
</head>
<body onload="drawTimer()">
<svg id="myTimer">
<text id = "out2" x="" y="" fill="" font-size="" alignment-baseline="middle" text-anchor="middle">0</text>
<line id="arrow" x1="" y1="" x2="" y2="" stroke-width="" stroke=""/>
<circle id="arrowStart" cx="" cy="" r="" fill="" stroke-width="" />
<circle id="arrowEnd" cx="" cy="" r="" fill="" stroke-width="" />
</svg>

<button onclick = "arrowStep();">Go one step</button>
<button onclick = "int1 = setInterval(arrowStep,1000);">Start timer</button>
<button onclick = "clearInterval(int1);">Stop timer</button>
<button onclick = "drawTimer();">Reset counter</button>

</body>
</html>

 

 

Результат