Przełamanie / Przerywane obramowanie, tło – box-decoration-break

Bardzo ciekawym selektorem CSS jest box-decoration-break, z którego pomocą możemy stworzyć przełamany obszar np. z użyciem tła bądź obramowania.

Właściwość ta może być użyna np. na akapicie lub innym obiekcie HTML.

Ustawienia selektora

box-decoration-break posiada dwa ustawienia:

• clone – każdy fragment przełamanego elementu będzie posiadał własne właściwości
• slice – wszystkie fragmenty przełamanego elementu będą posiadały wspólne właściwości (ustawienie domyślnie)

Przygotowałam dla was 2 przykłady zastosowania.

Z użyciem border (obramowania)

Jak już pisałam wcześniej selektor ten może wpływać na obramowanie obiektu. „Obramowanie” tego typu tworzy ramkę nie tyle co wokół całej grupy tekstu a konkretnej grupy wyrazów znajdujących się np. w jednej linii.

Przykładowo:

See the Pen Untitled by Aura (@Julka85) on CodePen.

W pierwszym przykładzie zastosowałam standardową ramkę w pozostałych własność box-decoration-break

W celu dokładniejszego przyżenia się różnicy między typami obramowania pokaże ich kod:

Pierwszy przykład

<div class="slice">box-decoration-break z wartością slice.<br> Wokół obiektu.</div>

.slice{-webkit-box-decoration-break: slice;
  -o-box-decoration-break: slice;
  box-decoration-break: slice;
    display: inline;
  line-height: 2em;
  padding: .3em 1.5em .3em .5em;    
      border: 1px solid #ccc;}

Drugi przykład:

<div class="clone">box-decoration-break z wartością slice.<br> Wokół obiektu.</div>

W CSS

.clone{-webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
    display: inline;
  line-height: 2em;
  padding: .3em 1.5em .3em .5em;    
      border: 1px solid #ccc;}

Przełamanie tła

W podobny sposób jak obramowanie zachowa się tło pod obiektem np.:

---

See the Pen box-decoration-break by Aura (@Julka85) on CodePen.

---

.clone2{-webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
    display: inline;
  line-height: 2em;
  padding: .3em 1.5em .3em .5em;    
      background: #CCC;}

Podsumowanie

Jak widać box-decoration-break to dość ciekawe rozwiązanie. Jeżeli macie czas i ochotę możecie również przetestować ją a następnie zastosować na stronie np. dla obrazkowego tła.