Како динамички променити боју док се крећете помоћу ЦСС-а

Са стационарним елементима веб локације као што су логотипи, често ћете наићи на мешање боја приликом померања странице. Ово се може догодити ако статички елемент прелази преко одељка веб-сајта који дели исту боју са елементом. Статички елемент ће бити невидљив док лежи на тој позадини.

Да бисте решили овај проблем, морате динамички да инвертујете боју логотипа када прелази преко елемента исте боје. Научите како да постигнете овај ефекат користећи само ЦСС, без потребе за ЈаваСцрипт!

Преузмите почетни код

Да бисте пратили овај водич, преузмите почетни код са његовог ГитХуб спремиште на вашу локалну машину.

Отвори индек.хтмл у претраживачу који би требало да изгледа као страница приказана овде:

ХТМЛ страница садржи лого и четири одељка. Сваки одељак има лажни наслов и три пасуса лажног текста. Текст логотипа је исте црне боје као позадина другог и четвртог одељка. Овај ефекат долази од н-то дете (парно) блокирати стилес.цсс, који примењује црну позадину на једнаке делове.

Прављење логотипа лепљивом

Са овим почетним кодом, логотип се не лепи за врх. То значи да лого нестаје када померате страницу надоле. Можете да претворите свој логотип у лепљиво заглавље применом положај: лепљив својство на њега унутар ЦСС датотеке. За дубље уроњење у позиционирање у ЦСС-у, прочитајте наш пост на ЦСС својство позиције.

Уверите се да се логотип држи на врху, али то радите само на већим екранима (јер на мањим величинама екрана може да иде преко других елемената). Следеће ХТМЛ упит за медије ствара овај ефекат:

@медиа(ширина > 980пк) {
.лого { 
положај: лепљив; 
топ: .5рем; 
 }
}

Сада ће се логотип стално држати на врху и пратити вас док се крећете. Али такође ћете приметити да текст нестаје када скролујете у делове тамне позадине (јер је и текст логотипа црн). Сада погледајте како да ово поправите.

Додавање режима мешања у ваше лепљиво заглавље

Да бисте осигурали да црни логотип не нестане на црној позадини, мораћете динамички да инвертујете боју. Начин на који бисте то урадили је коришћењем мик-бленд-моде ЦСС својство и додељивање вредности од разлика:

@медиа(ширина > 980пк) { 
.лого { 
положај: лепљив; 
топ: .5рем; 
мик-бленд-моде: разлика
 }
}

ЦСС својство мик-бленд-моде специфицира како садржај елемента треба да се стапа са садржајем надређеног елемента и његовом позадином. Различита вредност узима вредност разлике сваког пиксела, инвертујући светле боје. Дакле, ако су вредности боја исте, оне постају црне. Разлике у вредностима ће се обрнути.

Горњи ЦСС додатак ће учинити да лого потпуно нестане. То је зато што нисте подесили боју текста логотипа на белу ван медијског упита. Урадите то са следећим кодом:

.лого { 
боја: бео; 
/* Остала ЦСС својства */
}

Сада сте успешно све подесили. Померите страницу надоле и у црну позадину. Видећете да се лого мења из црне у белу.

Осим црне и беле, можете радити и са другим бојама. На пример, ако бисте променили боју текста вашег логотипа у плаву боју (#008080), добићете ружичасту боју на белој позадини. Следећа слика то илуструје.

У већини случајева бисте желели да ваш елемент буде бео да бисте добили најбоље резултате. Такође, ако скролујете до врха, можда ћете пронаћи свој логотип пресечен на пола. Ово се дешава зато што лого постоји изван елемент. Да бисте логотип приказали у потпуности, потребно је да подесите боју позадине елемент у бело.

Коришћење слике као логотипа уместо текста

Ова техника не ради само са текстом, већ и са сликама. Наравно, морате бити сигурни да користите белу слику као лого. Следећи пример користи бели лорем ипсум лого који се налази у истој фасцикли као и индек.хтмл фајл:

<имгсрц="лоремипсум-297.свг"алт=„Лорем Ипсум Лого“>

Слика која се овде користи је СВГ (Скалабилна векторска графика), врста векторска датотека.

Сада ће боја вашег логотипа бити црна на белој позадини као што је приказано на слици испод.

Али ако скролујете на црну позадину, боја логотипа ће аутоматски постати бела. Ово можете видети на слици испод.

Такође можете повећати величину логотипа заменом фонт-сизе са висина и ширина у ЦСС блоку који циља логотип. На крају крајева, сада имате посла са сликом, а не са текстом.

.лого {
боја: бео;
ширина: 10рем;
/* Остала ЦСС својства */
}

Ако смањите екран, медијски упит се више неће примењивати. Ово ће искључити различите режиме мешања, због чега ће ваш логотип нестати. Да бисте вратили лого на страницу, потребно је да подесите мик-бленд-моде својство на логотипу изван медијског упита:

.лого {
боја: бео;
ширина: 10рем;
мик-бленд-моде: разлика;
/* Остала ЦСС својства */
}

Ово ће активирати мешање мешавине на логотипу у сваком тренутку, чак и на већим екранима. Али на малим екранима, лого ће остати на врху и неће вас пратити док скролујете надоле (јер положај: лепљив ради само на великим екранима). Коначно, увек запамтите да користите бели лого како бисте спречили да нестане са странице.

Сазнајте више ЦСС савета и трикова

Коришћењем режима мешања, можете креирати фасцинантне распореде са наизменичним бојама. Још боље, не морате строго кодирати ниједну боју или постављати тачке прекида јер ће режим мешања динамички инвертовати боју. Омогућава вам да креирате лепе мешавине и боје за делове садржаја елемента у зависности од његове директне позадине.

ЦСС се често сматра једним од најузбудљивијих језика за учење. Ово је делимично зато што је ЦСС пун савета и трикова попут овог који сте управо научили у овом чланку. Неки други корисни ЦСС савети и трикови су ефекти лебдења, промена величине слика да би се уклопиле у контејнере, скраћивање текста елипсама и коришћење трансформације текста.