Направите ефекат слике само за ЦСС са транспарентним границама
А ЦСС-само ефект откривања слике може се ријешити на различите начине. Заправо је прилично лако кодирати дизајн у којем је слика се издваја (прелетео је) његову солидну позадину -само ставите слику преко мањег елемента са солидном позадином.
Исти резултат можете добити ако користите транспарентне границе, где држиш величина елемента позадине је иста као и предњи план и додајте транспарентне границе како би створите празан простор да би се први план пребацио у.
Постоје неке предности у коришћењу ове друге методе. Пошто су то транспарентне границе које пружају простор за преливање у први план, можемо контролише смер преливања између леве, десне, горње и доње границе. Такође, имају исту величину и за предњи и за позадину олакшава истовремено померање оба елемента преко странице.
Укратко, видећемо како направите ЦСС-ефекат само за откривање слике користећи мање чврсте позадине са предња слика која има транспарентне границе. Можете погледати финал демо испод.
1. Креирајте почетни код
ХТМЛ-висе, само један У ЦСС-у користимо две ЦСС променљиве, Такође додајемо Ми додајте празно Тхе Додајемо слику Тхе На сцреенсхот белов можете видети шта смо до сада имали ( Да бисте додали позадину иза слике, користићемо други псеудо-елемент, Креирамо другу ЦСС варијаблу, Тхе видтх израчунава се као Тхе хеигхт израчунава се као Са ЦСС филтер од Ево га сцреенсхот оф тхе демо до сада (са Ми Додајте Као и ми је већ додао Испод можете видети финал демо. Ако прикажете
--бгц и --замутити за боја позадине анд тхе димензије од .фоо контејнера. У примеру сам користио иста вредност за ширину и висину да би добили квадратну кутију, креирајте одвојене варијабле за висину и ширину ако желите правокутни.позиција: релативна руле то .фоо, тако да ћемо користити његове псеудо-елементе откривајући слику, може бити апсолутно позициониран (види доле), и тако наслагани једни на друге. .фоо --бгц: # ФФЦЦ03; --дим: 300пк; видтх: вар (- дим); хеигхт: вар (- дим); бацкгроунд-цолор: вар (- бгц); позиција: релативна;
садржаја својство на оба псеудо-елемента, .фоо :: бефоре и .фоо :: афтер, да би их правилно приказали. .фоо :: бефоре, .фоо :: афтер цонтент: "; поситион: абсолуте; лефт: 0; топ: 0;
.фоо елемент, његова два псеудо-елемента, .фоо :: бефоре, .фоо :: афтер, И њихови :лебдети псеудо-класе набави прелаз својство та воља додајте једноставну транзицију за њих 500 милисекунди (пола секунде). .фоо, .фоо: ховер, .фоо :: бефоре, .фоо :: афтер, .фоо: ховер :: бефоре, .фоо: ховер :: афтер транситион: трансформација 500мс;
2. Додајте слику
.фоо :: бефоре псеудо-елемент као позадинску слику, и величину да покрије цео псеудо-елемент са видтх и хеигхт својства. Ми ставите га одмах испод .фоо елемент помоћу з-индекс: -1 правило. .фоо :: бефоре видтх: 100%; висина: 100%; бацкгроунд: урл (цамел.пнг) центар / омот; з-индекс: -1;
центар кључне речи центрира слику, док цовер кључна реч скалира слику на покрити цео елемент задржавајући његов омјер. з-индек је уклоњен из .фоо :: бефоре тако да се може видети):
3. Додајте позадину која се помера
.фоо :: афтер.--б, за бордер видтх. Дајемо три транспарентне границе до ::после псеудо-елемент: горе, десно и дно. .фоо :: афтер --б: 20пк; видтх: цалц (100% - вар (- б)); висина: цалц (100% - цалц (вар (- б) * 2)); бордер: вар (- б) солид транспарент; граница-лијево: нема; бок-схадов: инсет 0 вар (- дим) 0 вар (- бгц); филтер: осветљеност (.8); з-индекс: -2;
цалц (100% - вар - б)) који се враћа укупна ширина .фоо минус укупна ширина његових хоризонталних граница (само десна граница, пошто нема леве границе).цалц (100% - цалц (вар (- б) * 2)) који се враћа укупне висине .фоо минус укупна ширина његових вертикалних граница (горња и доња граница).бок-схадов власништво, такође додајте хоризонталну уметнуту сенку исте величине као .фоо (која је вар (- дим)).свјетлина (.8) потамни боју позадине мало, и коначно, з-индекс: -2 правило местима ::после псеудо-елемент испод ::пре него што која садржи слику.з-индек уклоњен из оба псеудо-елемента тако да се могу видети):
4. Додајте трансформацију
трансформисати својство на два псеудо-елемента, тако да када корисник лебди изнад .фоо, оба псеудо-елемента су померио се хоризонтално.прелаз власништво свих елемената на крају корака 1, кретање слике и њене позадине су оба анимирана. .фоо: ховер :: бефоре, .фоо: ховер :: афтер трансформ: транслатеКс (100%);
Бонус: Опциона маргина
.фоо поред других елемената на страници и желите да ти други елементи буду измицати када се слика и њена позадина извуку, онда додајте десну маргину исте ширине као и .фоо до .фоо: лебдите елемент. .фоо: ховер маргин-ригхт: вар (- дим);
