Садржај
- 01. Почните са ХТМЛ-ом
- 02. Додајте неки стил
- 03. Поставите позадине и боје
- 04. Исеците текст
- 05. Додајте прелазе
- Упаковати
Развојни програмери теже да размишљају у правоугаонике; правоугаоници унутар правоугаоника унутар правоугаоника унутар правоугаоника. Можда користимо трикове са обрубима да бисмо направили кругове или троуглове, али у ствари су то ипак само маскирани правоугаоне кутије. Па, ово ће се променити са ЦСС Схапес, препоруком кандидата за В3Ц која ће променити ваш начин размишљања.
- Божићна понуда:Уштедите до 47% на претплати на нет магазине
ЦСС облици вам омогућавају да креирате геометријске облике користећи функције облика: круг (), елипса (), уложак () и полигон () и примените их на елементе или ефекте као што су исецање и филтери. Штавише, облици могу утицати на проток садржаја, омогућавајући вам уредно умотавање текста око обележја попут кружних аватара.
Можда је најмоћнија функција облика полигон () јер вам омогућава да креирате сложене произвољне облике користећи неограничене тачке дефинисане помоћу координатних парова. Ако сте користили СВГ, ово ће вам бити познато.
У овом упутству ћемо користити полигоне са својством цлип-патх да бисмо исекли геометријски облик из нашег текста тако да буде видљиво само подручје затворено унутар полигона. Такође ћемо додати неколико једноставних прелаза како бисмо ефекат оживели. Можете да преузмете код за сваки корак у овом репо-у Гитхуб, овде.
01. Почните са ХТМЛ-ом
Прво, припремимо наш ХТМЛ. Само нам треба див>, наш .цлип класе и нашег текста, али како ћемо за овај ефекат користити псеудо-елементе, додаћемо и атрибут исте вредности као и текст како бисмо га могли читати у ЦСС, уместо да га тешко кодирамо.
див цласс = ”цлип” дата-цонтент = ”Демо цлиппинг”> Демо цлип / див>
Даље, желимо да испуни екран и поравна текст мртве тачке - за то можемо да користимо мало Флекбок магије. Хајде да такође обликујемо и прилагодимо текст.
.цлип {// позиција на екрану за попуњавање: абсолуте; топ: 0; лево: 0; ширина: 100%; висина: 100%; // приказ поравнања: флек; // користимо флекс за поравнање јустифи-цонтент: центер; // хоризонтално поравнање алигн-итемс: центер; // вертикално поравнање // породица стилова текста: „Ворк Санс“, Ариал, Хелветица, санс-сериф; // Ворк Санс доступан је из Гоогле Фонтс фонт-веигхт: 800; величина фонта: 8рем; поравнање текста: центар; трансформација текста: велика слова; }
02. Додајте неки стил
Сада можемо обликовати ::пре него што и ::после псеудо-елементи, при чему сваки од њих постаје слој на врху текста. Подразумевано, ::после имаће највећи з-индекс. Практично аттр () селектор ће прочитати вредност нашег подаци-садржај атрибут.
Псеудо-елементи ће делити позицију и својства Флекбок-а, тако да можемо мало рефакторизовати наш ЦСС и искористити снагу СЦСС-а да би наш стил стилова био уредан. Стил фонта ће бити наслеђен. Користимо ... да означимо својства која смо већ покрили.
.цлип {... // позиционирати селф (&) и псеудо-елементе (пре / после) &, & :: бефоре, & :: афтер {поситион: абсолуте; топ: 0; лево: 0; ширина: 100%; висина: 100%; дисплеј: флек; // користимо флекс за поравнање јустифи-цонтент: центер; // хоризонтално поравнање алигн-итемс: центер; // вертикално поравнање} & :: бефоре, & :: афтер {цонтент: аттр (дата-цонтент); // користимо вредност атрибута као садржај}}
Резултат у прегледачу треба да изгледа идентично, јер псеудо-елементи седе директно на врху текста. Можете да измените њихове стилове у ДевТоолс да бисте видели како су слојевити.
03. Поставите позадине и боје
Време је да сваки слој добије другачију боју и позадину - идемо на неке смеле, модерне, неонске боје које смо унапред дефинисали као променљиве. Такође можемо приморати текст да се премота у више редова користећи ЦСС трик за додавање, уместо да их додајемо у ХТМЛ.
Ово је корисно јер бисмо у супротном морали да користимо две различите врсте прелома линија: бр> унутар див> и то опскурнији А у атрибуту.
.цлип {... &, & :: бефоре, & :: афтер {паддинг: 0 50%; величина кутије: бочна кутија; } & :: бефоре {цолор: $ вхите; позадина: $ пинк; } & :: афтер {цолор: $ пинк; позадина: $ плава; }}
Трик за попуњавање делује тако што даје тексту нулту хоризонталну ширину, приморавајући прегледач да сваку реч премота у нови ред.
04. Исеците текст
Време је за занимљиво - спремни смо да започнемо исецање текста. Направићемо дијагонални исечак, пресецајући екран на два троугла од доњег левог до горњег десног дела.
Тхе ::пре него што псеудо-елемент ће бити видљив само у горњем левом троуглу и ::после псеудо-елемент ће бити видљив само у доњем десном углу троугла. Ево кода за постизање тога:
.цлип {... & :: бефоре {цлип-патх: полигон (0 0, 100% 0, 0 100%, 0 100%); } & :: афтер {цлип-патх: полигон (100% 0, 100% 100%, 0 100%, 100% 0); }}
Ово ствара полигоне са четири тачке. Свака тачка је описана координатним паром; једноставно вредност Кс (лево надесно) и И (горе доле). Вредност може бити апсолутна (на пример: пк) или релативна (на пример:%). Тачке су наведене у горњем левом углу, тако да су тачке у 100% 100% су у доњем десном углу.
Замислите линије које повезују сваку од тачака редоследом којим су наведене да би формирали облике. У ::пре него што полигон започиње у горњем левом углу (0 0), помера се преко екрана у горњем десном углу (100% 0), а затим доле лево доле (0 100%).
Надам се да ћете сада видети свој исечени текст. Промените величину прегледача и видећете да одсецање реагује у складу с тим.
Ако користите Цхроме, вероватно ћете видети неке проблеме са поновљеним бојањем током промене величине, узроковане Цхроме-овим композитним слојевима. Нажалост, зато што је демонстрација преко целог екрана, препоручује се воља-промена: трансформисати имовине и трансформиши: транслатеЗ (0) хацк, не исправи ово. Међутим, ако се пребаците .цлип до позиција: фиксна; функционише.
цлип {&, & :: бефоре, & :: афтер {поситион: фикед; }}
Имајте на уму да Цхроме покушава да буде од помоћи и ово решење ће утицати на перформансе. Обавезно профилите перформансе када радите овакве ствари у продукцији.
05. Додајте прелазе
Сад кад смо добили исечени текст, оживимо га неким прелазима. Добра вест је да можете једноставно пребацити цлип-патх својство тако да прегледач обавља све напоре. Омогућимо прелазе на псеудо-елементима, а затим дефинишемо четири различита стања за прелаз између.
Стање 1: Ово је почетно стање, па креирајмо још три
Додајте сваки блок на дну ЦСС-а док крећете како бисте могли да видите како то изгледа.
Стање 2: Лагано раздвојите троуглове да бисте открили позадину
Ово ће помало личити на заставу Републике Конго. Уклањање 20 процената са врха сваког троугла многоугла учиниће трик.
Стање 3: Преобликујте троуглове у правоугаонике
Ово је слично француској тробојници, обрнуто.
Шта је са оним четвртим координатним паром? Па, ово је корисно. Испоставља се да прелазак цлип-патх функционише само ако је употребљена функција облика иста (дакле полигон> полигон) и број употребљених тачака је исти - прегледач ће пребацити сваку појединачну тачку. Због тога имамо ту четврту скривену тачку - она нам омогућава неприметни прелазак из троугла у правоугаоник, ту четврту тачку само откривамо када нам затреба.
.цлип {& :: бефоре {цлип-патх: полигон (0 0, 40% 0, 40% 100%, 0 100%); } & :: афтер {цлип-патх: полигон (100% 0, 100% 100%, 60% 100%, 60% 0); }}
Стање 4: Уврните те полигоне
Држећи се наше теме заставе, ово би личило на „Потребан ми је тегљач“ у свету сигнализације поморске заставе.
Овде увијамо полигоне тако да се укрштају у центру и чине по два троугла. Тада вам прелази могу помоћи да разумете координатне парове. Заиста успоравајући прелаз, можете видети како се свака тачка помера преко екрана у свој нови положај и почињете да разумете како редослед парова утиче на прелаз. То вам заправо даје прилично велику контролу над транзицијом.
.цлип {& :: бефоре {цлип-патх: полигон (100% 0, 0 0, 100% 100%, 0 100%); } & :: афтер {цлип-патх: полигон (100% 0, 100% 100%, 0 0, 0 100%); }}
Упаковати
Сви смо спремни, али још увек нисмо у могућности да променимо стања, што значи да не можете да видите прелазе на делу. Постоји много начина да се то постигне, па је на вама. У репо-у и ЦодеПен-у сам користио 100-одстотно решење без ЈаваСцрипт-а са скривеним радио дугмадима и ~ генералним бирачем браће и сестара - погледајте. ЦодеПен овог водича такође можете погледати овде.
Овај чланак се првобитно појавио у броју 298 однето, часопис за професионалне веб дизајнере и програмере - нуди најновије нове веб трендове, технологије и технике.Купите издање 298 овдеилипретплатите се на нет овде.
Посебна божићна понуда:Уштедите до 47% на претплати на мрежуза вас или пријатеља за Божић. Понуда је ограничена, зато брзо пређите ...
