Printre avantajele CSS este rar discutat -Capacitatea de a suprapune imaginile de fundal pentru a obține efecte diferite. În conformitate cu standardul CSS2 pentru fiecare imagine de fundal necesită un element HTML separat. În cele mai multe cazuri, un cod tipic care descrie componente comune de interfață, ne oferă elemente HTML multiple.
Un astfel de file de navigare pe bază de caz. Este timpul să preia din nou controlul asupra filelor, popularitatea care este în creștere ca mijloc de navigație. Și acum, datorită sprijinului larg pentru CSS putem îmbunătăți calitatea și aspectul filele pe site-urile noastre. Probabil știți deja că CSS poate fi folosit pentru a „îmblânzire“ o lista neordonata simplă. Este posibil să fi liste proiectate sub formă de file, care arata ca acest lucru vazut chiar:
Ce se întâmplă dacă am putea lua codul exact în exemplul anterior și transforma filele în ceva de genul:
Cu ajutorul unui simplu CSS posibil.
Ce este de inovare?
Multe dintre întâlnit-CSS marcajele (semne de carte, bazate pe CSS) suferă de monotonia de design: dreptunghiurile colorate, eventual, un accident vascular cerebral, fila curentă nu este un accident vascular cerebral, modificările de culoare pentru starea Hover. Este într-adevăr tot ceea ce ne poate oferi CSS? Mai multe cutii cu o culoare de umplere?
Înainte de a CSS a fost adoptată pe scară largă în proiectarea de navigare o mulțime de idei noi: forme ciudate, tranziții inteligent de culoare, simula interfețe lumea reală. Acest design, cu toate acestea, sa bazat foarte mult pe structurile complexe ale textului rasterizat și tabele imbricate multiple. Editare text sau semne de carte de schimbare secvențe de plasare au fost afacere greoaie. Scalare text a fost imposibil sau duce la probleme grave în compoziția paginii.
Navigarea a textului simplu este ușor de a edita și încărca mult mai repede decât navigarea pe baza textului rasterizat. În plus, chiar dacă putem adăuga alt atribut pentru fiecare imagine, text simplu, încă mai disponibile publicului, deoarece poate fi scalate. Nu este surprinzător faptul că navigarea se bazează pe textul simplu este returnat la web design. Cu toate acestea, aspectul CSS-marcaje încă a fost un pas înapoi în proiectarea, și cu siguranță nu faptul că puteți încorpora într-un portofoliu de design. Noile tehnologii (de exemplu, CSS) ar trebui să permită să creeze ceva mai bun și cu aceeași calitate de proiectare, utilizarea tabelelor și a marcajelor bazate pe imagini raster care activat.
Metoda de „Sliding Doors“
Putem crea un frumos componente de interfață, cu adevărat flexibile, care dilată și se contractă în funcție de dimensiunea textului, utilizând două imagini de fundal separate. One-în partea stângă a filei, celălalt la dreapta. Imaginați-vă că această pereche de imagini, uși glisante, închiderea unei uși. Aceste uși sunt deplasate și suprapuse mai mult, dacă ușa este îngustă, și vice-versa, se deplasează la distanță și se suprapun mai puțin, dacă doriți să închideți spațiul mai mare. Acest lucru este prezentat în ilustrație:
În acest model, o imagine acoperă o parte din alta. Dacă presupunem că la marginile pozele noastre au ceva unic, cum ar fi marcajele de colț rotunjite, nu ne-ar dori ca o imagine este complet ascuns de alte, situat în spatele. Pentru a evita acest lucru, vom face partea din față (în acest caz, stânga) imaginea cât mai redusă posibil. Dar această imagine ar trebui să fie suficient de largă pentru a proteja unicitatea aparenta. In cazul nostru sunt colțuri rotunjite unice, astfel încât partea din față este o imagine cu o lățime a părții rotunjite a imaginii:
Dacă dimensiunea filei va crește ca urmare a, de exemplu, scalarea textul, imaginile noastre se vor dispersa pe laturile, dezvăluind o pauză urât. Prin urmare, este necesar să se evalueze amploarea expansiunii acceptabile. Cât de mult poate crește pe măsură ce obiectul redimensiona textul într-un browser? Într-adevăr ar trebui să conta pe posibilitatea de a crește la 300%. , Ai nevoie pentru a întinde imaginea de fundal pentru a compensa această creștere. În exemplul nostru, vom face imaginea din spate (partea dreapta) de dimensiuni 400h150 pixeli, iar pixelii din față-9h150.
Amintiți-vă că imaginea de fundal este vizibilă numai în elementul de „intrare“ la care sunt aplicate ( „ușă“ + -region conținut de indentare). Ambele pozele noastre sunt atașate la colțurile exterioare ale elementelor respective. porțiunile vizibile ale acestor imagini sunt combinate în formă de deschidere a ușii și sub formă file:
Atunci când fila este mărită, imaginea în afară, de umplere o ușă mai mare, cu imaginile care se pot consulta, de asemenea, devine mai mare:
Aceleași trebuie să fie făcut, și cu o imagine luminoasă pentru fila curentă. Astfel, obținerea de toate cele 4 imagine (1. 2. 3. 4) putem începe crearea și codul CSS pentru filele noastre.
Creați marcaje
Pe măsură ce explora crearea listelor orizontale cu CSS, veți observa cel puțin două moduri de a poziționa un grup de obiecte într-un rând. Fiecare are avantajele și dezavantajele sale. Ambele necesită recurgerea la o aspecte destul de complexe de CSS, ca rezultat, puteți deveni rapid confuz. Prima metodă utilizează elemente inline, al doilea float proprietate.
Primul mod -perhaps mai frecvente, implică schimbarea proprietății de afișare pe «inline» (line). „Inline“ metodă este atractivă în simplitatea ei. Cu toate acestea, aceasta duce la probleme în punerea în aplicare a ușilor noastre metoda glisante în unele browsere. A doua metodă. pe care ne concentrăm atenția, vom folosi un model pentru crearea unei liste de elemente plutitoare într-un rând orizontal. Plutitoare model cu toate acestea, de asemenea, poate fi frustrant. Uneori comportamentul contradictoriu încalcă toate logica imaginabile. Cu toate acestea, o înțelegere comună a modului în care să se ocupe cu mai multe elemente și cunoștințe de metode sigure la „ieșire“ plutitoare dintr-un număr de plutitoare (sau detenția sa într-un container) poate face minuni.
Vom încerca să plaseze mai multe elemente plutitoare care plutesc in interiorul altui element container. Acest lucru trebuie realizat astfel încât elementul flotant părinte exterior este complet înconjurat de elementele flotante interne. Apoi, putem adăuga în spatele nostru culoarea de fundal sau filele imagine de fundal. Este important să ne amintim că situația următoare elementului tab-uri ar trebui să fie restaurate cu ajutorul CSS-proprietăți clare. Apoi, fila plutitoare nu va afecta locația celorlalte elemente de pe pagina.
Vom începe cu următorul cod:
În practică #header unitate ar putea include, de exemplu, are forma unui logo și de căutare. În exemplul nostru, vom reduce valoarea href pentru fiecare trimitere la „#“. Este clar că în viața reală, în loc de pictograma va fi calea către fișierul sau dosarul.
Să începem cu proprietățile CSS pentru a atribui float container #header. Acest lucru asigură că recipientul este de fapt „hold“ elementele listei, care va fi, de asemenea, plutitoare. Din moment ce am făcut #header plutitoare, trebuie să-l atribuie o lățime de 100%. Vom adăuga, de asemenea, un fundal galben temporar pentru a se asigura că elementul-mamă se extinde pe întreaga lățime în spatele aripioarelor. Și, în sfârșit, punem câteva proprietăți de bază de fonturi, pentru a asigura unitatea aspectul elementelor:
Pentru referință, vă cerem de cartografiere bloc, în scopul de a monitoriza ceea ce se întâmplă, fără a fi nevoie să vă faceți griji cu privire la modelul minusculă:
Apoi, vom adăuga imaginea noastra de fundal dreptul la elementul de listă (modificări și completări sunt prezentate cu caractere aldine):
Înainte de a adăuga imaginea de fundal stânga pentru a întrerupe și să vedem ce avem în acest moment, în exemplul 1. (Ignoră regula pe care am aplicat elementului corpului în fișierul mostră. Aceasta stabilește numai valorile de bază pentru marjă, umplutură, culori și textul.)
Rezultatul este prezentat în Exemplul 2. Preferatele noastre a început să se contureze. În acest moment, să ne întoarcem la utilizatorii confuz IE5 / Mac, care se întreabă: „Ce se întâmplă aici? Marcaje stivuite într-o stivă verticală și întins lățimea întregului ecran. „Nu vă faceți griji, în curând vom ajunge chiar la tine. Pentru moment, doar ma uit la ceea ce se întâmplă, sau temporar comuta la un alt browser și fiți siguri, vom rezolva în curând problema IE5 / Mac.
Acum, când imaginile pentru marcaje simple, a avut loc lor, definim imaginea pentru fila curentă. Faceți acest lucru, se referă la elementul lista cu id = „curent“ și link-ul de interior. Din moment ce nu se schimba orice proprietăți cu excepția imaginii de fundal de fundal, vom folosi proprietatea background-image:
În partea de jos a filelor noastre, avem nevoie de un fel de accident vascular cerebral. Dar aplicarea proprietății de frontieră la #header părinte nu ne permit sa „scurs“ fila curentă prin această frontieră. În schimb, vom crea o nouă imagine cu cursa dorită de marginea inferioară. Și atâta timp cât vom lucra cu următoarea imagine, adăugați un gradient subtil asa se pare ca acest lucru:
Vom aplica această imagine pentru fundalul containerului nostru #header (în loc de galben dat mai devreme), l-am deplasa în jos pe recipient și atribui o culoare de fundal care se potrivește cu culoarea de top pentru a crea un gradient. Am elimina, de asemenea adăugat inițial indentat corpul elementului și adăugați adâncitura 10 pixeli la părțile din stânga și din dreapta sus al elementului ul:
Pentru a completa fila rămâne „scurgeri“ curent fila prin frontieră, așa cum am spus mai sus. S-ar putea crede că aplicăm la marcajele noastre coincide la limita inferioară, cu culoarea de accident vascular cerebral de fond elementul de imagine #header inferior. și apoi schimba culoarea de frontieră pentru fila curentă la alb. Cu toate acestea, acest lucru ar duce la apariția de mici „pas“ vizibile cu ochiul atent. Dar, dacă vom schimba liniuță pentru link-uri, vom crea un unghi clare și corecte în fila curentă, așa cum se vede în imagine:
Vom realiza acest lucru prin reducerea capitonarea de jos pentru trimiterile obișnuite la 1 pixel (5px - 1px = 4px), apoi adăugând că pixel la link-ul curent:
Această schimbare face ca granița inferioară a vizibile prin favorite de obicei, dar ascunde-o pentru fila curentă. Obținem Exemplul 3.
paşii finali
O privire atentă poate fi observat în exemplul anterior, zonele albe din colțurile de marcaje. Acestea interferează cu colțurile din spate ale imaginii opace să fie vizibilă prin colțul din stânga față al imaginii. Teoretic, am putea face colțurile de aceeași culoare ca și fundalul din spatele lor. Dar filele noastre pot crește în înălțime, și apoi înapoi în jos gradient de fundal se va muta, provocând nepotrivirile de culoare colțuri și gradient de fundal. În schimb, vom schimba imaginea noastră, făcându-le colțuri transparente. Dacă se aplică o uniformizare marcaje accident vascular cerebral (anti-aliasing), definim ca valoare medie a gradientului de fundal reglabil transparent de culoare (mată).
Acum, că colțurile sunt transparente, o bucată de imaginea din dreapta este privită prin colțul din stânga transparent. Pentru a evita acest lucru, adăuga unele padding stânga la elementul din listă, egală cu lățimea imaginii stânga (9px). : - Pentru a salva textul de centrare indentare, după adăugarea unui element din listă, aceeași cantitate de referință la marginea din stânga (9px = 6px 15px) trebuie să fie eliminate
Dar această opțiune nu ne convine, ca imaginea din stânga este acum mutat departe de marginea din stânga a filei pe 9 pixeli adăugat umplutură. Acum, că marginile interioare ale stânga și „căile de acces“ dreapta sunt îmbinate între ele, nu mai avem nevoie pentru a menține înainte de imaginea din stânga. Și putem schimba ordinea de imagini de fundal, aplicându-le la elemente opuse. De asemenea, trebuie să ne schimbăm imaginea pentru fila curentă:
Prin aceasta, avem un exemplu 4. Rețineți că am luat pentru a crea un colțuri transparente pași au dus la o mică zonă de „mort“ pe partea stângă a paginii, în cazul în care aceasta nu răspunde la mouse-ul peste. Zona moartă este în afara textului, dar este încă vizibil. imagini transparente pentru fiecare parte a utilizării noastre file este opțională. Dacă vom alege să nu fie pe tab-ul site-ul nostru „mort“, au nevoie doar de a utiliza o umplere solidă în spatele aripioarelor, în loc de un gradient, și să facă marcaje colțurile de aceeași culoare. Între timp, vom menține transparența colțuri. [În IE / Win a spus zona de „mort“ a existat înainte de măsurile luate, precum și pe toate laturile textului link-ul. Soluția la această problemă este descrisă în articolul următor din această serie Uși de CSS, Partea II.-Aprox alunecare. traducător]
Și, în sfârșit, retușuri. Dintr-o dată: face tot textul bold, textul de pe filele de maro convenționale, și gri curent întuneric, aceeași culoare a textului pentru a atribui statutul de link-uri hover. elimina reliefarea de link-uri. Toate realizate de aceste adăugiri minut și modificări sunt prezentate în exemplul 5.
O altă metodă pentru a asigura compatibilitatea
Luați în considerare exemplul 2, am recunoscut o problemă cu IE5 / Mac, care se întindea filele pe întreaga lățime a ferestrei, construirea lor pe verticală, unul sub altul. Nu exact efectul căutăm.
În cele mai multe browsere pentru proprietăți de aplicare plutească elementul implică comprimarea acestuia la dimensiunea minimă definită de conținutul său. În cazul în care un element flotant conține o imagine (sau imaginea în sine este), se va micșora la lățimea imaginii. În cazul în care conține numai text, se va micșora la lățimea cea mai lungă linie de text care nu conține cratime.
Problemele apar în IE5 / Mac, atunci când un element de bloc cu lățime automată este plasat în interiorul unui element flotant. In acest caz, toate browserele elemente plutitoare este comprimat la cea mai mică lățime posibil, ignorând piesa blocului interior. Dar IE5 / Mac în această situație nu. In schimb, se extinde flotorul și bloca elementele interne ale întregii lățimi disponibile. Pentru a rezolva acest comportament, trebuie să se aplice flotorului, de asemenea, link-ul, dar numai pentru IE5 / Mac, fără a afecta alte browsere. În primul rând, se adaugă un flotor la o regulă de existentă. Apoi, se aplică „metoda backslash“ pentru a ascunde de nouă regulă IE5 / Mac, care elimină plutitorul pentru toate celelalte browsere:
În conformitate cu exemplul 6 IE5 / Mac afișează acum marcajele cum era de așteptat. Pentru alte browsere, nimic nu sa schimbat. IE5 / Mac conține un număr mare de CSS-bug-uri care au fost fixate în versiunea IE5.1. Din aceste bug-uri în IE5 / Mac suferă și metoda de „uși glisante.“ Numărul lor depășește limitele toate posibile, și nu am de gând să se ocupe de ei. Și, din moment ce upgrade-ul la 5.1 pentru un timp destul de lung, este disponibil pentru toată lumea, procentul de Mac OS 9 și c instalat IE5 / Mac este în continuă scădere ș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 rapid pentru a încărca, ușor pentru a sprijini, iar textul în interiorul acestuia poate fi scalate în mod semnificativ în orice direcție fără a rupe design. Inutil să spun, cât de flexibilă este această metodă atunci când creați orice navigare sofisticat aspect?
Folosind această tehnică este limitată doar de imaginație. Ultimul exemplu ilustrează doar un exemplu de realizare. Dar acest exemplu nu ar trebui să limiteze ideile noastre.
Prin aplicarea tehnicii de alte efecte pe care nu le considerăm aici pot fi adăugate. În exemplul nostru, am schimbat culoarea textului pentru starea Hover. dar de ce nu schimba imaginea de fundal pentru întreaga efecte rollover interesante. Dacă există un cod de două elemente HTML imbricate putem folosi întotdeauna CSS pentru suprapunerea imagini de fundal și produc efecte pe care nu am visat vreodată. În exemplul nostru, am creat un rând orizontal de file, dar metoda ușilor glisante pot fi folosite în multe alte cazuri. Care este utilizarea acestei metode sugerați?
Fondator și șef Stopdesign „și Douglas Bowman (Douglas Bowman) este specializată în design simplu, clar și avansat. El provoacă în mod constant status quo-ul și împingând limitele a ceea ce poate fi realizat cu ajutorul standardelor web existente. Douglas a fost arhitectul sef al reproiectarea aclamat de cablu News anul trecut. El promite că nu va fi mulțumit cu această slavă.