Sliding Doors of CSS

 

Sliding Doors of CSS

Articolul in engleza provide de la http://www.alistapart.com/articles/slidingdoors/

thanks to: Directory Add Link :: Best Boats in Spain:: Tuscany Accommodation :: annunci gratuiti

Sliding Doors of CSS


Un avantaj rar discutat al CSS este abilitatea de a utiliza ca layer imagini de background, permiţându-le acestora să alunece una peste cealaltă pentru a crea anumite efecte. Starea actuală a CSS2 necesită un element HTML separat pentru fiecare imagine de background. În multe cazuri, markup-ul tipic pentru componente comune de interfaţă are deja disponibile anumite elemente pentru folosinţa noastră.
Unul din aceste cazuri este navigarea pe tab-uri. Este timpul reluării controlului asupra tab-urilor care au o popularitate continuu crescătoare ca metode principale de navigare a site-urilor. Acum, cu suportarea CSS pe scară largă, putem spori calitatea şi aspectul tab-urilor de pe site-urile noastre. Cel mai probabil sunteţi conştienţi de posibilitatea folosirii CSS la aranjarea unei liste plane neordonate. Se poate să fi văzut chiar şi liste aranjate ca tab-uri, arătând în felul acesta:
[Ordinary example of CSS-based tabs, using flat colors and squared-off corners.]
Dar dacă am putea să luăm exact acelaşi markup de la aceste tab-uri şi să le modificăm în ceva de genul acesta:
[Stylized tabs using rounded corners and subtle three-dimensional shading.]
Cu o stilizare simplă, putem.

Care este inovaţia?
Multe din tab-urile bazate pe CSS existente suferă de aceleaşi proprietăţi generice: dreptunghiuri simple colorate, poate un contur, ascunderea unei margini din tab-ul activ, schimbarea unei culori pentru starea hover. Este asta tot ce ne poate oferi CSS? O grămadă de dreptunghiuri şi culori monotone?
Înaintea unei adoptări mai extinse a CSS, am început să vedem multă inovaţie în design-ul navigării: forme creative, amestecuri complexe de culoare şi imitarea interfeţelor fizice din lumea reală, dar acest design se baza adesea puternic pe o construcţie complexă cu imagini încorporate în text, sau pe încadrarea cu multiple tabele intercalate. Editarea textului sau schimbarea ordinii tabelelor implica un proces greoi; redimensionarea textului era imposibilă, sau provoca probleme semnificative aspectului paginii.
Navigarea simplă prin text este mult mai simplu de menţinut şi se încarcă mai repede decât navigarea text-ca-imagine. De asemenea, deşi putem adăuga atribute alt la fiecare imagine, textul simplu este şi mai mult accesibil, putând fi redimensionat de către utilizatori cu viziune defectuoasă. Nu e de mirare că navigarea bazată pe text simplu, stilizat cu CSS, începe să se reîntoarcă în web design, însă majoritatea design-ului tab-urilor bazate pe CSS este cu un pas în urmă în privinţa aspectului, comparativ cu ce obişnuiam să facem – cu siguranţă nu este ceva de inclus într-un portofoliu pentru design. O tehnologie nou adaptată (precum CSS) ar trebui să permită crearea a ceva mai bun, fără pierderea calităţii designului cu utilizare de tabele sau de tabele bazate pe imagini.

