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.
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.