Blog vebstandartista și vebrazrabotchika Yuri "Akella" Artyukhov.
Probabil unul dintre primele articole despre CSS, pe care am capturat a fost „uși glisante CSS“ (partea a doua) (original). Mi-a plăcut faptul că pentru a rezolva unele probleme cu aspectul uneori necesar, deși un pic, dar cred că în afara cutiei. Ca urmare a acestei idei (uși glisante) mi-a salvat în mod repetat timp. Aici sunt un cuplu de aplicații, din care sunteți, sper că pentru a obține o idee și poate că va ajuta pe cineva. Și, în timp ce mulți pot fi familiarizați cu ea, cu toate acestea ...
Uși glisante pe ukr.net
După ce, la un moment dat pe site-ul ukr.net, chiar și atunci când am modificat prima (versiune aici) a fost o zonă de culoare galbenă pentru a căuta, a fost stabilit în fundalul unei imagini - aceasta este o astfel de mare si arata ca acest lucru:
Mai târziu, cu toate acestea, este nevoie de o reproiectare, care acest domeniu începe să ocupe două treimi din coloana. Și acum este, în general, coloana largă de mijloc - a se vedea pentru tine:
Bineînțeles, atunci când mirosul de prima pentru a schimba lățimea am fost prea leneș pentru a redesena imaginea în lățimea dorită. Desigur, a vrut să facă un fel de lățime-independent. (Probabil pentru că am știut că lățimea sa este încă o schimbare de 10 ori). Am venit în ajutorul „ușilor glisante“.
Astfel, sarcina a fost o arie largă, cu o imagine de fundal. Cum, fără imagine re-desen, face zona deja, și, de asemenea, cu margini rotunde?
Aici a existat un cod de HTML (și acum este):
Pentru a începe cu vom defini fundalul (care este mare) pentru diva externă:
- #searchrow
- înălțime: 60 px;
- fundal: #fff url (pic / bg_search.gif) no-repeat 0 100%;
Iată care va fi:
Teritoriul nu este rotund la stânga.
Apoi se adaugă o altă formă la:
- formularul #searchrow
- înălțime: 60 px; / * la aceeași înălțime * /
- fundal: URL-ul transparent (pic / bg_search.gif) nu-repetare 0 0;
Obținem acest lucru:
Avem acum două imagini de fundal - una peste alta. Stânga pentru a împinge ușa:
Ca rezultat:
De ce aveți nevoie. forme Bloc (forma #searchrow) mutat:
Iar dacă nu sunt în măsură să picteze în Photoshop încercați să-l prezinte la postul său pe blog-ul (care va deveni totul clar), va fi lansat (în același timp blestemau mici lățimea zonei de conținut de pe blog :))
(Și aici un pic mai mult)
Dacă încercați să vă imaginați ce este - ca și cum am împins o ușă - din cauza care era mai mică lumină de fundal.
Aici, în acest fel, cu ajutorul aceeași imagine mare sa dovedit a face zona galbenă, cu margini rotunde pentru o unitate arbitrară de lungime - lățime limitată, desigur, mari imagini galbene.
Poate din cauza verbose (mnogokartinkovosti) idei de frumusete Lubrifierea bit - dar să ia o privire, liniile 3-4 SSC ne-a salvat de deschidere Photoshop. Cred că e foarte mult.
În general, este evident că prisobachit această idee (ca orice idee bună) poate fi pentru orice. Împingeți ușa și poate fi verticală. Aici, de exemplu, le-am razvidnul pe verticală. (Din nou, pentru muchii rotunde, „ușile“ sunt marcate în roșu și verde)
Este demn de amintit articolul original Doug Bauman, în cazul în care el le sparge pentru navigare. Pentru ea (ideea) cererea este suficient să se simtă, să o facă sau să fure așa cum o numesc eu. )
Dar nu este atât de dificil, și eu sunt sigur că mulți dintre ei folosit cu succes, dar sper că cineva este în continuare de ajutor.
Link-uri pe acest subiect
Am încercat să fie cât mai clar posibil, dar aici e mai multe informații despre acest subiect:
Odată cu creșterea font de groază se întâmplă :)
Cursul (mai mult de un an în urmă ca ... Dar ... culegătorie
Lenea, diplomă, de vară, de management, pentru care nu este o prioritate .... asa ca nu fi executat imediat, într-o zi totul se va elastic;)
PS Sunt încă rușine.
această tehnică nu funcționează foarte, dacă ați tăiat colțuri de fundal cu transparenta ...
Acest lucru nu este în întregime corectă. El doar un pic mai complicat.
Un al doilea exemplu de o ușă glisantă verticală cu doar unghiurile transparente. Și, în măsura în care se poate observa, activitatea de primire.
În cazul în care, în acest caz, imaginea a fost cu colțuri transparente ar fi suficiente pentru a corecta pentru fundal:
- formularul #searchrow
- fundal: #fff URL-ul transparent (pic / bg_search.gif) nu-repetare 0 0;
Și totul ar fi așa cum ar trebui.
Dacă a existat cu siguranta o nevoie de fond de gradient translucid (prin modul în al doilea exemplu este ca în FF), ar avea în continuare pokumekat. Dar obiectivul am stabilit pentru a arăta o idee, mai degrabă decât a face o soluție foarte versatil o imagine galben de toate-toate-toate :)
Dar, în linii mari, spun doar că îmi place această idee.
Poate că, în cazul transparenței megavazhnoy a imaginii galben ar fi mai convenabil, deoarece este într-un mod diferit de a-l taie. Nu există nici un panaceu.
O idee bună și foarte ușor să înțelegi explică. Eu unul a fost în paradigma captivitate ul li pentru această idee :) si acum evident lucru a devenit clar ca un trăsnet din senin.
Și ce despre transparența, astfel încât să știi de ce nu este un lucru universal, acesta va fi iepngtransparencyfix.js necesare a scrie mai mult :)
Și de ce să nu utilizați colțuri rotunjite fără a utiliza imagini?
colțuri rotunjite fără imagini - este că aveți în minte?
Și unii ar putea sugera chiar si o carte despre css?
Aproape toate cărțile sunt bune pentru a începe cu, deși o mulțime de informații este concentrat pe o astfel alistpart.com și mulți bloggeri străini. Rezervați Zeldman „Designiing Cu Web Standards“ (în limba rusă), nu este rău, celelalte cărți contemporane, în general, nu au fost încă traduse. Cărțile Dena Tsederholma le-ar fi de mare ajutor pentru a citi.
Apropo, același Cederholm în cartea sa „Bulletproof Web Design“ descrie tehnica de a crea o întindere similară de box atât pe verticală cât și pe orizontală, în același timp + și chiar și fontul nu este setat în pixeli. Aici este un exemplu, dacă sunteți interesat:
container float: stânga;
culoare: # 666;
fundal: URL-ul (imagini / rotunjit-right.gif) nu-repeta dreapta sus;
>
.Marja desc: 0;
padding: 9px 9px 0 9px;
fundal: URL-ul (imagini / rotunjit-left.gif) nu-repetare din stânga sus;
>
.link-margin: 0;
padding: 0 0 0 9px;
fundal: URL-ul (imagini / rotunjit-left.gif) fără repetare partea din stânga jos;
>
.afișare link-em: bloc;
padding: 0 9px 9px 0;
Stil de font: normal;
fundal: URL-ul (imagini / rotunjit-right.gif) fără repetare din dreapta jos;
>
.container font-size: 130%;
Culoare: # E70;
>
1.rounded-left.gif 9h200 (LxÎ)
2.rounded-right.gif 400 x 200
Nu am înțeles de ce în loc de cod xhtml a adus
Această casetă este:
Indestructibil!
Ei bine ... de fapt, este o variație pe patru divuri imbricate cu presate „colțuri“ pentru fiecare dintre ele. Ei bine, și marginalizarea pentru text în interiorul acestuia.
Vă mulțumesc foarte mult pentru articol, totul este scris în mod clar și de înțeles! Dar am strecurat în discuție: cum să facă un bloc de cauciuc? De exemplu: a face un aspect de cauciuc, cu condiția ca serie sunt câteva blocuri cu lățime fixă, iar ultima unitate ar trebui să ocupe tot spațiul rămas. Lățimea conținutului interior nu este schimbat.
Aș fi foarte recunoscător pentru răspunsul
Trebuie doar să ia aceeași imagine, dar mult mai mult decât aveți nevoie dimensiune - toate celelalte tehnici sunt aceleași.