Tehnica Sliding Doors
Componente de interfaţă frumos concepute, cu adevărat flexibile, care se extind şi se contractă cu dimensiunea textului pot fi create prin folosirea a două imagini separate de background: una pentru stânga şi una pentru dreapta. Aceste două imagini pot fi privite ca două uşi glisante care închid un hol. Uşile culisează împreună şi se suprapun mai mult pentru a ocupa un spaţiu îngust, sau se depărtează  suprapunându-se mai puţin, pentru a ocupa un spaţiu mai mare, precum arată diagrama de mai jos:
[Diagram shows two sets of doors. The first set is pushed together to take up less space. The second set is spaced apart to occupy a wider space.]
În acest model, una din imagini acoperă o porţiune din cealaltă. Presupunând că avem ceva unic la exteriorul fiecărei imagini, precum un colţ rotunjit al unui tab, nu vrem ca imaginea din faţă să obtureze complet imaginea din spate. Pentru a preveni acest lucru, facem imaginea din faţă (partea stângă în acest exemplu) atât de îngustă pe cât posibil, dar o păstrăm destul de lată cât să dezvăluie unicitatea acelei margini. Dacă colţurile exterioare sunt rotunjite, imaginea din faţă trebuie făcută la fel de lată cât porţiunea rotunjită a imaginii:
[Diagram shows an isolated narrow left-side image with rounded top-left corner, then repeats that same image placed in front of a right-side image with a rounded right-side corner.]
Dacă obiectivul se măreşte mai mult decât lăţimea arătată mai sus din cauza diferenţei de text sau modificării dimensiunii fontului, imaginile se vor retrage, creând un decalaj neplăcut. Trebuie să luăm o decizie arbitrară pentru nivelul extinderii pe care-o vom face. Cât de mare credem că se va face obiectul la redimensionarea textului în browser? Realistic, ar trebui să facem o adaptare pentru o posibilă mărire a textului din tab cu cel puţin 300%. Trebuie să extindem imaginile de fundal pentru  a compensa această creştere. Pentru aceste exemple vom realiza imaginea din spate (parte dreaptă) de 400x500 pixeli, iar cea din faţă 9x150 pixeli.
A se reţine că imaginile de fundal sunt vizibile doar în „holul” disponibil al elementului căruia îi sunt aplicate (content area + padding). Cele două imagini sunt ancorate de colţurile exterioare ale elementelor proprii respective. Porţiunile vizibile ale acestor imagini de fundal se potrivesc în interiorul holului formând o formă asemănătoare unui tab:
[Diagram shows both images with extra height added to the bottom. The right-side image also has extra width added to the left. The only portions which remain visible fit together perfectly to form the illustion of a tab-like shape.]
Dacă tab-ul este forţat la o dimensiune mai mare, imaginile se depărtează, acoperind un hol mai mare şi dezvăluind mai mult din fiecare imagine:
[Diagram shows the two images pulled apart slightly to create a wider tab, as well as a slightly taller vertical height to reveal more of each image. Since both background images have allowances for expansion, the the illusion is that the tab itself expanded naturally with the text contained inside.]
Pentru acest exemplu s-a folosit Photoshop pentru a crea două imagini pentru tab personalizate, netede, uşor tridimensionale, prezentate la începutul acestui articol. Pentru unul dintre tab-uri, umplutura a fost decolorată iar marginea închisă la culoare – versiunea mai deschisă va fi folosită pentru a reprezenta tab-ul „activ”. Dat fiind modelul acestei tehnici pentru imaginile tab-urilor stâng şi drept, trebuie extinsă acoperirea imaginii tab-ului, şi tăierea în două piese:
[Left- and right-side images]
Aceeaşi operaţie trebuie realizată cu imaginea mai deschisă la culoare. În momentul în care am creat toate cele patru imagini, (1, 2, 3, 4), putem trece la markup-ul şi la CSS-ul tab-urilor.

Crearea tab-urilor
Pe măsură ce se explorează crearea listelor orizontale cu CSS, se vor observa cel puţin două metode de aranjare a unui grup de elemente pe o linie. Fiecare vine cu propriile sale beneficii şi dezavantaje. Ambele necesită tratarea unor aspecte destul de bizare ale CSS, care devin repede confuze: una foloseşte casete colineare (inline), cealaltă foloseşte alunecare (float).

