Новые свойства CSS Shapes

В спецификацию CSS shapes командой W3C были добавлены новые свойства. Новое расширение для CSS shapes способно создать исключения для содержания веб-страницы в произвольной форме.

Новые свойства CSS shapes

Особенностью CSS shapes является возможность обтекать содержание вокруг и внутри формы. В предыдущей статье « Подробно о CSS Shapes » продемонстрированы возможности функций: url() , inset() , circle() , ellipse() , polygon() и свойств shape-outside , shape-margin . Цель этой статьи определить как применяются формы исключения в области для содержания веб-страницы.

shape-inside

Свойство shape-inside предназначено определить форму для элемента в содержании веб-страницы.

Область для элемента определяется путем исключения содержания.

Синтаксис:



shape-inside: auto | outside-shape | [ <basic-shape> || shape-box ] | <image>


исключения формы за пределами области содержания не имеют никакого эффекта.

Значение:

auto
Форма определяется на основе содержимого блока элемента.
<basic-shape>
Форма определяется на основе значений одной из функций inset() , circle() , ellipse() или polygon() .

shape-padding

Свойство shape-padding предназначено для отступа внутри фигуры содержания свойства shape-inside .

свойство принимает только положительные значения!

CSS shapes и SVG

Форму для исключения в содержании веб-страницы можно определить с помощью SVG.

CSS



div {
	height: 400px;
	width: 400px;
}
.rect {
	shape-outside: url(#rect-shape);
}

.path {
	shape-outside: url(#path-shape);
}


HTML



<svg height="200" width="200">
    <rect id="rect-shape" width="200" height="200" fill="none"/>
	<path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" />
</svg>

<div class="rect"><p>текст</p></div>
<div class="path"></div>


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>