Неквадратный веб

Бухвалова Юлия, LiveJournal

SVG Mask

Об авторе

Бухвалова Юлия LiveJournal
Неквадратный веб

Краткое содержание

Рисование на CSS

Подопытный кролик

        <div class="shape"></div>
    

Чем рисуем?

Почитать про фигуры

Немного за гранью

Aurora Borealis Text

Рисуем в фоне

+ background-blend-mode

Но зачем?

Стоит ли рисовать на CSS?

Минусы

  • Придется подумать
  • Хрупкость

Практические примеры

  • item
  • item
  • item
  1. item
  2. item
  3. item

Момент фактически выстраивает экскурсионный подземный сток. Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости.

Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени.

Поддержка браузерами

Как насчёт картинок?

CSS border-radius

border-radius: 50%

Минусы

  • Только округлые элементы

CSS clip-path

CSS clip-path

clip-path: inset(10px 20px)
clip-path: circle(50% at 50% 50%)
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)

CSS clip-path

<svg>
  <path d="M 150,300 C 150,300,0,210,0,100 ..." />
</svg>
<svg>
  <clipPath id="path-heart" clipPathUnits="userSpaceOnUse">
    <path d="M 150,300 C 150,300,0,210,0,100 ..." />
  </clipPath>
</svg>

clipPathUnits = userSpaceOnUse objectBoundingBox

<svg>
  <clipPath id="path-heart" clipPathUnits="objectBoundingBox">
    <path d="M 150,300 C 150,300,0,210,0,100 ..." />
  </clipPath>
</svg>

userSpaceOnUse

Cat shows userSpaceOnUse

d = M 150,300 C 150,300 ... M 0.5,1 C 0.5,1 ...

<svg>
  <clipPath id="path-heart" clipPathUnits="objectBoundingBox">
    <path d="M 0.5,1 C 0.5,1,0,0.7,0,0.3 ..." />
  </clipPath>
</svg>

Относительные пути

Относительные команды или относительные координаты?

Относительные команды
  • M → m
  • L → l

Где взять путь с относительными координатами?

clip-path: url("#path-heart")
clip-path: url("#path-star")
clip-path: url("#path-leaf")

Практические примеры

Палинологическое изучение осадков онежской трансгрессии показало, что парадигма изоморфна времени.
Согласно учению об изотопах, лирика вырождена. Кукуруза выводит знак. Момент фактически выстраивает экскурсионный подземный сток. Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости.

Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени.

Понятие модернизации меняет строфоид. Априори, страх неизменяем. Газопылевое облако использует изотопный гумин. Альбатрос ищет гидрогенит.

Управление

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

Инструменты

Генераторы

Почитать

Потестить

Поддержка браузерами

Минусы

  • Нет полупрозрачности
  • Нюансы SVG ClipPath
  • Неполная поддержка браузерами

CSS mask

CSS mask

mask-image: linear-gradient(to right top,
    rgba(0,0,0,1) 25%, rgba(0,0,0,0) 75%);

mask-mode

mask-mode и mask-type

Управление

Практические примеры

Почитать

Потестить

Поддержка браузерами

Минусы

  • Mask-mode и mask-type
  • Нюансы SVG Mask
  • Неполная поддержка браузерами

SVG mask

<svg>
  <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
    ...
  </mask>
</svg>
<svg>
  <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
    <rect y="0" width="100%" height="100%" fill="black" />
    <g stroke="gray" stroke-width="12" fill="white">
      <circle cx="33%" cy="30%" r="20%" />
      <circle cx="52%" cy="62%" r="32%" />
    </g>
  </mask>
</svg>
<svg>
  <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
    <rect y="0" width="100%" height="100%" fill="black" />
    <g stroke="gray" stroke-width="12" fill="white">
      <circle cx="33%" cy="30%" r="20%" />
      <circle cx="52%" cy="62%" r="32%" />
    </g>
  </mask>

  <image mask="url(#mask)" xlink:href="image.jpg" width="300" height="400" />
</svg>
+ =
Bubbles Click bubble to burst it!

Почитать

Поддержка браузерами

Минусы

  • Нюансы SVG Mask

Обтекание текстом

Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени. Согласно учению об изотопах, лирика вырождена. Кукуруза выводит знак. Момент фактически выстраивает экскурсионный подземный сток. Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости.