Prima metodă – şi probabil cea mai comună – este modificarea afişării fiecărui element din listă în „inline”. Metoda inline este atractivă pentru simplitatea ei, dar aceasta provoacă unele probleme de redare în anumite browsere pentru  tehnica Sliding Doors care este în discuţie. A doua metodă, care este cea pe care ne vom axa, utilizează float pentru a plasa fiecare element al listei într-o linie orizontală. Float-urile pot fi la fel de frustrante; comportamentul aparent inconsistent al acestora ignoră toată logica naturală. Totuşi, o înţelegere elementară a modului de lucru cu multiple elemente mobile şi a modurilor de descompunere fiabilă a acestora (sau adunarea lor) poate duce la minuni.
Vom încorpora câteva elemente mobile într-un alt element mobil. Facem asta pentru ca elementul mobil exterior să învăluie complet elementele mobile din interior. Astfel vom putea adăuga o culoare şi/sau o imagine de fundal în spatele tab-urilor noastre. Este important să ne amintim că următorul element după tab-urile noastre trebuie să-şi reseteze propria poziţie prin folosirea proprietăţii clear din CSS. Aceasta previne afectarea poziţiei altor elemente din pagină de către tab-urile mobile.
Să începem cu următorul markup:
  <div id="header">
    <ul>
      <li><a href="#">Home</a></li>
      <li id="current"><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

În realitate, #header div ar putea conţine de asemenea un logo şi o casetă de căutare. Pentru exemplul nostru, vom micşora valoarea href în fiecare ancoră. Evident, aceste valori ar conţine, în mod normal, locaţii ale unor file sau dosare.
Începem stilizarea listei noastre prin mobilizarea containerului #header. Aceasta ne ajută să ne asigurăm că acest container chiar „conţine” elementele listei interioare care va fi de asemenea mobilizată. Deoarece elementul este mobil, trebuie de asemenea să-i atribuim o lăţime de 100%. Un fundal galben temporar va fi adăugat pentru a fi siguri că elementul părinte se micşorează pentru a umple întreaga zonă din spatele tab-urilor. De asemenea, vom seta proprietăţi standard ale textului, pentru a fi siguri că în interior totul va fi la fel:
  #header {
    float:left;
    width:100%;
    background:yellow;
    font-size:93%;
    line-height:normal;
    }

Pentru moment, vom seta de asemenea şi valorile standard margine/umplutură (margin/padding) ale listei neordonate şi numărul elementelor din listă: „0”, şi vom îndepărta marcajul elementelor din listă. Fiecare element din listă va fi mobilizat spre stânga:
  #header ul {
    margin:0;
    padding:0;
    list-style:none;
    }
  #header li {
    float:left;
    margin:0;
    padding:0;
    }

Setăm ancorele elementelor la nivel block, astfel încât să putem controla toate aspectele fără a ne îngrijora în privinţa casetei colineare:
  #header a {
    display:block;
    }

În continuare, vom adăuga imaginea de fundal pentru dreapta la elementele listei (schimbările/adăugirile sunt scrise îngroşat):
  #header li {
    float:left;
    background:url("norm_right.gif")
      no-repeat right top;
    margin:0;
    padding:0;
    }

Înainte de adăugarea imaginii pentru parte stângă ne oprim pentru a putea vedea ce avem până acum, în Exemplul 1. (În fişierul din exemplu, se va ignora regula aplicată pentru body. Aceasta doar stabileşte valori elementare pentru margini, umplutură, culori şi text).
- - -
Acum putem plasa imaginea din stânga în faţa celei din dreapta prin aplicarea ei la ancoră (elementul nostru intern). Adăugăm umplutura (padding) în acelaşi timp, lărgind tab-ul şi împingând textul departe de marginile tab-ului:
  #header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px;
    }

