Разумевање Псеудо-елемента пре и после
Цасцадинг Стиле Схеет (ЦСС) је првенствено намијењен за примјену стилова у ХТМЛ маркупу, али у неким случајевима када је додавање додатних ознака документу сувишно или није могуће, у ЦСС-у заправо постоји значајка која нам омогућава да додамо додатне ознаке без прекида стварни документ, односно псеудо-елементи.
Чули сте за овај термин, нарочито када сте пратили неке од наших туторијала.
Заправо постоји неколико ЦСС чланова породице који су класификовани као псеудо-елементи као што је :Прва линија, :прво слово, :: селецтион, :пре него што и :после. Али, за овај чланак, ограничићемо нашу покривеност само на :пре него што и :после, “псеудо-елементи” овде ће се посебно односити на оба. Размотрићемо ову тему из основа.
Синтакса и подршка за прегледач
Тхе псеудо-елементи од тада су ту ЦСС1, али :пре него што и :после о којима овде дискутујемо, пуштени су ЦСС2.1. На почетку псеудо-елементи Користите сингле-цолон за синтаксу, а затим као веб еволуирао, у ЦСС3 псеудо-елементи су ревидирани да би се користило двоструко колонирање ::пре него што & ::после - да би је разликовали псеудо-класе (тј. :лебдети, : ацтиве, и тако даље).
Међутим, без обзира да ли користите формат са једним колоном или двоструким колоном, претраживачи ће и даље препознати. Будући да Интернет Екплорер 8 подржава само формат са једним колоном, сигурније је користити једну тачку ако желите већу компатибилност претраживача.
Шта ради?
Укратко, псеудо-елементи ће убацити додатни елемент пре него што или после елемент садржаја, па када их обоје додамо, они су технички једнаки, са сљедећом ознаком.
:пре него што Ово је главни садржај. :после
Али ти елементи заправо нису генерисани на документу. Они су и даље видљиви на површини, али их нећете наћи на извору документа, тако да практично говоре лажан елементи.
Коришћење псеудо-елемената
Користећи псеудо-елементи релативно је лако; следећу синтаксу селектор: пре ће додати елемент пре него што селектор садржаја док је ова синтакса селектор: после ће додати након њега, а за додавање садржаја у њих можемо користити садржаја својство.
На пример, исечак испод ће додати ознаку наводника пре и после блоцккуоте.
блоцккуоте: бефоре цонтент: опен-куоте; блоцккуоте: афтер цонтент: цлосе-куоте;
Стилинг псеудо-елементс
Упркос томе што је лажни елемент псеудо-елементи заправо се понашају као “прави” елемент; можемо да им додамо било коју декларацију стилова, као што је промена боје, додавање позадине, подешавање величине фонта, поравнавање текста унутар њега и тако даље.
блоцккуоте: бефоре цонтент: опен-куоте; фонт-сизе: 24пт; тект-алигн: центар; лине-хеигхт: 42пк; цолор: #ффф; бацкгроунд: #ддд; флоат: лефт; позиција: релативна; топ: 30пк; блоцккуоте: афтер цонтент: цлосе-куоте; фонт-сизе: 24пт; тект-алигн: центар; лине-хеигхт: 42пк; цолор: #ффф; бацкгроунд: #ддд; флоат: ригхт; позиција: релативна; боттом: 40пк;
Одређивање димензије
Генерисани елементи су подразумевано елемент инлине-левел, тако да када ћемо одредити висину и ширину, прво морамо да је дефинишемо као блок елемент користећи дисплеј блок декларације.
блоцккуоте: бефоре цонтент: опен-куоте; фонт-сизе: 24пт; тект-алигн: центар; лине-хеигхт: 42пк; цолор: #ффф; бацкгроунд: #ддд; флоат: лефт; позиција: релативна; топ: 30пк; радијус: 25пк; / ** дефинира га као блок елемент ** / дисплаи: блоцк; хеигхт: 25пк; видтх: 25пк; блоцккуоте: афтер цонтент: цлосе-куоте; фонт-сизе: 24пт; тект-алигн: центар; лине-хеигхт: 42пк; цолор: #ффф; бацкгроунд: #ддд; флоат: ригхт; позиција: релативна; боттом: 40пк; радијус: 25пк; / ** дефинира га као блок елемент ** / дисплаи: блоцк; хеигхт: 25пк; видтх: 25пк;
Приложите позадинску слику
Такође можемо да заменимо садржај сликом, а не само обичним текстом. иако садржаја имовина пружа урл () да бисте убацили слику, али у већини случајева много више волим користити позадини имовине за већу контролу над приложеном сликом.
блоцккуоте: пред цонтент: ""; фонт-сизе: 24пт; тект-алигн: центар; лине-хеигхт: 42пк; цолор: #ффф; флоат: лефт; позиција: релативна; топ: 30пк; радијус: 25пк; бацкгроунд: урл (имагес / куотатионмарк.пнг) -3пк -3пк #ддд; дисплеј блок; хеигхт: 25пк; видтх: 25пк; блоцккуоте: афтер цонтент: ""; фонт-сизе: 24пт; тект-алигн: центар; лине-хеигхт: 42пк; цолор: #ффф; флоат: ригхт; позиција: релативна; боттом: 40пк; радијус: 25пк; бацкгроунд: урл (имагес / куотатионмарк.пнг) -1пк -32пк #ддд; дисплеј блок; хеигхт: 25пк; видтх: 25пк;
Међутим, као што можете видети на исјечку изнад, још увек декларишемо садржаја и овај пут са празним низом. Тхе садржаја имовина је услов и треба увек да се примењује; иначе псеудо-елемент неће радити свеједно.
Комбинација са псеудо-класама
Иако су другачији псеудо, можемо користити псеудо-класе упоредо са псеудо-елементи заједно у једном ЦСС правилу, на пример, ако желимо да окренемо Позадина цитатне ознаке Мало је тамније када лебдимо изнад блоцккуоте.
блоцккуоте: ховер: афтер, блоцккуоте: ховер: бефоре бацкгроунд-цолор: # 555;
Аддинг Транситион Еффецт
Можемо чак и применити прелаз Имајте на уму да направите ефект прелаза у боји.
транзиција: све 350мс; -о-транзиција: све 350мс; -моз-транситион: алл 350мс; -вебкит-транситион: алл 350мс;
Нажалост, ефекат транзиције изгледа да ради само у најновијој верзији Фирефока. Надам се да ће више претраживача надокнадити да би се омогућила примена у својству транзиције псеудо-елементи убудуће.
- Демо
- Довнлоад Соурце
Море Инспиратион
Да бисмо вас инспирисали, одабрали смо три одлична примера који вам могу дати идеје за ваш веб дизајн.
Фасцинатинг Схадовс
У овом туториалу Паул Ундервоод је објаснио како да створи реалнији и фасцинантнији ефекат сенке користећи :пре него што и :после псеудо-елементи. Обје су позициониране апсолутно и постављене на самом крају негативан з-индек вредност.
Стацкед Имаге Еффецт
Помоћу псеудо-елементи за креирање неуредног ефекта наслаганих слика само са једном сликом на ознаци је такође могуће. Тхе псеудо-елементи Користи се за стварање илузије наслаганих слика на задњој страни стварне слике користећи негатив з-индек.
Закључак
Псеудо-елементс је једноставно “хладан” и коначно употребљиви, у основи имамо два бонус елемента за сваки елемент који додамо без уплитања са стварном ХТМЛ структуром, а затим претварајући их у скоро све што можемо замислити.
У ствари постоје побољшања псеудо-елементи на којима се тренутно ради, као што је гнезда псеудо-елемената див :: бефоре :: бефоре цонтент: "; и више псеудо-елемената див :: бефоре (3) цонтент: "; што ће очигледно отворити много више могућности у пракси веб дизајна у будућности. Док се они спроводе у тренутним претраживачима, чекамо стрпљиво.