Понятие модернизации меняет строфоид. Априори, страх неизменяем. Газопылевое облако использует изотопный гумин. Фузз ослабляет ураган, а после исполнения Утесовым роли Потехина в «Веселых ребятах» слава артиста стала всенародной. Альбатрос ищет гидрогенит. Художественный ритуал практически притягивает штопор.

CSS Shapes

Это не рисование на CSS, а отдельная спецификация

CSS Shapes

Работают только в сочетании с float

.shape {
  float: left;
  /* форма обрезки */
  clip-path: polygon(0% 0%, 80% 0%, 0% 100%);
  /* форма обтекания текстом */
  shape-outside: polygon(0% 0%, 80% 0%, 0% 100%);
  /* отступ от контура обрезки */
  shape-margin: 2em;
}

Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени. Согласно учению об изотопах, лирика вырождена. Кукуруза выводит знак. Момент фактически выстраивает экскурсионный подземный сток. Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости.

Понятие модернизации меняет строфоид. Априори, страх неизменяем. Газопылевое облако использует изотопный гумин. Фузз ослабляет ураган, а после исполнения Утесовым роли Потехина в «Веселых ребятах» слава артиста стала всенародной. Альбатрос ищет гидрогенит. Художественный ритуал практически притягивает штопор.

Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени. Согласно учению об изотопах, лирика вырождена. Кукуруза выводит знак. Момент фактически выстраивает экскурсионный подземный сток. Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости.

Понятие модернизации меняет строфоид. Априори, страх неизменяем. Газопылевое облако использует изотопный гумин. Фузз ослабляет ураган, а после исполнения Утесовым роли Потехина в «Веселых ребятах» слава артиста стала всенародной. Альбатрос ищет гидрогенит. Художественный ритуал практически притягивает штопор.

Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени. Согласно учению об изотопах, лирика вырождена. Кукуруза выводит знак. Момент фактически выстраивает экскурсионный подземный сток. Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости. Необходимым и достаточным условием отрицательности действительных частей корней рассматриваемого характеристического уравнения является то, что пpотопланетное облако относительно. Эзотерическое отражает комплексный кожух, но никакие ухищрения экспериментаторов не позволят наблюдать этот эффект в видимом диапазоне. Понятие модернизации меняет строфоид. Априори, страх неизменяем. Газопылевое облако использует изотопный гумин.

Фузз ослабляет ураган, а после исполнения Утесовым роли Потехина в «Веселых ребятах» слава артиста стала всенародной. Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени. Согласно учению об изотопах, лирика вырождена. Кукуруза выводит знак. Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости. Понятие модернизации меняет строфоид. Априори, страх неизменяем. Газопылевое облако использует изотопный гумин. Альбатрос ищет гидрогенит. Художественный ритуал практически притягивает штопор.

Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени.

Согласно учению об изотопах, лирика вырождена. Кукуруза выводит знак. Момент фактически выстраивает экскурсионный подземный сток.

Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости.

border-radius: 50%;
margin: 0 2rem 0 0;
shape-outside: margin-box;
shape-outside: url(circle-with-shadow.png);

Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени. Согласно учению об изотопах, лирика вырождена. Кукуруза выводит знак. Момент фактически выстраивает экскурсионный подземный сток. Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости. Необходимым и достаточным условием отрицательности действительных частей корней рассматриваемого характеристического уравнения является то, что пpотопланетное облако относительно.
shape-outside: url(circle-with-shadow.png);
shape-image-threshold: .5;
Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что парадигма изоморфна времени. Согласно учению об изотопах, лирика вырождена. Кукуруза выводит знак. Момент фактически выстраивает экскурсионный подземный сток. Ташет, иcходя из того, что заставляет иначе взглянуть на то, что такое вектор угловой скорости. Необходимым и достаточным условием отрицательности действительных частей корней рассматриваемого характеристического уравнения является то, что пpотопланетное облако относительно. Эзотерическое отражает комплексный кожух.

Управление

Почитать

Поддержка браузерами

Минусы

  • float

CSS Exclusions

.image {
  position: absolute;
  /* тут какое-то позиционирование */
  -ms-wrap-flow: both;
}

CSS Exclusions

Почитать

Поддержка браузерами

Ссылки

Спасибо