Astfel se realizează Exemplul 2. A se vedea cum tab-urile încep să capete formă. În acest punct trebuie făcută o precizare pentru utilizatorii nedumeriţi de IE5/Mac, care se întreabă: „Ce se întâmplă aici ?”. Tab-urile sunt blocate vertical şi întinse pe tot ecranul. „Staţi fără grijă, ajungem şi acolo!” Pentru moment, faceţi tot posibilul pentru a urma paşii, sau treceţi temporar la alt browser dacă este mai la îndemână, şi fiţi siguri că problema cu IE5/Mac se va rezolva repede.
- - -
Acum că avem imaginile de fundal plasate pentru tab-uri normale, trebuie să schimbăm imaginile pentru tab-ul „activ”. Aceasta se va face prin direcţionarea spre elementul din listă care conţine id="current" şi ancora din interiorul acestuia. Deoarece nu trebuie să modificăm alte aspecte ale fundalului în afară de imagine, vom folosi proprietatea background-image:
  #header #current {
    background-image:url("norm_right_on.gif");
    }
  #header #current a {
    background-image:url("norm_left_on.gif");
    }

Avem nevoie de un fel de bordură de-a lungul părţii inferioare a tab-urilor noastre, dar aplicarea unei proprietăţi border la containerul parental #header nu va permite scurgerea tab-ului activ peste această bordură. În schimb, vom crea o nouă imagine cu bordura pe care vrem s-o includem la partea inferioară a imaginii. Când facem asta, adăugăm, de asemenea, un gradient subtil, făcând-o să arate astfel:
http://www.alistapart.com/d/slidingdoors/v1/bg.gif
Aplicăm această imagine fundalului containerului nostru #header (în locul culorii galbene pe care am avut-o), împingem fundalul spre parte inferioară a elementului şi folosim o culoare de background potrivită cu parte superioară a noii imagini. În acelaşi timp, îndepărtăm umplutura introdusă iniţial în elementul body şi aplicăm 10 pixeli de umplutură la marginile superioară, stânga şi dreapta ale ul:
  #header {
    float:left;
    width:100%;
    background:#DAE0D2 url("bg.gif")
      repeat-x bottom;
    font-size:93%;
    line-height:normal;
    }
  #header ul {
    margin:0;
    padding:10px 10px 0;
    list-style:none;
    }

Pentru a completa efectul tab-ului trebuie să extindem tab-ul activ peste bordură, în modul menţionat anterior. S-ar putea crede că vom aplica margini inferioare tab-urilor, potrivite cu culoarea imaginii de fundal din #header pe care abia am adăugat-o, iar apoi vom schimba culoarea marginii în alb pentru tab-ul activ. Oricum, aceasta va duce la o „treaptă” mică, vizibilă doar pentru ochii cu precizie la pixel. În schimb, dacă modificăm  umplutura ancorelor, putem crea elemente perfecte dreptunghiulare în interiorul tab-ului activ, ca în exemplul mărit de mai jos:
[Enlargement of two tab versions, the first showing the tiny 1-pixel step from using the bottom border, the second showing a perfect 90-degree angle.]
Aceasta se realizează prin scăderea umpluturii inferioare ale ancorei normale cu 1 pixel (5px-1px = 4px), şi adăugarea ulterioară a acelui pixel la ancora curentă:
  #header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px 4px;
    }
  #header #current a {
    background-image:url("norm_left_on.gif");
    padding-bottom:5px;
    }

