ЦСС3 Бордер-Имаге Проперти Макинг Пхотос Реалли Цоол!
Креирање граница није ништа ново у ХТМЛ & ЦСС; могли смо додати границе од почетка. Можда сте познавали чврсте границе, точкасте границе, испрекидане границе и тако даље.
Међутим, са новом ЦСС3 својством бордер-имаге, креирање граница на ХТМЛ елементу постаје све напредније; Па, једноставно речено, сада можемо додати границу користећи слику као извор који ће нам омогућити да додамо привлачније границе. У реду, да видимо како ради ова имовина.
Синтакса и подршка за прегледач
Слика границе у ЦСС3 је дефинисана помоћу следеће скраћенице синтаксе:
бордер-имаге: [имаге соурце] [слице] [видтх] [оутсет] [поновите];
Горња синтакса је званична верзија из В3Ц која је подржана само у Цхроме-у, док Опера, Фирефок и Сафари још увек захтевају префиксну верзију (-о-, -моз-, -вебкит-), а Интернет Екплорер не изненађује што уопште не подржава ову особину.
Осим тога, [видтх] анд тхе [почетак] вредност у овоме бордер-имаге својства још нису подржана у било којем прегледнику, међутим, вриједност ширине се може замијенити помоћу бордер-видтх својство.
Дакле, укратко, за сада можемо применити само вредност [извор слике], [слице] и [понављање] .
бордер-имаге: [имаге соурце] [слице] [поновите];
Имаге Слице
Пре него што наставимо да демонстрирамо ову имовину, хајде да причамо о томе “имаге слице” прво као нешто ново у проглашењу имовине. Кликом слике овде ће се дефинисати исечак слике, који ће заузети почетну тачку од врха, десно, доле и лево од ивица слике која ће затим поделити слику на девет делова, као што је илустровано следећом сликом..
На слици изнад, видећете да су секције 1, 3, 7 и 9 ће постати углови границе, и секције 2, 4, 6 и 8 постаће ивица или граница границе, водећи рачуна да део где ће постати ивица буде поновљив или растезљив.
Вредност пресека се може декларисати са а пикел јединица или проценат (%) јединица за флексибилно мерење.
још референци:
- ЦСС Позадине и границе Ниво 3
Креирање оквира за фотографије
Сада, хајде да демонстрирамо имовину у правом примеру.
Овај пут, ми ћемо имплементирати бордер-имаге Имајте на уму да направите фотооквир и ми ћемо користити слику испод као извор. Ми смо пажљиво измјерили слику тако да се може правилно нарезати, поновити и истегнути без обзира на ширину и висину садржаја.
Белешка: слику можете преузети са овог линка.
Такодје, у овој демонстрацији користићемо овај запањујући Цинемаграпх од Фром Ме то Иоу као фотографију.
(Извор слике: Фром Ме То Иоу)
Ознака
Ознака је једноставна као ова:
Не заборавите да замените имагес_2 / цсс3-бордер-имаге-проперти-макинг-пхотос-труе-цоол_3.јпг са својом фотографијом.
Стилови
А онда, дајмо му оквир користећи бордер-имаге.
Ако погледате слику изнад, наша ширина слике је 180пк укупно. Ова вредност се затим може поделити на 6 које је свака подела 30пк; и тако ћемо исећи слику 30пк.
Ако користите вредност дужине за пресек, требало би да га искључите пк јединица, јер ће се аутоматски превести на пикел, али ако одлучите да користите проценат и даље ћете морати да додате (%).
Што се тиче понављања слика, користићемо подразумевану вредност; понављање. Алтернативно, можете користити стретцх и не брините, гранична слика ће и даље изгледати грациозно.
имг бордер-имаге: урл ("имагес / фраме.пнг"). -о-бордер-имаге: урл ("имагес / фраме.пнг") 30 поновите; -моз-бордер-имаге: урл ("имагес / фраме.пнг") 30 поновите; -вебкит-бордер-имаге: урл ("имагес / фраме.пнг"). бордер-видтх: 30пк; Поред тога, желимо да поставимо слику у центар прозора прегледача, као и да додамо позадинску текстуру документу да би је учинили привлачнијим.
хтмл позадина: урл ('имагес / лигхтпаперфиберс.пнг'); .враппер маргин: 20пк ауто; хеигхт: 476пк; видтх: 675пк; тект-алигн: центар; У реду, мислим да смо завршили овде, сада ћемо га погледати у претраживачу.
- Демо
- Довнлоад Соурце
Да ли се осећате као да гледате магичну слику у Хогвартсу?
Завршна мисао
Ово бордер-имаге несумњиво је леп додатак у ЦСС3 породици; више нећемо бити ограничени на једноставне границе.
И у овом посту смо вам показали како можемо направити оквир за слике без бриге о садржају или у овом случају димензијама фотографије (ширина и висина). Висина и ширина могу бити флексибилни, све док је гранични извор поновљив или растезљив.
И на крају, ако сте још мало збуњени бордер-имаге, ту је алатка коју можете користити да би вам помогли да лакше креирате: гранични алат за слике
