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

Након што сам га пустио најновији редизајн Теме, Имао сам бројне коментаре на „био дропдовн“ оквир који имам у навигацијској траци. Шифрирао сам га са само неколико редова ЦСС-а заједно са позадинском сликом.


У овом посту са ЦСС саветом, описаћу како можете да имате сличан ефект лебдења на својим веб локацијама.

Пример

У овом примеру ћу користити текстуални виџет у пољу Двадесет једанаест тема, нова задана поставка у програму ВордПресс 3.2.

У основи, једном када пређете мишем преко див-а који садржи видгет, појавиће се „скривени“ див који ће бити наш биолошки падајући оквир.

Напомена на слици лево, сива био поље неће се појавити уколико не померите див који садржи наслов „Био Ховер“.

Селектор

Није толико важно имати јединствени ЦСС селектор за стил дива у који желите да поставите биолошки падајући оквир. У основи то је зато што ако немате пратећу ознаку у том диву, ништа се неће појавити у случају да стање лебдјења.

Иако бисмо у случају Двадесет једанаест могли да се извучемо само стилизовањем класе „у страну“, шансе су да ионако желите само биолошки падајући оквир на једном од својих див-а, па ћемо детаљније сазнати.

Срећом са ВордПресс-ом, избацује тону јединствених ЦСС селектора које можете користити. У овом примеру избацује # тест-3 који ћемо од сада користити.

Белешка: Ово може да варира у зависности од ваше ВордПресс инсталације. Употријебите нешто попут Цхроме Девелопер Тоолс да бисте лако пронашли селектор.

ХТМЛ маркуп

У овом примеру, ХТМЛ маркирање се може поставити директно у ВордПресс текстуални виџет. То је оно што бисте ставили:

Леланд!

Здраво. Ја сам Леланд Фиегел и творац и оснивач Тхеме Лаб-а. Волим да пишем код, посебно ХТМЛ, ЦСС и за ВордПресс.

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

Будући да користимо видгет за ВордПресс, вањска маркација је већ генерисана за нас. Ово је укупно.

Био Ховер

Леланд!

Здраво. Ја сам Леланд Фиегел и творац и оснивач Тхеме Лаб-а. Волим да пишем код, посебно ХТМЛ, ЦСС и за ВордПресс.

Ако ово радите на необрађеном ХТМЛ месту, требаће вам нека врста омота (као што је овај је у страну) за падајућу биографију са нечим другим у њој, иначе нема шта да се померите изнад да бисте се спустили.

Пример из стварног живота: Мој биолошки падајући див налази се унутар ли ознаке у мом навигацијском менију.

Прве две линије ЦСС-а

Прве две линије су стварно поставиле остатак, па сам то ставио у свој сопствени одељак.

# текст-3 {позиција: релативна; }
.биолошки пад (приказ): ниједан; }

Објашњење

  • Прва линија: Постављамо омот биолошког пада на релативни положај. То олакшава апсолутни положај биолошког пада ближе оригиналном омоту.
  • Други ред: То у суштини чини падајућу кутију за биолошку подразумевано невидљиво. То би требало да се прикаже тек када лебдите над нечим, сети се?

Белешка: Ако нисте љубитељ приказивања: ниједан; или мислите да вам смета ваш СЕО или нешто слично, такође можете да употребите нешто по линијама положаја: апсолутно; лево: -100000ем; што ће је у основи померити тако далеко од странице, ионако је нико никада неће видети.

Остатак ЦСС-а

Следећи ЦСС код обрађује изглед и осећај биолошког падајућег оквира.

# тект-3: лебдите.
дисплеј блок; з-индекс: 99;
позиција: апсолутна; врх: 25пк;
позадина: #ццц; паддинг: 10пк 10пк 0 10пк;
фонт-сизе: 11пк; висина линије: 18пк; боја: # 666;
}

Објашњење

Овде коначно користимо селектор # тект-3 заједно са: лебдите псеудокласом да би се падајући оквир за биографију приказао само када покажете мишем изнад текстуалног видгета.

  • Прва линија: Екран: блок; чини падајуће поље био. З-индекс: 99; осигурава да ће се кутија приказати преко свега осталог, несметано.
  • Други ред: Ово смешта поље испод око 25 пиксела.
  • Трећа линија: Ово су само неки козметички стилови, који постављају позадину на светло сиву боју са пристојним подлогама.
  • Четврти ред: Ово је све саморазумљива типографија.

Белешка: Што се тиче првог реда, ако користите позицију: апсолутно; лево: -100000ем; техника уместо приказа: ниједна; као што сам горе објаснио, коришћење дисплаи: блоцк овде не би било потребно (пошто се дивс-и већ претпостављају да су елементи нивоа блока). Уместо тога, треба да користите лево: 0; да бисте вратили див на страницу.

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

.био-падајући .пхото {флоат: лево; маргин-десно: 10пк; }

Интеграција ВордПресс-а

Не могу смислити добар начин да то интегришем у динамични ВордПресс мени (вп_нав_мену) без филтрирања срања из нечега. Најлакши начин може бити тешко кодирајте своју навигацију и преболите је (што радим на свим својим веб локацијама).

Ако имате било какве технике за уметање маркирања у ставку менија ВордПресс, која је потребна за ово, волео бих да чујем о томе у коментарима. Сигуран сам да је могуће, али то превазилази опсег овог ЦСС савета.

Закључак

Да, схватам да вероватно не бисте желели да ставите биолошки пад у бочну траку, ставите га на место са ограниченим простором и нема места да се он у потпуности прикаже (попут скучене навигационе траке).

Срећом, ову технику можете користити било где. Само сам хтео да пређем основну технику о томе како приказати цео див на котачу.

Није превише компликовано и не требају вам неки феноменални Јавасцрипт елементи да бисте то учинили, мада бисте желели неки високотехнолошки фадинг ефекат, вероватно бисте морали да користите неки Јавасцрипт.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map