Schimbarea permite bordurii inferioare să apară pentru tab-urile normale, şi să se ascundă pentru tab-ul activ. După folosirea acestui cod, va rezulta Exemplul 3.
Retuşări finale
Un ochi format poate să fi observat colţurile albe ale tab-ului apărute în exemplul anterior. Aceste colţuri opace previn de fapt apariţia imaginii din fundal prin colţul stâng al imaginii din faţă. În teorie, am putea încerca să potrivim colţurile imaginilor din tab-uri cu o parte din fundalul din spatele lor, dar tab-urile noastre pot creşte în înălţime, împingând fundalul în parte de jos, schimbând culoarea de fundal pe care am încercat s-o potrivim. În schimb, putem schimba imaginile, făcând colţurile tab-urilor transparente. Dacă curbele sunt anti-alias, vom  opaciza marginile la o medie a culorii de fundal din spatele lor.
Acum, când colţurile sunt transparente, o parte din imaginea din partea dreaptă se vede prin colţul imaginii din partea stângă. Pentru a compensa acest neajuns se va adăuga o distanţă mică elementului din listă echivalent lăţimii pentru imaginea din partea stângă (9px). Deoarece a fost adăugată umplutură la elementul din listă, trebuie să îndepărtăm aceeaşi distanţă din ancoră, pentru a menţine textul centrat (15px-9px = 6px):
  #header li {
    float:left;
    background:url("right.gif")
      no-repeat right top;
    margin:0;
    padding:0 0 0 9px;
    }
  #header a {
    display:block;
    background:url("left.gif")
      no-repeat left top;
    padding:5px 15px 4px 6px;
    }

Oricum,  nu poate rămâne nici aşa, deoarece imaginea din stânga va fi împinsă în afara limitei tab-ului stâng cu 9 pixeli de umplutură care a fost adăugată.  Acum că marginile interioare ale părţilor vizibile stângi şi drepte ale holului împing una spre cealaltă, nu mai trebuie să păstrăm imaginea din stânga în faţă. Astfel, putem schimba ordinea celor două imagini de fundal, aplicându-le la elemente opuse. De asemenea, trebuie să rotim între ele imaginile folosite pentru tab-ul activ:
  #header li {
    float:left;
    background:url("left.gif")
      no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    }
  #header a, #header strong, #header span {
    display:block;
    background:url("right.gif")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    }
  #header #current {
    background-image:url("left_on.gif");
    }
  #header #current a {
    background-image:url("right_on.gif");
    padding-bottom:5px;
    }

După ce facem asta, ajungem la Exemplul 4. A se ţine cont că operaţiile necesare pentru a face colţurile transparente creează un mic spaţiu inutilizabil la partea stângă a ab-ului, unde nu se poate da click. Spaţiul inutilizabil se află în afara zonei de text, dar este puţin observabil. Utilizarea de imagini transparente pentru fiecare latură a tab-urilor nu este necesară. Dacă preferăm să nu avem zone moarte, trebuie să utilizăm o culoare mată în spatele tab-urilor, apoi să folosim această culoare în colţurile imaginilor din tab în loc să le facem transparente. Pe moment, se vor păstra colţurile transparente.
- - -
Pentru operaţiunile rămase, vom realiza o mulţime de modificări, toate de odată: se va îngroşa tot textul din tab, schimbarea textului normal din tab într-o culoare maro, schimbarea culorii tab-ului activ în gri, îndepărtarea sublinierii de la link-uri şi schimbarea culorii textului pentru starea hover a link-ului în acelaşi gri. Adăugirile şi modificările realizate până aici se pot observa în Exemplul 5.
O acţiune pentru Consistenţă
După Exemplul 2, am menţionat  o problemă cu IE5/Mac, unde toate tab-urile s-au întins pe întreaga lăţime a browser-ului, forţându-se unul pe celălalt să se blocheze pe vertical, unul deasupra celuilalt. Acesta nu este chiar efectul scontat.
În majoritatea browser-elor, mobilizarea unui element va funcţiona ca un sistem micşorare-mărire – se îngustează la dimensiunea  minimă posibilă a conţinutului său. Dacă un element mobil conţine (sau este) o imagine, mişcarea va duce la micşorarea până la lăţimea imaginii. Dacă acesta conţine doar text, mişcarea va duce la scăderea până la lăţimea celei mai lungi linii nemodificabile a textului.
O problemă apare la imagini pentru IE5/Mac atunci când este inclus un element cu nivel block auto-dimensionabil într-un element mobil. Alte browsere încă micşorează partea mobilă pe cât de mult posibil, indiferent de elementele cu nivel block pe care le conţine, dar IE5/Mac nu acţionează în aceste circumstanţe. În schimb, vor expanda elementul mobil şi elementul cu nivel block la lăţimea maximă disponibilă. Pentru a rezolva această problemă, trebuie să mobilizăm, de asemenea, şi ancora. Pentru asta se va folosi Commented Backslash Hack , pentru a ascunde de IE5/Mac o nouă regulă care blochează mobilitatea pentru toate celelalte browsere:
  #header a {
    float:left;
    display:block;
    background:url("right.gif")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#765;
    }
  /* Commented Backslash Hack
     hides rule from IE5-Mac \*/
  #header a {float:none;}
  /* End IE5-Mac hack */

