Deoarece aspectul paginilor devine din ce în ce mai dificil, dezvoltatorii au nevoie de acces la mai multe unități de măsurători pentru a încorpora designul. În plus față de interesul obișnuit, EM și REM și pixelii există unități mai noi de măsurători VW și VH, atât VMIN, cât și Vmax legate de acestea, oferind modalități mai puternice de a crea design adaptivcare adesea poate ajuta la abandonarea utilizării punctelor de tranziție @media.
Mergem dincolo de interes
Unitățile de măsurare CSS tradiționale creează următoarele probleme în designul web:
- Unitatea procentului de măsurare nu funcționează întotdeauna, așa cum era de așteptat. Dezvoltatorii trebuie să-și amintească depozitele externe, stabilind dimensiunile elementelor. Nu trebuie să utilizați o măsură a procentului de măsurare pentru a seta înălțimea elementului corporal. Înregistrarea fontului: 50% Specifică dimensiunea textului egală cu jumătate din dimensiunea sa standard și nu stabilește dependența dintre dimensiunea textului și dimensiunea elementului său care îl conține.
- Este aproape imposibil să creați figurile formei perfecte pentru diferite dimensiuni ale ferestrei browserului. Este foarte dificil să se asigure că elementul este perfect pătrat și, în același timp, adaptiv.
Unități de măsurare VW și VH rezolvă în mare măsură toate aceste probleme.
Sprijinirea proporțiilor ideale
Folosind unități de măsurare VW și VH, este foarte ușor să creați figuri perfecte pe paginile web. Aceste unități pot fi utilizate pentru a seta dimensiunile aproape a tuturor proprietăți CSS.. Prin urmare, dacă aveți nevoie să creați un element care, cu orice fereastră de browser, este nevoie de 20% din lățimea sa și rămâne pătrată, trebuie să specificați aceleași valori ale proprietăților lățimii și înălțimii utilizând unitatea de măsurare VW:
Div.Twentysquare (fundal: # 999 ; Lățime: 20VW; Înălțime: 20VW; )
Uită-te la demonstrația acestui exemplu de mai jos, mergeți la link și încercați să modificați dimensiunea unității de vizualizare pentru a vedea modificarea dimensiunii cifrelor.
Folosind aceeași metodă, puteți crea cu ușurință un dreptunghi a cărui înălțime este de două ori mai mare decât lățimea sa cu orice dimensiune a ferestrei browserului:
Div.networect (lățime: 20VW; înălțime: 40VW;)
Setați un banner Raportul de dimensiune perfectă este foarte simplu cu următorul cod CSS:
Div.goldenrect (lățime: 100VW; înălțime: 61 .8VW; fundal: roșu;)
Pentru scalarea optimă a textului într-un bloc adaptiv, se angajează în tot volumul furnizat, trebuie doar să setați dimensiunea fontului în unitățile de măsurare VW.
Traducere - Djurka.
De la autor: Dreptunghi în interiorul dreptunghiurilor: acesta este modul în care paginile noastre web au fost întotdeauna construite. Am încercat să vă eliberați de aceste restricții pentru o lungă perioadă de timp utilizând CSS pentru a crea cifre geometrice, dar aceste cifre nu au afectat niciodată conținutul în interiorul elementelor decorate sau asupra modului în care alte elemente se află pe pagina relativ decorată.
Noua specificație CSS pentru cifre modifică poziția actuală a lucrurilor. Prezentat de Adobe la mijlocul anului 2012, își propune să ofere designerilor web abilitatea de a schimba fluxul de conținut în interiorul și în jurul cifrelor relativ complexe - ceva pe care nu l-am fi putut realiza înainte, chiar folosind JavaScript.
De exemplu, acordați atenție modului în care textul transmite imagini rotunde în următorul design. Fără cifre, textul ar avea o formă dreptunghiulară - aruncă o recepție rafinată care ridică designul la nivelul următor.
Rețineți cum textul ia o formă rotunjită de-a lungul marginilor plăcii din acest exemplu. Folosind cifrele CSS, putem crea un design similar și pentru o pagină web.
Să arătăm în detaliu modul în care funcționează cifrele și cum puteți începe să le utilizați.
Suport pentru browser.
CSS-urile sunt încă susținute numai în canarul WebKit Nightly și Chrome, dar modulul lor de nivel 1 a atins starea recomandării candidaților, astfel încât proprietățile și sintaxa definite în caietul de sarcini sunt destul de stabile. Va dura puțin timp înainte ca restul browserelor să înceapă să le mențină. Acest nivel este concentrat pe acele proprietăți ale figurilor care schimbă fluxul de conținut în jurul cifrei. În special, se concentrează asupra proprietății în afara formei și asociate cu acesta.
În combinație cu alte capabilități recente, cum ar fi tăierea și suprapunerea mască, filtrele CSS și coloanele și fuziunile, cifrele CSS ne vor permite să creăm un design deosebit mai complex, fără a fi nevoie să recurgem la editori grafici, cum ar fi Photoshop și InDesign.
Viitoarele niveluri CSS cifre vor acorda, de asemenea, atenție proiectării conținutului în interiorul cifrelor. De exemplu, astăzi, este suficient să creați pur și simplu o figură rombică pe CSS: rotiți elementul la 45 de grade și apoi rotiți conținutul în interiorul acestuia direcție inversăAstfel încât acesta este situat pe pagină orizontal. Dar conținutul din interiorul rhombului nu va lua forma corespunzătoare și va rămâne întotdeauna dreptunghiulară. Până când este implementată proprietatea formal-interior, putem face conținutul prea rombic, creând o marcaj, similar cu imaginea de mai jos.
În curând, figurile CSS vor permite, de asemenea, textul din interiorul acesteia ca aceste diamante în loc de tăiere sau utilizare a suprapunerii, textul în sine a fost localizat în raport cu marginile containerului.
Pentru a utiliza astăzi cifrele CSS în Canarul Chrome, trebuie să activați caseta de selectare care efectuează caracteristici experimentale accesibile.
Crearea cifrei CSS
Puteți aplica figura la element folosind proprietățile formelor. Treceți figura cifrei în calitatea valorii. Figura de funcții reprezintă partea codului în care treceți parametrii care definesc figura pe care doriți să o aplicați la element.
Cifrele pot fi create utilizând una dintre următoarele funcții:
Fiecare cifră este determinată de un set de puncte. Unele funcții iau puncte ca parametri; Alții - acceptați parametrii offset, dar în cele din urmă vor elabora cifre pe element ca un set de puncte. Vom analiza parametrii pentru fiecare dintre aceste funcții pe exemple.
Figura poate fi, de asemenea, determinată din imagine prin eliminarea canalului Alpha. Când imaginea este transmisă la proprietatea de formă, browserul preia figura din imagine, pe baza valorii de imagine-imagine-imagine. Cifra este determinată de pixeli, a cărei valoare a alfa este deasupra pragului specificat. Imaginea trebuie să aibă compatibilitatea CORS. Dacă motivul furnizat dintr-un anumit motiv nu este disponibil (de exemplu, nu există), atunci nu se va aplica nici o cifră.
Următoarele figuri iau funcțiile descrise mai sus ca valori:
formă-exterior: Cauzează conținutul pentru a transforma forma (în exterior)
forma-interioară: Conținutul ia forma figurii din interior
Puteți utiliza proprietatea în afara formei în combinație cu marja de formă pentru a adăuga o liniuță externă în jurul cifrei, care va muta conținutul din figură, lăsând spațiul dintre ele. De asemenea, cum și forma-exterior primește proprietatea marjei de formă, forma-interioară primește proprietatea de umplere a formei, care adaugă o liniuță internă.
Folosind proprietățile figurii sau funcției, declarând elementul formei, puteți face numai cu un cod CSS de linie:
Element (formă-exterior: cerc (); / * conținut va susține cercul setat la element * /)
Element (formă-exterior: URL (calea / la / imagine-cu-shape.png);)
Element (formă - exterior: URL (calea / la / imagine - cu formă. PNG);) |
Dar ... Dacă aplicați acest cod CSS la element, cifra nu va fi aplicată dacă nu sunt îndeplinite următoarele condiții:
Elementul trebuie să plutească. Viitoarele niveluri CSS ale cifrelor ne va permite să identificăm cifrele pentru elemente non-plutitoare, dar nu există o astfel de posibilitate.
Elementul trebuie specificat. Înălțimea și lățimea specificată de element vor fi utilizate pentru a stabili sistemul de coordonate.
După cum ați văzut în funcțiile de mai sus, cifrele sunt determinate de un set de puncte. Deoarece punctele au coordonate, browserul necesită un sistem de coordonate care să știe unde fiecare punct ar trebui să fie amplasat pe element. Astfel, exemplul ar funcționa mai sus, dacă ar avea următoarele:
Element (float: stânga; înălțime: 10EM; Lățime: 15EM; formă-exterior: cerc ();)
Element (float: stânga; înălțime: 10EM; Lățime: 15Em; formă - în afara: cerc ();) |
Cu toate acestea, sarcina anumitor dimensiuni nu este afectată de reacția sa (vom vorbi mai târziu despre aceasta). Deoarece fiecare cifră este definită ca un set de puncte situate folosind o pereche de coordonate, schimbarea coordonatelor punctului va afecta figura creată. De exemplu, următoarea figură prezintă un hexagon care poate fi creat folosind funcția Polygon (). Figura este formată din șase puncte. Schimbarea coordonatelor orizontale a punctului Orange va schimba cifra finală și va afecta, de asemenea, plasarea conținutului în interiorul / în afara oricărui element la care se aplică cifra.
Dacă elementul plutește și este egal cu marginea din dreapta, se aplică o figură, conținutul spre stânga își va schimba locația atunci când unul dintre coordonatele punctului portocaliu în interiorul funcției Polygon () va fi schimbat.
Blocul de referință Figura
Cifrele CSS sunt definite și create în blocul de referință (caseta de referință), unde figura este trasă. În plus față de înălțimea și lățimea elementului, componentele modelului bloc al cutiei de margine, cutia de conținut, cutia de padure și cutia de bordă sunt, de asemenea, directoare pentru a determina figura elementului.
În mod prestabilit, unitatea de retur externă (cutie de margine) este utilizată ca referință, astfel încât elementul la care aplicați cifra are deja o liniuță externă de jos, cifra se va termina la marginea returnării externe și nu Granita. Dacă doriți să utilizați alte valori ale unui model bloc, puteți să le specificați cu caracteristica figurii pe care le transmiteți proprietatea cifrei:
forma-afara: Cercul (250px la 50% 50%) cutia de padure;
forma - în afara: Cercul (250px la 50% 50%) - cutie de padding; |
Cuvântul cheie cu cutie de padding în această regulă determină aplicarea figurii și restricția sub formă de caseta de închidere (zona aroganței interne). Funcția Circle () determină cercul, mărimea și plasarea acestuia în raport cu elementul.
Definiția cifrelor folosind funcții
Vom începe cu faptul că vom face cu textul informativ al imaginii circulare a Avatarului utilizatorului, conform profilului de utilizator sau al rechemării.
Folosind formele CSS, textul în jurul imaginii utilizatorului este raționalizat, în loc de a salva o formă dreptunghiulară..
Vom folosi funcția cercului () pentru a aplica o formă rotundă în imaginea profilului utilizând marcajul următor:
Lorem Ipsum Dolor Sit Amet, Consertur Adipisicing Elit. Harum Itaque Nam Bandita Emiet Enim Eligendi Quae Adipisci?
Punnește BLANDIȚI VOLUPTAS TEMPORE PORRO Quibusdam Beatae Deleniti Quod Asperiores Sapiente Dolorem Eroare! Quo Nam cvasi Soluta Reprezentand Laudanț Optio Ipsam Ducimus Consequatur Enim Fuga Quibusdam Molitia Nesciunt Modi.
< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg"alt \u003d "(! Lang: imagine de profil" / > !}< p > Lorem Ipsum Dolor Sit Amet, Consertur Adipisicing Elit. Harum Itaque Nam Bandita Emiet Enim Eligendi Quae Adipisci?< / p > < p > Punnește BLANDIȚI VOLUPTAS TEMPORE PORRO Quibusdam Beatae Deleniti Quod Asperiores Sapiente Dolorem Eroare! Quo Nam cvasi Soluta Reprezentand Laudanț Optio Ipsam Ducimus Consequatur Enim Fuga Quibusdam Molitia Nesciunt Modi.< / p > |
Puteți întreba: "De ce nu putem aplica raza de frontieră pentru rotunjirea fotografiilor?" Răspuns: Proprietatea razei de frontieră nu afectează locația conținutului în interiorul și în afara elementului la care se aplică. Aceasta afectează numai frontierele elementului sau fundalului. Fundalul este tăiat pe colțurile rotunjite, toate. Conținutul din interiorul elementului va rămâne dreptunghiular, iar conținutul din afara elementului se va comporta, ca și cum elementul rămâne dreptunghiular.
Vom folosi proprietatea Radius de frontieră pentru a face imaginea rotundă - iată ce facem pentru a rotiti fotografiile sau alte elemente de pe pagină:
img (float: stânga; lățime: 150px; înălțime: 150px; Raza - Radius: 50%; Marginea - dreapta: 15px;) |
Fără cifre CSS, textul vede o imagine ca un pătrat și conectează figura pătrată și nu rotundă.
În browser, care nu acceptă forme CSS, conținutul din jurul imaginii rotunde va fi localizat ca și cum nu este rotund. Așa va arăta în browserele vechi. Pentru a schimba raționalizarea conținutului în jurul unei figuri specifice, utilizați proprietățile figurii.
img (float: stânga; lățime: 150px; înălțime: 150px; Raza de frontieră: 50%; formă-exterior: cerc (); marjă de formă: 15px;)
img (float: stânga; lățime: 150px; înălțime: 150px; Raza - Raza: 50%; formă - în exterior: cerc (); margine de formă: 15px;) |
Cu ajutorul acestui cod, textul va fi capabil să "vadă" figura rotundă aplicată imaginii și o va susține, după cum se arată pe primul ecran Schot. (Puteți privi rezultatul.) În browsere care nu acceptă cifrele, acesta va arăta ca arătat în a doua imagine.
Puteți utiliza funcția Circle () în forma pură Sau să transmită parametrii. Aici este sintaxa oficială:
cerc () \u003d cerc ([
Semnalele de întrebare arată că acești parametri sunt opționali și pot fi ratați. Parametrii pe care îi pierdeți vor lua valori implicite. Când utilizați cercul () așa cum este, în loc de indicarea directă a poziției, în mod implicit, centrul cercului va fi în centrul elementului la care îl aplicați.
Puteți seta o rază de cerc utilizând orice lungime de lungime (px, em, pt, etc.) De asemenea, puteți seta raza utilizând parametrii folosind partea cea mai apropiată sau cea mai îndepărtată, dar cea mai apropiată parte este valoarea implicită, care înseamnă că browserul va prelua distanța razei de la centrul elementului la cea mai apropiată parte, cea mai îndepărtată utilizează distanța de la centru spre partea îndepărtată.
forma-exterior: cerc (cel mai îndepărtat la 25% 25%); / * Determină cercul a cărui rază este egală cu jumătate din cea mai lungă parte situată la punctul cu 25% 25% în sistemul de coordonate * / formă-interior: cerc (250px la 500px 300px); / * Determină cercul, al cărui centru este situat în 500px orizontal și 300px vertical, cu o rază de 250px * /
Funcția Ellipse () funcționează, precum și cercul (), cu același set de valori, cu excepția faptului că, în loc de parametrul razei, este nevoie de două: o rază de-a lungul axei, cealaltă - pe axa.
ellipse () \u003d Ellipse ([
Funcția InSet () nu este legată direct de un cerc sau elipsă, este utilizat pentru a crea forme dreptunghiulare în interiorul elementului. Deoarece elementele sunt ambele dreptunghiulare, nu este necesar să se creeze dreptunghiuri. În schimb, insetarea () ne poate ajuta să creăm dreptunghiuri cu colțuri rotunjite, astfel încât conținutul curge în colțurile rotunjite.
Funcția InSet () preia de la unii la patru parametri de offset, care determină decalajul în raport cu marginile unității de referință, care determină locația dreptunghiului în interiorul elementului. Colțurile rotunjite sunt indicate exact în același mod ca și raza de frontieră, folosind una din cele patru valori, în combinație cu runda cheie de cuvinte cheie.
insert () \u003d Insert (offset (1,4)?)
insert () \u003d Insert (offset (1, 4) [Runda< border - radius > ] ? ) |
Următorul cod va crea un dreptunghi cu colțuri rotunjite pe un element plutitor.
Element (float: stânga; lățime: 250px; înălțime: 150px; formă-exterior: inset (0px rotund 100px) border-cutie;)
Element (float: stânga; lățime: 250px; înălțime: 150px; forma - în afara: inset (0px rotund 100px) Border - cutie;) |
Ultima caracteristică a cifrelor este poligon (), care definește cifre mai complexe ambigue folosind orice număr de puncte. Funcția are un set de coordonate de abur, în care fiecare pereche determină poziția punctului.
În exemplul următor, imaginea plutitoare este situată la marginea dreaptă, ocupând întreaga înălțime a ecranului și utilizând vederile ferestrei de vizualizare. Vrem ca textul la stânga alpinismului din interiorul imaginii și folosim funcția Polygon () pentru a determina figura non-standard pentru imagine.
CSS Codul pentru imaginea de mai sus este după cum urmează:
img.right (float: dreapta; înălțime: 100VH; Lățime: Calc (100VH + 100VH / 4); Forma-exterior: Poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%);)
img. Dreapta (float: dreapta; înălțime: 100VH; Lățime: Calc (100VH + 100VH / 4); Forma - exterior: Poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);) |
Puteți seta coordonatele punctelor care determină figura în unități de lungime sau procentaj, ca mine. Acest cod va da rezultatul necesar, dar după cum vedeți, funcția figurii nu afectează părțile rămase ale imaginii în afara cifrei specificate. Faptul este că utilizarea funcției figurii la element - fie că este o imagine sau un recipient sau altceva - nu va afecta altceva decât zona de raționalizare a conținutului. Fundal, frontiere și orice altceva vor rămâne neschimbate.
Pentru a trimite vizual poligonul creat, trebuie să "îndreptați" părți ale imaginii din afara figurii. Acest lucru ne va ajuta proprietatea Clip-Path din specificația modulului de mascare CSS.
Proprietatea Clip-Path ia aceleași funcții ale formei și semnificația ca proprietatea figurii. Dacă dăm aceeași figură poligonală pe care am folosit-o pentru proprietatea în afara formei, proprietatea Clip-Path, va dota partea din imaginea din afara cifrei.
img.right (float: dreapta; înălțime: 100VH; Lățime: Calc (100VH + 100VH / 4); Forma-exterior: Poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%); / * Îndepărtarea imaginilor pe conturul Figura * / Clip-Cale: Polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% % 40%);)
img. Dreapta (float: dreapta; înălțime: 100VH; Lățime: Calc (100VH + 100VH / 4); Forma - exterior: Poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); / * Trimirea imaginilor pe conturul Figura * /clip - Polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); ) |
Rezultatul arată astfel:
Proprietatea Clip-Path este încă acceptată împreună cu prefixele, adică Va funcționa în Chrome cu adăugarea de prefix -webkit. Poți să te uiți la demo.
Proprietatea Clip-Path este un sateliți minunați pentru figura cifrei, deoarece ajută la prezentarea vizuală a formelor create și a părților de recoltare în afara figurii, astfel încât să fiți foarte des folosit pentru a le folosi împreună.
Funcția Polygon () acceptă, de asemenea, opțional cuvânt cheie. Pentru a umple, care poate fi fie nonzero, fie uniformă. Acesta definește modul în care se vor comporta zonele intersectate din interiorul poligonului. Verificați proprietatea SVG de umplere pentru detalii.
Definirea unei figuri folosind o imagine
Pentru a seta cifra utilizând imaginea, canalul alfa trebuie să fie prezent în imagine, din care browserul va extrage imaginea.
Figura este determinată de pixeli a căror valoare alfa este mai mare decât un anumit prag. Valoarea implicită a pragului este OK (complet transparentă) sau îl puteți specifica direct utilizând proprietatea de imagine-imagine-imagine. Astfel, orice pixel opac poate fi utilizat ca parte a figurii definite de imagine.
Cifrele CSS de nivel viitoare pot permite trecerea la utilizarea datelor luminozității imaginii în loc de canal alfa. Dacă se întâmplă acest lucru, pragul de imagine-imagine va fi extins pentru a include un prag sau pentru luminozitate sau pentru canalul alfa, în funcție de starea comutatorului.
Folosim imaginea următoare pentru a determina figura elementului și a forța textul să se susțină:
Desigur, dacă ați aplicat fundalul elementului, fundalul va trebui să se deconecteze în afara cifrei specificate. Proprietatea imaginii de mască (cu prefixele corespunzătoare) de la modulul măștilor poate ajuta în acest sens, deoarece proprietatea Clip-Path nu acceptă valoarea canalului alfa ca valoare. Rezultatul arată astfel:
Dacă creați cifre complexe, este posibil să fiți convenabil să setați cifra utilizând imaginea. Acest lucru va permite utilizarea canalului de imagine alfa în Photoshop, în loc de stabilirea manuală a punctelor.
De asemenea, veți fi convenabil să utilizați imaginea în locul funcției figurii atunci când aveți multe elemente plutitoare sau ați încălzit excepții în interiorul elementului - pentru că acest moment Nu există posibilitatea de a declara mai multe cifre la un element. Dar dacă imaginea conține mai multe zone, browserul va elimina aceste zone și le utilizează.
CSS cifre în designul receptiv
Poate cifrele CSS să vină pentru un design receptiv? Specificația actuală pentru forma-exterior include acest moment, deoarece vă permite să setați dimensiunea elementului sau în procente sau în unități de lungime și punctele care definesc figura (parametrii funcției Figura) pot fi de asemenea specificate ca procent. Aceasta înseamnă că un element cu o expresie dată poate fi complet receptiv, precum și orice element plutitor cu dimensiuni specificate în procente.
Proprietatea din interiorul din interior nu este încă receptivă, dar se datorează faptului că acesta a fost mutat la un modul de nivel 2. Multe dintre restricțiile actuale vor merge la nivelul următor.
Instrumente pentru crearea de cifre
Crearea de figuri complexe care utilizează funcții poate fi o sarcină consumatoare de timp, mai ales dacă creați o cifră cu o multitudine de puncte și coordonate folosind Polygon (). Din fericire, echipa de platformă web Adobe lucrează la producția de instrumente interactive pentru a face acest proces mult mai ușor. Bear Travis a creat o colecție de instrumente pentru crearea de cifre care ne permite să creăm vizual figuri poligonale. Instrumentul generează funcția figurii. Poate fi utilă, dar are limitările sale dacă doriți să creați o cifră bazată pe o imagine specifică, deoarece instrumentul nu oferă o astfel de oportunitate.
Un instrument mai avansat și interactiv a fost dezvoltat de platforma Adobe Web. Instrumentul a fost recent lansat ca o extensie pentru editorul gratuit al parantezelor. Vă permite să vizualizați și să editați formele chiar în browser și aveți posibilitatea de a previzualiza online, care actualizează valorile formei în tabelul de stil când le schimbați pe pagină. Oferă o vizuală instantanee părere Modificările dvs., permițându-vă să vedeți cum interacționează cifrele cu alte elemente de pe pagină.
Editarea unei figuri poligonale chiar în browser utilizând modul de previzualizare în paranteze. Ecranul de intrare Made Razvan Caliman.
Acest instrument va deveni indispensabil, deoarece facilitează crearea, editarea și debarcarea cifrelor. Razvan Caliman, care explică modul de a apela editorul de formă în paranteze și începeți să îl utilizați.
Viitor: excepții CSS
Specificația CSS a cifrelor a fost o specificație dedicată cifrelor și excepțiilor CSS, dar a fost împărțită. În timp ce cifra CSS specifică proprietățile din interiorul interior și în afara formei, excepția CSS definește proprietățile care determină conținut pentru a suferi elemente non-plutitoare, de exemplu, având poziționare absolută. Ele fac posibilă întărirea întregii figuri cu conținutul din diferite părți, așa cum se arată în imaginea de mai jos.
În viitor, excepțiile CSS vor permite conținutului să se adreseze unei astfel de cifre ca o tăietură, așa cum se arată la rândul revistei. Cuprul poate fi, de asemenea, rotund, iar textul o va atinge de asemenea..
Nivel nou de cifre
Actuala specificație CSS a cifrelor este doar primul pas. În curând, noi oportunități ne vor oferi mai multe controale. Este necesar să se creeze și să consolideze conținutul, deci va fi mai ușor să ne întoarcem layouts într-un design viu cu ajutorul doar câteva linii de cod. Până în prezent, editorii de specificații se concentrează pe finalizarea formei-exterioare și puteți vedea suportul cifrelor CSS cantitate mare browsere până la sfârșitul anului 2014.
Puteți utiliza astăzi cifrele ca parte a strategiei progresive de îmbunătățire, știind că au o înlocuire acceptabilă în browserele non-susținute. Recent am început să le aplic pe site-ul meu, iar înlocuirea pare destul de acceptabilă. Pentru un design mai complex, puteți utiliza un script pentru a verifica suportul browserului și pentru a oferi orice înlocuire dacă nu există niciun suport. De asemenea, puteți utiliza testele modernizer utilizând acest script pentru a verifica dacă proprietatea în exterior este menținută sau descărcați asamblarea proprie care include acest test.
CV-urile CSS ne permit să creăm o altă punte între imprimare și design web. Exemplele din acest articol sunt simple, dar ar trebui să vă dea baza pentru crearea unui design comparabil cu o revistă sau un poster, fără a vă îngrijora dacă îl puteți recrea pe ecran. Așa că ați studiat - de la mărcile non-dreptunghiulare la animația cifrelor - acum timpul experimentelor.
Vlad Merzehevich.
Pe site-uri, triunghiurile sunt aplicate la toate și aproape ca parte a elementelor de proiectare, de exemplu, ele servesc drept pointer la un anumit obiect, direcționând atenția cititorului la locul potrivit. De asemenea, triunghiurile efectuează funcții decorative, făcând blocuri în care sunt folosite, mai elegante și mai moderne. În fig. 1 prezintă un exemplu de utilizare a unui triunghi în design.
Smochin. 1. triunghiuri în design web
Faceți direct un triunghi instrumente CSS. Este imposibil, deci două metode vă permit să adăugați la frontieră și să transformați.
Folosind granița.
Deși granițele create prin proprietatea de frontieră nu sunt direct legate de triunghiuri, este vorba de graniță pentru acest lucru cel mai des. Dacă setați lățimea zero și înălțimea elementului, precum și instalați o margine suficient de gros, vom vedea un set de patru triunghiuri (figura 2). Pentru claritate, limitele din toate părțile sunt setate diferite culori.
Smochin. 2. Adăugarea frontierei la element
Lăsând doar granița dorită, iar restul făcând transparent, obținem triunghiul culorii dorite (figura 3).
Smochin. 3. Element cu frontiere transparente
Exemplul 1 prezintă adăugarea unui triunghi la bloc printr-un element de pseudo :: retoferter.
Exemplu 1. Blocați cu triunghi
Pentru elementele absolut poziționate, nu este necesară lățimea și înălțimea zero.
Datorită combinației de frontiere, puteți obține încă patru tipuri de triunghiuri, care, în combinație cu deja menționate, ne oferă opt opțiuni. Aspectul lor și codul necesar sunt prezentate în tabel. unu.
| Vedere | Stil |
|---|---|
| frontieră: 20px solid transparent; Border-top: 20px verde solid; | |
| frontieră: 20px solid transparent; Border-dreapta: verde de 20px solid; | |
| frontieră: 20px solid transparent; Bordul de frontieră: verde solid 20px; | |
| frontieră: 20px solid transparent; Frontieră-stânga: verde solid 20px; | |
| frontieră: 20px solid transparent; Border-top: 20px verde solid; Border-dreapta: verde de 20px solid; | |
| frontieră: 20px solid transparent; Border-dreapta: verde de 20px solid; Bordul de frontieră: verde solid 20px; | |
| frontieră: 20px solid transparent; Bordul de frontieră: verde solid 20px; Frontieră-stânga: verde solid 20px; | |
| frontieră: 20px solid transparent; Frontieră-stânga: verde solid 20px; Border-top: 20px verde solid; |
Din tabel, se poate observa că limitele invizibile ocupă un loc, ia în considerare atunci când poziționarea elementelor. Stilul, de asemenea, este necesar să adăugați o lățime zero și o înălțime sau să utilizați proprietatea de poziție, așa cum sa făcut în exemplul 1.
Triunghiul poate fi făcut de o altă formă, dacă setați grosimea diferită a limitelor. Deci, codul pentru crearea unui bloc prezentat în fig. 4 este prezentată în exemplul 2.
Smochin. 4. Triunghiul acut
Exemplul 2. Un triunghi ascuțit
Cu granița, obținem triunghiuri colorate solide, pentru a crea un cadru prezentat în fig. 5 trebuie să meargă la viclenie și să impună un element deasupra altui cu o mică deplasare. Din nou, elementele Pseudo ne vor ajuta: înainte și după: după (Exemplul 3).
Smochin. 5. Cadru cu colț
Exemplul 3. Triunghiuri suprapuse
Datorită faptului că aplicăm un singur element pe altul, această metodă este potrivită numai pentru umplerea monotonă și nu este adecvată pentru gradienți sau imagini de fundal.
Utilizarea transformării
Cu ajutorul transformării, putem roti elementul pătrat cu 45 ° și obținem un romb de el. Acesta nu este un triunghi ca atare, așa că trebuie să lăsăm părțile proeminente și restul ascunde după un alt element (exemplul 4).
Exemplul 3. Transformarea
Rezultatul acestui exemplu este prezentat în fig. 6.
Smochin. 6. Triunghi cu umbra
Generator CSS3 online pentru a crea efecte grafice abrupte și obținerea codului CSS. Puteți schimba separat stilurile pentru diferite state, cum ar fi: Hover, activ, etc. Mâinile dvs. primește o interfață pentru crearea de umbre complexe, gradienți, efecte 3D, efecte cu text și multe altele. Proiectul are efecte proprii de la care vă puteți începe dezvoltarea. O caracteristică distinctă a proiectului este că puteți obține stiluri pentru element separatDe exemplu, pentru o umbră sau un gradient.
Când introduceți mai întâi site-ul, ne oferim să creăm un gol pentru câmpul de intrare, butoanele, blocați sau selectați un model gata realizat din galeria de proiect. Să începem cu ceva simplu, de exemplu, din galeria figurilor geometrice. Alegeți din galeria semnați Yin-Yang și faceți clic pe "Obțineți codul" în colțul din dreapta sus:
Va fi afișată CSS gata pentru dezvoltarea actuală, precum și pentru dezvoltarea actuală un exemplu de HTML Cod. Galeria de proiect are chiar mai mult de 20 de semne pentru diferite cifre CSS și, desigur, vă puteți crea propria dvs.
Pasul secțiunii Galerie Vedem butoanele, câmpuri de text, Efecte direct pentru text, cifrele și seturile de gradiente menționate mai sus. Noi jucăm cu efectele textului:
site - Wow este 3D!
Ar trebui să observăm că CSS generate este surprinzător de foarte curat și citit, care este foarte mulțumit. Să ne uităm la un fel de buton drăguț:
butonul Site Cool.
Caracteristicile suplimentare includ salvarea stării dvs. în browserul localStorage. Dacă ați închis accidental fila, apoi data viitoare când vă aflați la site, toate modificările vor rămâne cu dvs.
Când utilizați fonturi non-standard cu Google Fonturi. BUILDSS le adaugă automat ca un exemplu de HTML. În cazul meu, pentru textul și butoanele arată astfel:
Final CSS este destul de voluminos, așa că îl aduc numai la sfârșitul articolului:
Yin Yang (
Plutește la stânga;
Lățime: 96px;
Înălțime: 48px;
Poziție: rudă;
Frontieră: 2px solid # F81;
Lățimea de fund a frontierei: 50px;
-Bidius-Raza de frontieră: 100%;
Raza de frontieră: 100%;
Culoare: RGBA (0,0,1);
-O-text-overflow: clip;
Text-overflow: clip;
-Webkit-transformare: Rotatez (-45DEG) scalex (1) scalea (1);
Transformare: Rotatez (-45DEG) Scalex (1) Scaley (1) Scalez (1);
Transformare-origine: 50% 50% 0;
Yin-yang: înainte (
Lățime: 12px;
Înălțime: 12px;
Poziție: absolută;
Conținut: "";
Top: 50%;
stânga: 0;
Frontieră: 18px solid # F81;
-Bidius-Raza de frontieră: 100%;
Raza de frontieră: 100%;
Font: normale normale normale 100% / aria normală, Helvetica, Sans-Seif;
Culoare: RGBA (0,0,1);
-O-text-overflow: clip;
Text-overflow: clip;
Fundal: RGBA (255,255,255,1);
Umbra de text: Nici unul;
-Webit-transformare-origine: 50% 50% 0;
Transformare-origine: 50% 50% 0;
}
Yin-yang :: după (
Lățime: 12px;
Înălțime: 12px;
Poziție: absolută;
Conținut: "";
Top: 50%;
Stânga: 50%;
Frontieră: 18px solid RGBA (255,255,25,1);
-Bidius-Raza de frontieră: 100%;
Raza de frontieră: 100%;
Font: normale normale normale 100% / aria normală, Helvetica, Sans-Seif;
Culoare: RGBA (0,0,1);
-O-text-overflow: clip;
Text-overflow: clip;
Fundal: # F81;
Umbra de text: Nici unul;
-Webit-transformare: scalex (1) scalea (1) scalz (1);
Transformare: Scalex (1) Scaley (1) Scalez (1);
-Webit-transformare-origine: 50% 50% 0;
Transformare-origine: 50% 50% 0;
}
Bucurați-vă-CSS-3DTEXT (
Cursor: pointer;
Frontieră: nici unul;
Font: normal normal normal 72px / normal "trecător", Helvetica, Sans-Seif;
Culoare: RGBA (255,255,255,1);
Text-align: centru;
-O-text-overflow: clip;
Text-overflow: clip;
Text-umbra: 0 1px 0 RGB (204.204444), 0 2px 0 RGB (201.201.201), 0 3px 0 RGB (187,187,187), 0 4px 0 RGB (185,185,185), 0 5px 0 RGB (170,170,170), 0 6px 1px RGBA (0 0.0,0980392), 0 0 5px RGBA (0,0,0,0,0980392), 0 1px 3px RGBA (0,0,0,0,298039), 0 3px 5px RGBA (0,0,0,0, 0,2), 0 5px 10px RGBA (0.0.0.0.247059), 0 10px 10px RGBA (0.0.0.0.2), 0 20px 20px RGBA (0,0,0,0,0,14902);
-Webkit-tranziție: toate 300ms cubic-bezier (0,42, 0, 0,58, 1);
-Moz-tranziție: toate cubic-bezier 300ms (0,42, 0, 0,58, 1);
-O tranziție: Toate 300ms cubic-bezier (0,42, 0, 0,58, 1);
Tranziție: Toate 300ms cubic-bezier (0,42, 0, 0,58, 1);
-Webit-transformare: scalex (1) scalea (1) scalz (1);
Transformare: Scalex (1) Scaley (1) Scalez (1);
-Webit-transformare-origine: 50% 50% 0;
Transformare-origine: 50% 50% 0;
}
Bucurați-vă de CSS-3DText: Hover (
Culoare: RGBA (169,214,169,1);
Umbra de text: 0 1px 0 RGBA (255,255,25,1,1), 0 2px 0 RGBA (255,255,25,1,1), 0 3px 0 RGBA (255,255,25,1,1,25,2,25 , 2,1,25,25,25,1,2,1,25,1), 0 5px 0 RGBA (255,255,255, 1), 0 6px 1px RGBA (0,0,0,0,0980392), 0 0 5px RGBA (0,0,0,0,0980392), 0 1px 3px RGBA (0,0,0,0,0,0,98039), 0 3px 5px RGBA (0,0,0,0,0,2), 0 - 5px 10px RGBA (0,0,0,0,247059), 0 -7px 10px RGBA (0,0,0,0,0,2), 0 -15px 20px RGBA (0,0, 0.0.14902);
-Webit-tranziție: toate 200ms cubic-bezier (0,42, 0, 0,58, 1) 10ms;
-Moz-tranziție: toate 200ms cubic-bezier (0,42, 0, 0.58, 1) 10ms;
-O tranziție: toate 200ms cubic-bezier (0,42, 0, 0,58, 1) 10ms;
Tranziție: toate 200ms cubic-bezier (0,42, 0, 0,58, 1) 10ms;
}
Feedback-buton (
Afișaj: Inline-bloc;
Plutește la stânga;
Poziție: rudă;
Cursor: pointer;
Marja: 0 2% 0 0;
Padding: 12px 22px;
Depășirea: ascunsă;
Frontieră: nici unul;
Font: normal normal Bold 1.6Em / normal "sincopat", Helvetica, Sans-Seif;
Culoare: # ECF0F1;
-O-text-overflow: clip;
Text-overflow: clip;
-Webkit-
Fundal-origine: padding-cutie;
Fundal-clip: cutie de frontieră;
Dimensiune de fundal: Auto auto;
-Webkit-Box-umbra: 0 10px 0 0 RGBA (178,49,49,1);
Box-umbra: 0 10px 0 0 RGBA (178,49,49,1);
Text-umbra: 0 0 0 RGB (196,80,78), 1px 1px 0 RGB (196,80,78), 2px 2px 0 RGB (196,80,78), 3px 3px 0 RGB (196,80,78 ), 4px 4px 0 RGB (196,80,78), 5px 5px 0 RGB (196,80,78), 6px 6px 0 RGB (196,80,78), 7px 7px 0 RGB (196,80,78), 8px 8px 0 RGB (196,80,78), 9px 9px 0 RGB (196,80,78), 10px 10px 0 RGB (196,80,78), 11px 11px 0 RGB (196,80,78), 12px 12px 0 RGB (196,80,78), 13px 13px 0 RGB (196,80,78), 14px 14px 0 RGB (196,80,78), 15px 15px 0 RGB (196,80,78), 16px 16px 0 RGB (196,80,78), 17px 17px 0 RGB (196,80,78), 18px 18px 0 RGB (196,80,78), 19px 19px 0 RGB (196,80,78), 20px 20px 0 RGB (196 80,78), 21px 21px 0 RGB (196,80,78), 22px 22px 0 RGB (196,80,78), 23px 23px 0 RGB (196,80,78), 24px 24px 0 RGB (196,80, 78) , 25px 25px 0 RGB (196,80,78), 26px 26px 0 RGB (196,80,78), 27px 27px 0 RGB (196,80,78), 28px 28px 0 RGB (196,80,78), 29px 29px 0 RGB (196,80,78), 30px 30px 0 RGB (196,80,78), 31px 31px 0 RGB (196,80,78), 32Px 32px 0 RGB (196,80,78), 33Px 33Px 0 RGB ( 196,80,78), 34px 34px 0 RGB (196,80,78 ), 35px 35px 0 RGB (196,80,78), 36px 36px 0 RGB (196,80,78), 37px 37px 0 RGB (196,80,78), 38px 38px 0 RGB (196,80,78), 39px 39px 0 RGB (196,80,78), 40px 40px 0 RGB (196,80,78), 41px 41px 0 RGB (196,80,78), 42px 42px 0 RGB (196,80,78), 43px 43px 0 RGB (196,80,78), 44px 44px 0 RGB (196,80,78), 45px 45px 0 RGB (196,80,78), 46px 46px 0 RGB (196,80,78), 47px 47px 0 RGB (196.80.78), 48px 48px 0 RGB (196,80,78), 1px 1px 0 RGBA (196,80,78,0,980392), 2px 2px 0 RGBA (196,80,78,0,0,960784), 3px 3px 0 RGBA (196,80,78,0,941176), 4PX 4PX 0 RGBA (196,80,78,0,921569), 5px 5px 0 RGBA (196,80,78,0,901961), 6px 6px 0 RGBA (196.80.78 0.882353), 7px 7px 0 RGBA (196.80.78.0.862745), 8px 8px 0 RGBA (196,80,78,0,78,43137), 9px 9px 0 RGBA (196,80,78,0,0,819608), 10px 10px 0 RGBA (196,80,78, 0.8), 11px 11px 0 RGBA (196,80,78,0,780392), 12px 12px 0 RGBA (196,80,78,0,760784), 13px 13px 0 RGBA (196,80,78,0,0,0,0, 0,0,741,11,80,78,0,0,064,1176), 14px 14px 0 RGBA (196,80,78,0,721569), 15px 15px 0 RGBA (196,80,78,0,701961), 16px 16px 0 RGBA ( 196,80,78,0 .682353), 17px 17px 0 RGBA (196,80,78,0,0658824), 18px 18px 0 RGBA (196,80,78,0,0639216), 19px 19px 0 RGBA (196,80,78,0,0619608 ), 20px 20px 0 RGBA (196,80,78,0,6), 21px 21px 0 RGBA (196,80,78,0,580392), 22Px 22px 0 RGBA (196,80,78,0,78,0784), 23Px 23Px 0 RGBA (196,80,78,0,0,541176), 24px 24px 0 RGBA (196,80,78,0,521569), 25px 25px 0 RGBA (196,80,78,0498039), 26Px 26px 0 RGBA (196,80,78,0478431), 27px 27px 0 RGBA (196, 80,78,0,458824), 28Px 28px 0 RGBA (196,80,78,0,939216), 29px 29px 0 RGBA (196,80,78,0. 419608), 30px 30px 0 RGBA (196,80,78,0,4), 31px 31px 0 RGBA (196,80,78,0,380392), 32Px 32Px 0 RGBA (196,80,78,0360784), 33px 33px 0 RGBA (196,80, 78,0.341176), 34Px 34px 0 RGBA (196,80,78,0317647), 35Px 35px 0 RGBA (196,80,78,0,98039), 36Px 36px 0 RGBA (196,80,78,0,278431) 37px 37px 0 RGBA (196.80.78.0.258824), 38px 38px 0 RGBA (196,80,78,0,239216), 39px 39px 0 RGBA (196,80,78,0,219608), 40px 40px 0 RGBA (196, 80,78,0,2), 41px 41px 0 RGBA (196,80,78,0,080392), 42px 42px 0 RGBA (196,80,78,0,156863), 43px 43px 0 RGBA (196,80,78,0,7255), 44px 44px 0 RGBA (196,80,78 , 017647), 45px 45px 0 RGBA (196,80,78,0,980392), 46px 46px 0 RGBA (196,80,78,0784314), 47px 47px 0 RGBA (196,80, 78,0788235), 48px 48px 0 RGBA (196,80,78 , 0,792157), 50px 50px 0 RGBA (196,80,78,0);
-Webit-transformare: scalex (1) scalea (1) scalz (1);
Transformare: Scalex (1) Scaley (1) Scalez (1);
-Webit-transformare-origine: 50% 50% 0;
Transformare-origine: 50% 50% 0;
}
Feedback-buton: Hover (
Text-align: centru;
Fundal: -webit-linear-gradient (-90deg, # CE6161 0, # EF6664 100%);
Fundal: -moz-linear-gradient (180DEG, # CE6161 0, # EF6664 100%);
Fundal: Linear-Gradient (180DEG, # CE6161 0, # EF6664 100%);
Poziția de fundal: 50% 50%;
Fundal-origine: padding-cutie;
-Webkit-fundal-clip: border-cutie;
Fundal-clip: cutie de frontieră;
-Webit-fundal-dimensiune: auto auto;
Dimensiune de fundal: Auto auto;
}
Feedback-buton: activ (
Top: 5px;
Fundal: -webit-linear-gradient (-90deg, # FF8583 0, # FF5350 100%);
Fundal: -moz-linear-gradient (180DEG, # FF8583 0, # FF5350 100%);
Fundal: Gradient linear (180DEG, # FF8583 0, # FF5350 100%);
Poziția de fundal: 50% 50%;
-Webit-fundal-origine: cutie de padding;
Fundal-origine: padding-cutie;
-Webkit-fundal-clip: border-cutie;
Fundal-clip: cutie de frontieră;
-Webit-fundal-dimensiune: auto auto;
Dimensiune de fundal: Auto auto;
-Webkit-Box-umbra: 0 5px 0 0 RGBA (178,49,49,1);
Box-umbra: 0 5px 0 0 RGBA (178,49,49,1);
