Cum se face o casetă bio cu CSS

După ce am eliberat cea mai recentă reproiectare a Laboratorului tematic, Am avut o serie de comentarii la caseta „bio dropdown” pe care o am în bara de navigare. L-am codat doar cu câteva linii de CSS, împreună cu o imagine de fundal.


În această postare de tip CSS, voi expune modul în care puteți avea un efect asemănător asemănător asupra propriilor dvs. site-uri.

Exemplul

În acest exemplu, voi folosi un widget de text în Douazeci unsprezece tema, noua valoare implicită ca WordPress 3.2.

Practic, după ce treceți peste versiunea care conține widget-ul, va apărea un div „ascuns” care va fi caseta noastră bio.

Notă în imaginea din stânga, căsuța bio gri nu va apărea decât dacă treceți cursorul care conține titlul „Bio Hover”..

Selectorul

Nu este atât de important să ai un selector CSS unic care să modeleze div-ul pe care vrei să-l introduci în caseta verticală bio. Practic, acest lucru se întâmplă pentru că dacă nu ai marcajul însoțitor în div, nimic nu se va afișa oricum în caz de o stare de hover.

Deși în cazul celor douăzeci și unu, am putea să ne îndepărtăm doar de designul clasei „deoparte”, este posibil să doriți oricum doar o casetă bio derulantă pe unul dintre div-urile dvs., așa că vom fi mai specifici.

Din fericire, cu WordPress, scoate o mulțime de selectori CSS unici pe care îi puteți folosi. În acest exemplu, scrie # test-3 pe care îl vom folosi de acum înainte.

Notă: Acest lucru poate varia în funcție de instalarea WordPress. Utilizați ceva precum Instrumentele pentru dezvoltatori Chrome pentru a găsi cu ușurință selectorul.

Marcarea HTML

În acest exemplu, marcajul HTML poate fi plasat direct în widgetul de text WordPress. Asta ați introdus:

Leland!

Buna. Sunt Leland Fiegel și sunt creatorul și fondatorul Temei Lab. Îmi place să scriu cod, în special HTML, CSS și pentru WordPress.

Dacă nu doriți să-mi furați identitatea, probabil că veți dori să înlocuiți fotografia cu o imagine cu voi. Puteți, de asemenea, să îl eliminați.

Deoarece folosim un widget WordPress, marcajul periferic este deja generat pentru noi. Aceasta este ceea ce este în total.

Bio Hover

Leland!

Buna. Sunt Leland Fiegel și sunt creatorul și fondatorul Temei Lab. Îmi place să scriu cod, în special HTML, CSS și pentru WordPress.

Dacă faceți acest lucru pe un site HTML brut, veți avea nevoie de un fel de înveliș (cum este acesta deoparte) pentru derularea bio cu altceva în el, în caz contrar, nu este nimic de încins pentru a da jos.

Exemplu în viața reală: Divizia mea bio derulantă se află în eticheta li din meniul meu de navigare.

Primele două linii ale CSS

Primele două rânduri au configurat cu adevărat restul, așa că am pus acest lucru în propria secțiune.

# text-3 {poziție: relativă; }
.bio-dropdown {display: none; }

Explicaţie

  • Prima linie: Am setat învelișul dropdown bio pentru a avea o poziționare relativă. Acest lucru facilitează poziționarea absolută a casetei bio mai aproape de învelitoarea originală.
  • A doua linie: Acest lucru face ca, în mod implicit, caseta dropdown bio să fie invizibilă în mod implicit. Nu uitați că trebuie să apară doar atunci când treceți peste ceva?

Notă: Dacă nu sunteți fan al afișajului: niciuna; sau credeți că vă doare SEO sau ceva, puteți utiliza, de asemenea, ceva de-a lungul liniilor de poziție: absolut; la stânga: -100000em; care, practic, o va muta atât de departe de pagină, nimeni n-ar vedea-o oricum.

Restul CSS

Următorul cod CSS gestionează aspectul casetei bio.

# text-3: hover .bio-dropdown {
afișare: bloc; index z: 99;
poziție: absolută; partea de sus: 25px;
fundal: #ccc; căptușire: 10px 10px 0 10px;
font-size: 11px; linie-înălțime: 18px; culoare: # 666;
}

Explicaţie

Aici folosim în sfârșit selectorul # text-3 împreună cu: pseudoclass: hover pentru a face ca caseta bio să apară doar atunci când treceți peste widgetul de text.

  • Prima linie: Afisajul: bloc; face ca caseta bio să fie vizibilă. Indicele z: 99; se asigură că caseta va fi afișată peste orice altceva, fără obstacole.
  • A doua linie: Aceasta poziționează caseta de dedesubt aproximativ 25 de pixeli.
  • A treia linie: Acestea sunt doar câteva stiluri cosmetice, care stabilesc fundalul într-un gri deschis cu o captusire decentă.
  • A patra linie: Aceasta este tot tipografia explicativă.

Notă: Despre prima linie, dacă utilizați poziția: absolută; la stânga: -100000em; tehnică în loc de afișare: niciuna; așa cum am explicat mai sus, folosind afișarea: blocul aici nu ar fi necesar (din moment ce div-urile sunt deja presupuse a fi elemente la nivel de bloc). În schimb, va trebui să folosiți stânga: 0; pentru a muta div-ul înapoi pe pagină.

Și pentru imagine, doar o simplă plutire și marginea dreaptă.

.bio-dropdown .photo {float: stânga; margine-dreapta: 10px; }

Integrare WordPress

Nu mă pot gândi la o modalitate bună de a integra acest lucru într-un meniu dinamic WordPress (wp_nav_menu) fără a filtra prostiile din ceva. Cea mai ușoară cale poate fi codează-ți navigarea și treci peste ea (pe care îl fac pe toate site-urile mele).

Dacă aveți tehnici despre cum să inserați marcarea într-un element din meniul WordPress, care este necesar pentru acest lucru, mi-ar plăcea să aflu despre asta în comentarii. Sunt sigur că este posibil, dar depășește sfera acestui post CSS.

Concluzie

Da, îmi dau seama că probabil nu ai dori să introduci un dropdown bio în bara laterală, nu l-ai așezat într-un loc cu spațiu limitat, care nu are loc pentru a fi afișat complet (cum ar fi o bară de navigare înghesuită).

Din fericire, puteți utiliza acest teqhnique aproape oriunde. Am vrut doar să trec peste o tehnică de bază cu privire la modul de afișare a unei întregi div la pas.

Nu este prea complicat și nu aveți nevoie de nicio chestie javascriptă pentru a face acest lucru, deși dacă doriți un efect de decolorare de înaltă tehnologie, probabil că va trebui să utilizați un 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