Browserele IE5/Mac ar trebui să afişeze acum tab-urile normal, conform Exemplului 6. Pentru browserele non-IE5/Mac, nimic nu se va schimba. Se observă că IE5/Mac suferă de o mulţime de bug-uri în afişare, anulate în actualizarea la IE 5.1. Din acest motiv, tehnica Sliding Doors, suferă în IE5 mai mult de punctul în care se merită acţionarea. Deoarece upgrade-ul la IE5.1/Mac a fost uşor disponibil de ceva timp, procentajul de OS9 Mac care încă folosesc IE5.0 ar trebui să fi scăzut la aproape nimic.
Variaţii
Am trecut doar prin tehnica Sliding Doors pentru a crea navigare pe tab-uri cu text curat, marcat cu o listă neordonată de link-uri, modificată cu câteva stiluri proprii. Se încarcă rapid, este uşor de menţinut, iar textul din interior poate fi scalat semnificativ în plus sau în minus, fără a distruge modelul. Trebuie să menţionăm cât de flexibilă poate fi tehnica pentru crearea oricărui tip de navigare cu aspect sofisticat?
Utilizarea acestei tehnici este limitată doar de imaginaţia noastră.  Ultimul exemplu reprezintă doar una dintre posibilităţi, dar nu ar trebui să permitem unui exemplu să creeze limite ideilor noastre.
De exemplu, tab-urile nu trebuie să fie simetrice. Am creat repede Versiunea 2 a acestor tab-uri, evitând aspectul 3D umbrit în favoarea culorilor simple, marginilor angulare şi o limită stânga mai mare şi mai detailată. Putem chiar schimba ordinea imaginilor stânga/dreapta, în funcţie de model, precum arată Versiunea 2. Cu o proiectare atentă şi manipulare inteligentă a imaginilor, bordura inferioară ar putea fi abandonată în favoarea potrivirii imaginilor tab-ului cu fundalul din spatele lor, ca în Versiunea 3, inspirată din Deco. Dacă browser-ul tău suportă înlocuirea alternativă a listelor de stilizare (Style Sheets), poţi vedea chiar şi acest master-file, schimbând între cele trei versiuni diferite prin alternarea între listele de stilizare.
Alte efecte pe care nu le abordăm aici ar putea fi adăugate peste această tehnică. În exemplul realizat, am schimbat culoarea pentru starea hover, dar ar putea fi înlocuite imagini întregi pentru a crea efecte interesante de rostogolire. Oriunde există deja două elemente HTML imbricate în markup, CSS poate fi folosit la susţinerea imaginilor de fundal pentru efecte pe care nici măcar nu am început să ni le imaginăm. În acest exemplu am creat o linie orizontală de tab-uri, dar Sliding Doors ar putea fi utilizat în multe alte situaţii. Ce poţi face cu el?

 

 

A little about us

We're not just technologists, we work in partnership with our clients and resellers offering expert advice across strategy, planning, creative design, and marketing. Our product range has been developed to work hand-in-hand with a clients existing business and can be delivered on any level that our customers choose.