Полигон коробок

Основы

Обычная

<box>

Матрёшка

<box>
<box>

Состыковка

<box>
<box>

Титул и подпись

титул

<box|титул></box|подпись>

подпись

Ширина

Любые CSS-единицы

<box 30%>


<box>
<box 30%>


<box 30%>
<box>


<box 30%>
<box 30%>

Без границы

<box 30% unborder>


<box 30% >
<box unborder>


<box 30% unborder>
<box>


<box 30% unborder>
<box unborder>

Округления

<box 30% round>


<box 30% >
<box round>


<box 30% round>
<box>


<box 30% round>
<box round>

Склонения

Центр

<box 30% center>

Влево

<box 30% left>

Не блочная, для сноса под неё требуется тег <brr>

Вправо

<box 30% right>

То же; а этот текст оформляется СЛЕДОМ за ней, а не перед

Приоритетность

Вправо » влево

<box 30% right left>

Флекс

<box flex>

Ширина флекса определяется его контентом, но он абсолютно неблочный

<box 30% >
<box flex>
<box flex>

Перенос двумя слешами или тегом brr перед флексами работает нормально, но между ними – создаёт пустую строку, поэтому для состыковки флексов используется спец.тег line break

<box 30% >\\
<box flex>\\


<box flex>[lb]

<box flex>

Ещё иллюстрация автоширины

<box flex>
<box> Длинно
<box> Длинно-длинно

Опять неблочность

<box flex>
<box flex>

Здесь годится обычный перенос

<box flex>\\
<box flex>

Выпирающие вложения переносятся на следующий ряд

<box 30% flex>\\ <box flex><box flex>…
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст

Более красиво с классом jc-space

<box 30% flex jc-space><box flex><box flex>…
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст

Ещё есть более центрированный класс jc-center с отступом снизу

<box 30% flex jc-center><box flex><box flex>…
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст
Очень длинный текст

При использовании обоих классов группировка центруемых элементов отбивается от всего остального тегом line break

Цвета

<box 30% #bfb></box>

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

Общий цвет

титул

<box 30% #f88|титул></box|подпись>

подпись

Титул & подпись и содержимое берут цвет фона

титул

<box 30% #f88 #fdd|титул></box|подпись>

подпись

Титул & подпись мимикрируют под содержимое

титул

<box 30% #f88 #fdd #fff|титул></box|подпись>

подпись

Индивидуальные параметры

титул

<box 30% #f88 #fdd #fff #eee|титул></box|подпись>

подпись

Предустановленные

<box blue>
<box red>
<box green>
<box orange>


Взрыв на радужной фабрике

Приоритетность

Оранжевый » зелёный » красный » синий

<box 30% blue red>

Комплексный пример

титул

<box 30% unborder round center #f99 #9c9 #fcc #f60|титул></box|подпись>

подпись

Этот сайт использует куки. Находясь здесь, вы соглашаетесь с их хранением на вашем компьютере. Также вы подтверждаете, что прочитали и поняли нашу Политику конфиденциальности. Если вы не согласны - покиньте сайт.Больше информации о куки