Kako napraviti bio padajuću kutiju s CSS-om

Nakon što sam pustila najnoviji redizajn Teme, Imao sam brojne komentare na “bio dropdown” okvir koji se nalazi u mojoj navigacijskoj traci. Šifrirao sam ga s samo nekoliko redaka CSS-a, zajedno s pozadinskom slikom.


U ovom članku sa savjetima o CSS-u objasnit ću kako možete imati sličan efekt lebdenja na vlastitim web lokacijama.

Primjer

U ovom primjeru koristit ću tekstualni widget u prozoru Dvadeset jedanaest tema, nova zadana postavka u programu WordPress 3.2.

U osnovi, jednom kada pokažete miš preko miša koji sadrži widget, pojavit će se “skriveni” div koji će biti naš biološki padajući okvir.

Napomena na slici s lijeve strane, sivi biološki okvir neće se pojaviti osim ako pokažete div koji sadrži naslov “Bio Hover”.

Selektor

Nije toliko važno imati jedinstveni CSS selektor za stil diva u koji želite staviti svoj biološki padajući okvir. U osnovi to je zato što ako nemate prateću oznaku u tom divu, ništa se neće pojaviti u slučaju da stanje lebdjenja.

Iako bismo u slučaju Dvadeset jedanaest mogli pobjeći samo stiliziranjem klase “u stranu”, vjerovatno je da ionako želite samo biološki padajući okvir na jednom od svojih divinih dizala, pa ćemo detaljnije definirati.

Srećom s WordPressom, izbaci tonu jedinstvenih CSS birača koje možete koristiti. U ovom primjeru izdvaja # test-3 koji ćemo od sada koristiti.

Bilješka: To može varirati ovisno o vašoj WordPress instalaciji. Upotrijebite nešto poput alata za razvojne programere Chrome da biste lako pronašli birač.

Oznaka HTML-a

U ovom primjeru, HTML označavanje može se postaviti izravno u tekstualni widget za WordPress. To je ono što stavite:

Leland!

Zdravo. Ja sam Leland Fiegel i tvorac i osnivač Theme Lab-a. Obožavam pisati kod, posebno HTML, CSS i za WordPress.

Ako ne želite ukrasti moj identitet, vjerojatno ćete željeti fotografiju zamijeniti slikom. Možete ga i ukloniti.

Budući da koristimo widget WordPress, vanjska markacija već je generirana za nas. Ovo je sveukupno.

Bio Hover

Leland!

Zdravo. Ja sam Leland Fiegel i tvorac i osnivač Theme Lab-a. Obožavam pisati kod, posebno HTML, CSS i za WordPress.

Ako to radite na neobrađenoj HTML web lokaciji, trebat će vam neka vrsta omota (kao što je ovaj na stranu) za padajuću biološku karticu s nečim drugim u njoj, jer u suprotnom nema što misliti preko kurca za ispuštanje dolje.

Primjer iz stvarnog života: Moj biološki padajući div nalazi se unutar oznake li u mom navigacijskom meniju.

Prve dvije crte CSS-a

Prva dva retka doista su ga postavila, pa sam to stavio u svoj vlastiti dio.

# tekst-3 {položaj: relativno; }
.bio-padajući zaslon {prikaz: nema; }

Obrazloženje

  • Prvi red: Postavljamo omot biološkog pada kako bi imali relativno pozicioniranje. To olakšava apsolutnu poziciju biološkog padajućeg okvira bliže originalnom omotu.
  • Drugi redak: To u osnovi čini padajući biološki okvir nevidljivo prema zadanim postavkama. To bi se trebalo pojaviti samo kada miš pređete preko miša, sjetite se?

Bilješka: Ako niste ljubitelj prikazivanja: nijedan; ili mislite da vam smeta vaš SEO ili nešto slično, možete koristiti i nešto u skladu sa položajima: apsolutno; slijeva: -100000em; što će je u osnovi pomaknuti tako daleko od stranice, ionako je nitko nikad neće vidjeti.

Ostatak CSS-a

Sljedeći CSS kôd obrađuje izgled i dojam biološkog padajućeg okvira.

# text-3: lebdite.
prikaz: blok; z-indeks: 99;
položaj: apsolutni; vrh: 25px;
pozadina: #ccc; padding: 10px 10px 0 10px;
veličina fonta: 11px; visina crte: 18px; boja: # 666;
}

Obrazloženje

Ovdje konačno koristimo selektor # text-3 zajedno sa: lebdite pseudoklasa kako bi se padajući okvir za biografiju prikazao samo kada pokažete mišem iznad tekstualnog widgeta.

  • Prvi red: Zaslon: blok; čini padajuće polje bio. Z-indeks: 99; osigurava da će okvir biti prikazan nad svim ostalim, neometan.
  • Drugi redak: Ovo smješta okvir ispod oko 25 piksela.
  • Treći redak: Ovo su samo neki kozmetički stilovi, koji postavljaju pozadinu svijetlo sivoj boji s pristojnim podlogama.
  • Četvrti redak: Ovo je sve samorazumljiva tipografija.

Bilješka: O prvom retku, ako koristite položaj: apsolutno; slijeva: -100000em; tehnika umjesto prikaza: nijedna; kao što sam gore objasnio, upotreba display: block ovdje ne bi bio potreban (jer se divs ionako pretpostavlja da su elementi razine bloka). Umjesto toga, trebate koristiti lijevo: 0; da biste vratili div na stranicu.

A za sliku samo jednostavan plutajući i desni rub.

.bio-padajući .photo {float: lijevo; margina-desno: 10px; }

Integracija WordPress-a

Ne mogu smisliti dobar način da to integriram u dinamični WordPress izbornik (wp_nav_menu) bez filtriranja sranja iz nečega. Najlakši način može biti tvrdo kod svoje navigacije i prevladajte (što radim na svim svojim web lokacijama).

Ako imate bilo kakve tehnike kako umetnuti oznaku u stavku izbornika WordPress, koja je potrebna za to, volio bih čuti o tome u komentarima. Siguran sam da je moguće, ali to nadilazi opseg ovog savjeta o CSS-u.

Zaključak

Da, shvaćam da vjerovatno ne biste željeli staviti biološki pad u bočnu traku, stavite ga na mjesto s ograničenim prostorom koji nema mjesta da se u potpunosti prikaže (poput skučene navigacijske trake).

Srećom ovaj tehnique možete koristiti bilo gdje. Samo sam htio preći osnovnu tehniku ​​o tome kako prikazati cijeli div na lebdilištu.

Nije pretjerano komplicirano i ne trebate neke fantastične Javascript stvari kako biste to napravili, mada ako želite neki visokotehnološki fading efekt, vjerojatno biste trebali koristiti neki Javascript.

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