Облик споља - ЦСС-трикови

Anonim

У shape-outsideконтролише имовину како ће садржај замотати око граничним-бок а лебдела елемента. То је обично тако да се текст може преобликовати преко облика попут круга, елипсе или полигона:

.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )

Важно је напоменути да ће ово својство за сада радити само на плутајућим елементима, мада ће се ово вероватно променити у будућности. shape-outsideИмовина може се руковати са прелазима или анимацијама.

Вредности

  • circle(): за израду кружних облика.
  • ellipse(): за израду елиптичних облика.
  • inset(): за израду правоугаоних облика.
  • polygon(): за стварање било ког облика са 3 или више темена.
  • url(): идентификује коју слику треба користити за умотавање текста.
  • initial: површина пловка је непромењена.
  • inherit: наслеђује shape-outsideвредност од родитеља.

Следеће вредности идентификују коју референцу модела кутије треба користити за позиционирање облика унутар:

  • margin-box
  • padding-box
  • border-box

Ове вредности треба додати до краја, на пример: shape-outside: circle(50% at 0 0) padding-box. Подразумевано margin-boxће се користити референца.

елипса ()

.element ( shape-outside: ellipse(150px 300px at 50% 50%); )

ellipse()Функција захтева од радијуса вредности за к, и оса елипсе затим координатама да позиционирају центар облика унутар своје селекцију. На пример, горњи пример ће поставити центар елипсе у вертикално и хоризонтално средиште .elementдив-а:

Иако претходна демонстрација може сугерисати да мењамо облик самог divсебе, ако додамо обрубе и позадинску слику, открићемо да је оквир за ограничавање у ствари још увек правоугаони:

Можда би било боље да о томе размишљамо на овај начин: shape-outsideсвојством мењамо однос осталих елемената око елемента, а не геометрију самог елемента. Да бисмо поправили то што ћемо морати да користимо shape-outsideпоред clip-path()својства, као у овом примеру:

круг ()

.element ( shape-outside: circle(50%); )

Ова функција креира круг, ау горњем примеру кода креираће круг полупречника пола половине висине и ширине .element. circle()Функција може користити исту синтаксу за позиционирање облика у.

урл ()

.element ( shape-outside: url('circle.png.webp'); )

У овом случају имамо две лебдеће слике, једну са обе стране блока текста. Будући да обе слике имају постављено shape-outsideсвојство, онда ће текст испод избегавати та два плутања.

Такође је могуће подесити shape-image-thresholdсвојство које ће обавештавати прегледач који пиксели, у зависности од њихове транспарентности, треба да креирају облик. На пример:

.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )

У овом примеру једини пиксели који ће створити облик морају имати 50% прозирности и више. Вредности од 0.0(транспарентно) до 1.0(непрозирно) су важеће.

полигон ()

.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )

Ова функција ствара било који облик који има три или више темена, на пример:

Важно је напоменути да ако ће ово својство бити анимирано, потребан му је исти број темена када изјавите анимирано стање:

.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )

инсет ()

.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )

inset()је функција за прављење правоугаоних облика, потребно је пет параметара, али пети, јер border-radiusније обавезан. Остали аргументи се померају према ивици .element:

Изнад имамо елемент који је широк 200 пиксела и висок 200 пиксела и поравнавамо облик унутар 50 пиксела у свим правцима, осим на левој страни. На овај начин ће се текст премотати изнад облика, иако се див протеже до врха.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
37 62 Не 79 7,1 *

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 81 8 *