Printre avantajele rar discutate de CSS este posibilitatea de a suprapune imaginile de fundal pentru a obține diferite efecte. În conformitate cu standardul CSS2, este necesar un element HTML separat pentru fiecare imagine de fundal. În majoritatea cazurilor, un cod tipic care descrie componente de interfață comună oferă mai multe elemente HTML la dispoziția noastră.
Un astfel de caz este navigarea bazată pe marcaje. Este timpul să recâștigem controlul asupra marcajelor, a căror popularitate ca principal mijloc de navigație crește în mod constant. Și acum, datorită sprijinului larg al CSS, putem îmbunătăți calitatea și aspectul marcajelor pe site-urile noastre. Probabil că sunteți deja conștient de faptul că CSS poate fi folosit pentru a "îmblânzi" o listă simplă, fără numere. Poate că ați văzut chiar și liste cu un design sub formă de marcaje care arată astfel:
Și dacă am putea lua codul exact din exemplul anterior și transformăm semnele de carte în ceva de genul:
Cu ajutorul CSS simplu acest lucru este posibil.
Ce este inovarea?
Multe dintre marcajele mele CSS (marcaje bazate pe CSS) suferă de monotonia designului lor: dreptunghiuri colorate, eventual cu un accident vascular cerebral, fila curentă fără lovituri, schimbările de culoare pentru starea de hover. Este tot ce ne poate oferi CSS? Câteva dreptunghiuri cu o singură culoare?
Înainte ca CSS să devină larg răspândită, multe idei noi au apărut în designul navigației: formele bizare, tranzițiile de abilitate ale culorilor, imitația interfețelor din lumea reală. Un astfel de design, totuși, sa bazat în mare măsură pe modele complexe din text rasterizat și tabele în mod repetat imbricate. Editarea textului sau modificarea ordinii de plasare a marcajelor a fost o sarcină dificilă. Scalarea textului a fost imposibilă sau a dus la probleme serioase în compoziția paginii.
Navigarea de la textul simplu este ușor de editat și încărcată mult mai repede decât navigația bazată pe raster. În plus, deși putem adăuga atributul alt pentru fiecare imagine, textul simplu este încă disponibil pe scară largă, deoarece poate fi redus. Prin urmare, nu este surprinzător faptul că navigarea cu text simplu este returnată designului web. Cu toate acestea, apariția marcajelor CSS a fost încă un pas înapoi în ceea ce privește designul și, cu siguranță, deloc ceea ce poate fi inclus în portofoliul de design. Noile tehnologii (cum ar fi CSS) ar trebui să permită crearea unui lucru mai bun și cu aceeași calitate a designului care a permis utilizarea tabelelor și marcajelor bazate pe imagini raster.
Metoda "ușilor glisante"
Putem crea elemente de interfață frumoase, foarte flexibile, care se extind și se îngustează, în funcție de dimensiunea textului, folosind două imagini separate de fundal. Unul pentru partea stângă a marcajului, cealaltă pentru partea dreaptă. Imaginați-vă această pereche de poze - Uși glisante care acoperă o ușă. Aceste uși se mișcă și se suprapun mai mult dacă ușa este îngustă și invers, se deplasează și se suprapune mai puțin dacă trebuie să închideți un spațiu mai larg. Acest lucru este prezentat în imagine:
Conform acestui model, o imagine se suprapune peste o parte a celeilalte. Presupunând că există ceva unic în jurul marginilor imaginilor noastre, cum ar fi colțul rotunjit al marcajului, nu ne dorim cu greu ca o singură imagine să acopere complet celălalt spate. Pentru a evita acest lucru, vom face imaginea din față (în cazul nostru, stânga) cât mai restrânsă. Dar, în același timp, imaginea ar trebui să fie suficient de largă pentru a-și păstra unicitatea aparentă. În cazul nostru, colțurile rotunjite sunt unice, astfel încât imaginea din față va fi lățimea cu această parte rotunjită a imaginii:
Dacă mărimea marcajului crește ca urmare, de exemplu, de scalarea textului, imaginile noastre se vor dispersa în lateral, dezvăluind o pauză neplăcută. Prin urmare, trebuie să estimați scara unei extensii acceptabile. Cât poate crește obiectul când textul este scalat în browser? Într-adevăr, este necesar să ne bazăm pe posibilitatea de a crește până la 300%. Pentru a compensa această creștere, trebuie să întindeți imaginile de fundal. În exemplul nostru, vom face o imagine din spate (partea dreaptă) cu o dimensiune de 400x150 pixeli, iar cea din față - 9x150 pixeli.
Nu uitati ca imaginile de fundal sunt vizibile numai in "usa" elementului la care sunt aplicate ("usa" este zona de continut + indentare). Ambele imagini sunt atașate la colțurile exterioare ale elementelor lor respective. Părțile vizibile ale acestor imagini sunt combinate în interiorul ușii și formează forma unui marcaj:
Când marcajul este mărit, imaginile se mișcă în afară, umplând o deschidere mai largă, în timp ce zona vizibilă a imaginii devine și mai mare:
Același lucru trebuie făcut cu o imagine ușoară pentru marcajul curent. Astfel, obținem toate cele 4 imagini (1, 2, 3, 4), putem începe să creăm cod și CSS pentru marcajele noastre.
Pe măsură ce vă familiarizați cu crearea listelor orizontale cu CSS, veți observa cel puțin două moduri de a aranja un grup de obiecte într-un singur rând. Toată lumea are avantaje și dezavantaje. Ambele necesită acces la aspecte destul de complexe ale CSS, ca rezultat, puteți obține rapid confuz. Prima metodă utilizează elementele de șir, a doua este proprietatea float.
Prima metodă - probabil cea mai obișnuită - implică schimbarea proprietății afișate la "inline" (cu litere mici). Metoda "șir" este atractivă pentru simplitatea sa. Totuși, aceasta conduce la probleme în implementarea metodei Usi culisante în unele browsere. Cea de-a doua cale, pe care ne vom concentra atenția, utilizează un model plutitor pentru alinierea elementelor dintr-o listă orizontală. Totuși, un model plutitor poate dezamăgi. Comportamentul său contradictoriu încalcă uneori toate logica imaginabilă. Dar o înțelegere comună a modului de a trata mai multe elemente plutitoare și cunoașterea modalităților fiabile de a "ieși" dintr-un rând plutitor (sau închisoarea într-un container) pot face minuni.
Vom încerca să plasăm mai multe elemente plutitoare în interiorul unui alt element plutitor. Aceasta trebuie făcută astfel încât elementul plutitor exterior exterior să înconjoară complet elementele plutitoare interne. Apoi putem adăuga o culoare de fundal sau o imagine de fundal în spatele marcajelor noastre. Este important să rețineți că poziția următorului element din spatele marcajelor trebuie restabilită utilizând proprietatea CSS clară. Apoi, marcajele plutitoare nu pot afecta aspectul altor elemente de pagină.
Să începem cu următorul cod:
În practică, #header ar putea conține, de exemplu, un alt logo și un formular de căutare. În exemplul nostru, reducem valoarea href pentru fiecare legătură la "#". Este clar că în viața reală, în locul acestei pictograme, va fi specificată calea către fișier sau dosar.
Să începem să lucrăm cu CSS atribuindu-i proprietății float la containerul #header. Aceasta oferă o garanție că containerul de fapt "deține" elementele listei, care va fi, de asemenea, plutitoare. Din moment ce am făcut #header plutitor, trebuie să-i dăm o lățime de 100%. Vom adăuga, de asemenea, un fundal temporar galben pentru a vă asigura că acest element părinte este întins complet în urma marcajelor. În cele din urmă, să stabilim câteva proprietăți ale fontului de bază pentru a asigura unitatea aspectului elementelor:
#header #current a
După ce am făcut acest lucru, avem un exemplu de 4. Rețineți că pașii pe care i-am făcut pentru a crea colțuri transparente au dus la apariția unei mici zone "moarte" în partea stângă a filei, unde nu răspunde la plasarea mouse-ului. Zona morților este în afara textului, dar este încă vizibilă. Imaginile transparente pentru fiecare parte a marcajului nostru nu trebuie folosite. Dacă preferăm să nu avem un site "mort" pe marcajul nostru, trebuie doar să folosim o umplutură solidă în spatele marcajelor, nu un gradient, și să facem colțurile marcajelor de aceeași culoare. Între timp, vom păstra transparența colțurilor. [În IE / Win, zona menționată "mort" a existat și înainte de pașii luați și din toate părțile de la textul link-ului. Soluția acestei probleme este acoperită în următorul articol din seria SlidingDoorsofCSS, PartII. - aprox. traducător]
Ei bine, în cele din urmă, atingerile finale. În același timp: facem tot textul îngroșat, textul pe filele normale este maro, iar pe griul actual de culoare închisă, aceeași culoare este atribuită textului pentru starea linkului hover, eliminați link-urile de subliniere. Toate adăugările și modificările aduse acestui minut sunt prezentate în Exemplul 5.
O altă metodă pentru a asigura compatibilitatea
După examinarea exemplului 2, am recunoscut problema cu IE5 / Mac, care a întins semnele de carte la lățimea totală a ferestrei, aliniindu-le vertical unul sub altul. Nu exact efectul pe care încercăm să-l realizăm.
În majoritatea browserelor, aplicarea unei proprietăți float unui element determină comprimarea sa la cea mai mică dimensiune posibilă, determinată de conținutul său. Dacă elementul plutitor conține o imagine (sau este ea însăși o imagine), se va micșora la lățimea imaginii. Dacă conține doar text, se micșorează la lățimea celei mai lungi linii de text care nu conține cratițe.
Problemele apar în IE5 / Mac, când un element de bloc cu o lățime de auto este plasat în interiorul elementului plutitor. În acest caz, toate browserele comprimă elementul plutitor la lățimea minimă posibilă, fără a acorda atenție elementului bloc intern. Dar IE5 / Mac nu face acest lucru în situația descrisă. În schimb, se întinde elementele flotante și interioare ale blocului la întreaga lățime disponibilă. Pentru a rezolva acest comportament, trebuie să aplicăm float și la link, dar numai pentru IE5 / Mac, fără a afecta alte browsere. Mai întâi, adăugați un float la o regulă existentă. Apoi aplicați metoda "Backslash" pentru a ascunde noua regulă din IE5 / Mac, care elimină plutitorul pentru alte browsere:
nu-repeta dreapta sus;
umplutura: 5px 15px 4px 6px;
/ * Comentează Backslash Hack
ascunde regula de la IE5-Mac \ * /
/ * Sfârșit IE5-Mac hack * /
În conformitate cu exemplul 6, IE5 / Mac afișează acum marcajele așa cum ar trebui. Pentru restul browserelor nimic nu sa schimbat. IE5 / Mac conține un număr imens de bug-uri CSS care au fost fixate în IE5.1. Din aceste bug-uri în IE5 / Mac suferă și metoda "ușilor glisante". Numărul lor depășește toate limitele imaginabile și nu mă voi lupta cu ele. Deoarece actualizarea la 5.1 este deja disponibilă pentru o perioadă lungă de timp pentru toată lumea, procentajul de MacOS cOS 9 și IE5 / Mac instalat se micșorează constant și se apropie de zero.
Tocmai am investiga în detaliu metoda de „Sliding Doors“, care vă permite să creați o prezentare grafică utilizând lista de link-uri și neordonate și modificate cu reguli CSS câteva file de navigare printr-un text simplu. Această navigare este încărcată rapid, ușor de întreținut, iar textul din interiorul acesteia poate fi scalat în orice direcție fără a rupe proiectul. Inutil să spun, cât de flexibilă este această metodă pentru crearea oricărei navigări rafinate?
Utilizarea acestei tehnici este limitată doar de imaginația noastră. Exemplul final ilustrează doar o singură opțiune. Dar acest exemplu nu trebuie să ne limiteze ideile.
Alte efecte pot fi adăugate la tehnica aplicată, pe care nu o luăm în considerare aici. În exemplul nostru, am schimbat culoarea textului pentru starea de hover, dar de ce nu schimbăm întreaga imagine de fundal pentru a obține efecte de rollover interesante. Dacă există coduri HTML încorporate în cod, putem folosi întotdeauna CSS pentru a suprapune imaginile de fundal și pentru a obține efecte pe care nu le-am visat niciodată. În exemplul nostru, am creat un rând orizontal de marcaje, dar metoda Usi glisante poate fi utilizată în multe alte cazuri. Ce aplicație propuneți acestei metode?
Toate materialele din secțiunea "Informatică și programare"
Articole similare
Trimiteți-le prietenilor: