Budući da raspored stranica postaje sve teže, programerima trebaju pristup više mjerenja za utjelovljuje dizajn. Pored uobičajenog interesa, EM i REM-a, i piksela, postoje novije jedinice mjerenja VW i VH, i VMIN i VMAX povezani sa njima, pružajući snažnije načine za stvaranje adaptivni dizajnšto često može pomoći u napuštanju upotrebe @Media tranzicijske točke.

Mi idemo van kamata

Tradicionalne Mjerne jedinice CSS-a stvaraju sljedeće probleme u web dizajnu:

• Jedinica mjernog procenta ne radi uvijek, kao što se očekivalo. Programeri se moraju sjetiti vanjskih naslaga, postavljanje dimenzija elemenata. Ne biste trebali koristiti mjeru postotka mjerenja da biste postavili visinu karoserije. Snimanje fontova: 50% određuje veličinu teksta jednaka polovici njegove standardne veličine i ne uspostavlja ovisnost između veličine teksta i veličine njenog elementa koji ga sadrže.
• Gotovo je nemoguće stvoriti figure savršenog obrasca za različite veličine prozora preglednika. Vrlo je teško osigurati da je element savršeno kvadrat i istovremeno adaptivan.

Jedinice mjerenja VW i VH u velikoj mjeri rješavaju sve ove probleme.

Podrška idealnim proporcijama

Korištenje mjernih jedinica VW i VH, vrlo je jednostavno stvoriti savršene brojke na web stranicama. Ove se jedinice mogu koristiti za postavljanje dimenzija gotovo svih cSS svojstva. Stoga, ako trebate stvoriti element koji, sa bilo kojim prozorom preglednika, potrebno je 20% njegove širine i ostaje kvadrat, morate odrediti iste vrijednosti svojstva širine i visine pomoću VW mjerne jedinice:

Div.twentysquare (pozadina: # 999 ; Širina: 20VW; Visina: 20VW; )

Pogledajte demonstraciju ovog primjera u nastavku, idite na vezu i pokušajte promijeniti veličinu jedinice za gledanje da biste vidjeli promjenu u veličini figura.

Koristeći istu metodu, lako možete stvoriti pravokutnik čija je visina dvostruko više od njegove širine s bilo kojom veličinom prozora preglednika:

Div.networect (širina: 20VW; visina: 40VW;)

Postavljanje banera Omjer savršene veličine je vrlo jednostavan sa sljedećim CSS kodom:

Div.goldenrect (širina: 100VW; visina: 61 .8vw; pozadina: crvena;)

Za optimalno skaliranje teksta u adaptivnom bloku, uključite se u svu glasnoću koja mu je pružena, samo trebate postaviti veličinu fonta u VW mjernim jedinicama.

Prevod - Djurka

Od autora: Pravokutnik unutar pravokutnika: Ovako su se uvijek izgrađene naše web stranice. Pokušali smo se osloboditi od ovih ograničenja, koristeći CSS za stvaranje geometrijskih figura, ali ove brojke nikada nisu utjecale na sadržaj koji se nalazi u uređenim elementima, ili na način na koji se drugi elementi nalaze na stranici relativno uređene.

Nova CSS specifikacija za brojke mijenja trenutni položaj stvari. Predstavljen od Adobe sredinom 2012. godine, ima za cilj dati web dizajnere mogućnost promjene potoka sadržaja unutar i oko relativno složenih figura - nešto što nismo mogli postići, čak i koristiti JavaScript.

Na primjer, obratite pažnju na način na koji tekst toče okrugle slike u sljedećem dizajnu. Bez brojki, tekst bi imao pravokutni oblik - bacanje rafiniranog prijema koji postavlja dizajn na sljedeći nivo.

Imajte na umu kako tekst zauzima zaobljeni oblik duž ivica tanjira u ovom primjeru. Korištenje CSS brojki, možemo stvoriti sličan dizajn i za web stranicu.

Pogledajmo detaljno kako figure rade i kako možete početi koristiti.

Podrška preglednika

Floke CSS-a i dalje su podržane samo u WebKit noćnom i kromiranom kanaru, ali njihov nivo nivoa 1 dostigao je status preporuke kandidata, tako da su svojstva i sintaksa definirani u specifikaciji prilično stabilni. Proći će malo vremena prije nego što će ostatak preglednika početi održavati ih. Ova razina je koncentrirana na one svojstva figura koji mijenjaju tok sadržaja oko slike. Konkretno, koncentrira se na nekretninu iz oblika i povezana s njim.

U kombinaciji s drugim nedavnim mogućnostima, kao što su obrezivanje i prekrivanje maske, CSS filtri i prizor i spajanje, CSS figure omogućit će nam da stvorimo složeniji izvrsni dizajn bez da se pribjegavamo grafičkim urednicima, kao što su Photoshop i Indesign.

Future CSS razine figure također će obratiti pažnju na dizajn sadržaja unutar figura. Na primjer, danas je dovoljno jednostavno stvoriti robnicu na CSS-u: Samo okrenite element na 45 stepeni, a zatim uključite sadržaj unutar njega u obrnuti smjerTako da se nalazi na stranici horizontalno. Ali sadržaj unutar romba neće poduzeti odgovarajući oblik i uvijek će ostati pravokutni. Do trenutka kada se njihova nekretnina u obliku oblika može izvršiti sadržaj previše rotic, kreirati marku, slično slici ispod.

Uskoro će CSS brojke također omogućiti tekst iznutra kao ovi dijamanti na umjesto obrezivanja ili korištenjem preljeva, sam tekst bio je smješten u odnosu na rubove kontejnera.

Da biste danas koristili FIGURE CSS-a u Chrome kanarini, morate omogućiti potvrdni okvir koji čini dostupne eksperimentalne karakteristike.

Izrada CSS figure

Možete nanijeti figuru u element pomoću svojstava oblika. Prenosite lik figure u kvaliteti vrijednosti. Funkcionalna figura je dio koda na kojem prenosite parametre koji definiraju figuru koju želite primijeniti na stavku.

Brojke se mogu kreirati pomoću jedne od sljedećih funkcija:

Svaka brojka određuje se skup tačaka. Neke funkcije preuzimaju bodove kao parametre; Drugi - Prihvatite offset parametre, ali oni će na kraju izvući brojke na elementu kao skup točaka. Analizirat ćemo parametre za svaku od ovih funkcija na primjerima.

Na slici se može odrediti i sa slike uklanjanjem alfa kanala. Kada se slika prenosi na svojstvo oblika, preglednik dohvaća licu iz slike na osnovu vrijednosti praga slike na obliku slova. Na slici se određuje pikselima, od kojih je alfa vrijednost iznad navedenog praga. Slika mora imati kompatibilnost CORS-a. Ako se razlog iz nekog razloga nije dostupan (na primjer, ne postoji), tada se ne primjenjuje nikakva brojka.

Sljedeće brojke uzimaju gore opisane funkcije kao vrijednosti:

oblik vani: uzrokuje da sadržaj okrene oblik (van)

oblik - iznutra: Sadržaj preuzima oblik figure iznutra

Možete koristiti nekretninu oblika u kombinaciji sa oblikovanjem oblika da biste dodali vanjski uvlačenje oko slike, što će pomaknuti sadržaj sa slike, ostavljajući prostor između njih. Takođe, kako i oblikovanje izvana prima svojstvo marža oblika, unosom oblika prima svojstvo oblika obloga, što dodaje interni uvlaka.

Koristeći svojstva slike ili funkcije, proglašavanje elementa oblika, možete učiniti samo s jednim linijama CSS koda:

Element (oblika vani: krug (); / * Sadržaj će se odrediti krug postavljen na element * /)

Element (oblika vani: URL (staza / do / slika-sa-obliku.png);)

Element (oblik - vani: URL (staza / na / slika - sa - oblika. PNG);)

Ali ... Ako primijenite ovu liniju CSS koda na stavku, broj se neće primijeniti na njega ako se ne ispune sljedeći uvjeti:

Element mora plutati. Budući nivoi CSS-a brojke omogućit će nam da identificiramo brojke za ne-plutajuće elemente, ali ne postoji takva mogućnost.

Element mora biti naveden. Visina i širina određena elementom koristit će se za uspostavljanje koordinatnog sustava.

Kao što ste vidjeli u gore navedenim funkcijama, brojke su određene skupom bodova. Budući da bodovi imaju koordinate, pretraživač zahtijeva koordinatni sustav koji bi znao gdje bi svaka tačka trebala biti smještena na elementu. Stoga bi primjer radio iznad, ako je imao sljedeće:

Element (plutač: lijevo; visina: 10em; širina: 15Em; oblika vani: krug ();)

Element (plutač: lijevo; visina: 10em; širina: 15Em; oblik - vani: krug ();)

Međutim, zadatak određenih veličina ne utječe na njegovu reakciju (o tome ćemo razgovarati kasnije). Budući da se svaka cifra definira kao skup točaka koji se nalaze koristeći par koordinata, promjena koordinata točke uticati će na stvorena figura. Na primjer, sljedeća slika prikazuje šesterokut koji se može kreirati pomoću funkcije poligona (). Figura se sastoji od šest bodova. Promjena horizontalne koordinatne koordinate narančastoj tačke promijenit će konačnu figuru i utjecati će i na postavljanje sadržaja unutar / izvan bilo kojeg predmeta na koji se slika primjenjuje.

Ako se element lebdi i jednak je desnoj ivici, na njega se primjenjuje brojka, sadržaj lijevoj će promijeniti svoju lokaciju kada će se mijenjati jedna od koordinata narančaste tačke unutar poligonske () funkcije.

Slika referentne blok

FIGURE CSS-a su definirane i kreirane u referentnom bloku (referentna kutija), gdje se slika izvlači. Pored visine i širine elementa, komponente blok modela elementa - marža, kutija za sadržaj, okvir za oblaganje i obrub takođe su direktorija za određivanje figure elementa.

Po defaultu, vanjska povratna jedinica (marža) koristi se kao referenca, na taj način, ako je element na koji primijenite figuru već ima vanjski uvlačenje od dolje, figura će se završiti na rubu vanjskog povratka, a ne granica. Ako želite koristiti neke druge vrijednosti blok modela, možete ih odrediti sa značajkom figure koju prolazite svojstvo slike:

oblika vani: krug (250px pri 50% 50%) okvir za oblaganje;

oblik - vani: krug (250px na 50% 50%) obloga - kutija;

Ključna riječ okvira u ovom pravilu određuje primjenu figure i ograničenja u obliku okvira podloge (područje unutarnjeg arogancije). Funkcija kruga () određuje krug, njenu veličinu i plasman u odnosu na stavku.

Definicija figura korištenja funkcija

Počet ćemo sa činjenicom da ćemo se pozabaviti informacijskim tekstom kružne slike korisničkog avatara, kao za korisnički profil ili opoziv.

Korištenje CSS oblika, tekst oko korisničke slike je pojednostavljen, umjesto da uštedu pravougaonog oblika..

Koristit ćemo funkciju kruga () kako bismo primijenili okrugli oblik na sliku profila pomoću sljedeće marke:

Lorem Ipsum Dolor sjedi Amet, Sanserttur adipizicirajući elit. Harum Itaque Nam Banitsis Eveiet Enim Eligendi Quae adipisci?

Assumenda Blanditiis Voluptuts tempore PORRO Quibusdam Beaae Deleniti Quod Asperes Sapiente Dolorem Greška! Quo Nam Quasi Soluta Repreterit Laudantium oprio Ipsam Ducimus Posledur Enim Fuga Quibusdam Mollitia Nescit Modi.

< img src = "//API.RANDOMUSER.ME/0.3.2/porTRAITS/MEN/7.JPG"alt \u003d "(! lang: slika profila" / > !}< p > Lorem Ipsum Dolor sjedi Amet, Sanserttur adipizicirajući elit. Harum Itaque Nam Banitsis Eveiet Enim Eligendi Quae adipisci?< / p > < p > Assumenda Blanditiis Voluptuts tempore PORRO Quibusdam Beaae Deleniti Quod Asperes Sapiente Dolorem Greška! Quo Nam Quasi Soluta Repreterit Laudantium oprio Ipsam Ducimus Posledur Enim Fuga Quibusdam Mollitia Nescit Modi.< / p >

Možete pitati: "Zašto ne možemo primijeniti granični radijus za zaokruživanje slika?" Odgovor: Nekretnina graničnog radijusa ne utječe na lokaciju sadržaja unutar i izvan predmeta na koju se primjenjuje. Potječe samo granice elementa ili pozadine. Pozadina je rezana na zaobljenim uglovima, sve. Sadržaj unutar elementa ostat će pravokutni, a sadržaj izvan elementa također će se ponašati kao da element ostane pravokutni.

Koristit ćemo svojstvo graničnog radijusa kako bismo napravili okrugli sliku - evo onoga što radimo kako bismo zaokružili slike ili druge stavke na stranici:

img (plutač: lijevo; širina: 150px; visina: 150px; granica - radijus: 50%; margina - desno: 15px;)

Bez CSS brojke, tekst vidi sliku kao kvadrat i povezuje kvadratnu figuru, a ne okrugla.

U pretraživaču koji ne podržava CSS oblike, sadržaj oko okrugle slike nalazit će se kao da nije okruglo. Tako će izgledati u starim preglednicima. Da biste promijenili pojednostavljenje sadržaja oko određene slike, koristite svojstva figure.

img (float: lijevo; širina: 150px; visina: 150px; granični radijus: 50%; oblik vani: krug (); oblik oblika: 15px;)

img (plutač: lijevo; širina: 150px; visina: 150px; granica - radijus: 50%; oblik - vani: krug (); oblik: 15px;)

Uz pomoć ovog koda, tekst će moći "vidjeti" okrugla figura koja se primjenjuje na sliku, a kandiduje ga, kao što je prikazano na prvom ekranu. (Možete pogledati rezultat.) U pretraživačima koji ne podržavaju brojke, izgledat će kao što je prikazano na drugoj slici.

Možete koristiti funkciju kruga () u čist obrazac Ili prenose parametre na njega. Evo njegove službene sintakse:

krug () \u003d krug ([[ ]? ? [AT.< position > ] ? )

Pitanja pokazuju da su ovi parametri opcionalni i mogu se propustiti. Parametri koje propustite poduzet će zadane vrijednosti. Kada koristite krug (), jer, umjesto direktnog pokazatelja položaja, prema zadanim postavkama, sredini kruga bit će u središtu predmeta na koji ga primijenite.

Pomoću kruga možete postaviti pomoću dužine dužine (PX, EM, PT itd.) Takođe možete podesiti radijus koristeći parametre koristeći najbližu ili najudajuću stranu, ali najbliža strana je zadana vrijednost koja je zadana vrijednost, koja je zadana vrijednost znači da će pretraživač preuzeti radijus udaljenost od centra elementa na najbližu stranu, najudaljenu stranu koristi udaljenost od centra do krajnje strane.

oblik vani: krug (najudaljenija strana na 25% 25%); / * Određuje krug čiji je radijus jednak polovini najduže strane smješten u točki sa 25% 25% u koordinatnom sustavu * / oblika - unutar: krug (250px u 500px 300px); / * Određuje krug, čiji je centar smješten u 500px vodoravno i 300px vertikalno, s radijusom od 250px * /

Funkcija ellipse () radi kao i krug (), s istim skupom vrijednosti, osim što umjesto parametra radijusa, potrebno je dva: jedan polumjer duž osi, drugi - na osovini - na drugoj osovini.

elipse () \u003d elipse ([ (2)]? ? [AT.< position > ] ? )

Funkcija Inset () nije izravno povezana sa krugom ili elipsom, koristi se za stvaranje pravokutnih oblika unutar elementa. Budući da su predmeti i pravokutni, nije potreban za stvaranje pravokutnika. Umjesto toga, Inset () može nam pomoći da stvorimo pravokutnike sa zaobljenim uglovima, tako da sadržaj teče zaobljene uglove.

Funkcija Inset () traje od jedne do četiri parametre za pomak, koji određuju pomak u odnosu na ivice referentne jedinice koja određuje lokaciju pravokutnika unutar elementa. Zaobljeni uglovi označeni su na potpuno isti način kao i pogranični radijus, koristeći jednu od četiri vrijednosti, u kombinaciji s krugom ključne riječi.

umetak () \u003d umetnik (offset (1,4)?)

inset () \u003d umetnik (pomak (1, 4) [okruglo< border - radius > ] ? )

Sljedeći kôd stvorit će pravokutnik sa zaobljenim uglovima na plutajućem elementu.

Element (plutač: lijevo; širina: 250px; visina: 150px; oblika vani: inset (0px okrugli 100px) pogranični okvir;)

Element (plutač: lijevo; širina: 250px; visina: 150px; oblik - vani: inset (0px okrugli 100px) granica - kutija;)

Posljednja karakteristika figura je poligon (), koji definira složenije nejasne brojke koristeći bilo koji broj bodova. Funkcija uzima skup pare koordinata, gdje svaki par određuje položaj tačke.

U sljedećem primjeru, plutajuća slika nalazi se na desnoj ivici, zauzima cijelu visinu ekrana i koristeći prikazi prozora View. Želimo tekst s lijeve penjačkim satima unutar slike i koristimo funkciju poligona () da bismo odredili nestandardnu \u200b\u200bfiguru za sliku.

CSS kôd za gornji sliku je sljedeći:

img.right (float: desno; visina: 100hh; širina: calc (100hv + 100hvh / 4); oblik vani: poligon (40% 0, 100% 0, 100% 100%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60 %, 45% 40%);)

img. Desno (desno; visina: 100hh; širina: calc (100hv + 100hvh / 4); oblik - vani: 40% 100%, 45% 100%, 45% 60%, 45% 40%);)

Možete postaviti koordinate točaka koji određuju lik u jedinicama ili postotka, poput mene. Ovaj kôd će dati potrebni rezultat, ali kao što vidite, funkcija figure ne utječe na preostale dijelove slike izvan navedene figure. Činjenica je da upotreba funkcije figure u element - bilo da je to slika ili spremnik ili nešto drugo - neće uticati na bilo šta drugo osim područja pojednostavljenja sadržaja. Pozadina, granice i sve ostalo ostat će nepromijenjeni.

Da biste vizuelno predali stvoreni poligon, moramo "obrezati" dijelove slike izvan slike. Ovo će nam pomoći u objektu Clip-Path iz specifikacije modula CSS maskiranja.

Imovina CLIP-staze vrši iste funkcije oblika i značenje kao svojstvo figure. Ako dajemo istu poligonalnu figuru koju smo koristili za nekretninu iz oblika, svojstvo Clip-Path, on će provesti dio slike izvan slike.

img.right (float: desno; visina: 100hh; širina: calc (100hv + 100hvh / 4); oblik vani: poligon (40% 0, 100% 0, 100% 100%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60%, 45% 60 %, 45% 40%); / * obrezivanje slika na konturu slike * / klip-staza: poligon (40% 0, 100% 0, 100% 100%, 45% 60%, 45 % 40%);)

img. Desno (desno; visina: 100hh; širina: calc (100hv + 100hvh / 4); oblik - vani: 40% 100%, 45% 100%, 45% 60%, 45% 40%); / * Obrezivanje slika na konturu slike * /klip - Put: Poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%, 45% 40%); )

Rezultat izgleda ovako:

Nekretnina sa klipkom i dalje je podržana zajedno sa prefiksom, I.E. Radit će u kromu sa dodatkom prefiksa -webkita. Možete pogledati demo.

Nekretnina sa klipom je divan satelit za lik slike, jer pomaže vizualno predstaviti stvorene oblike i obrezivanje dijelova izvan slike, tako da ćete se vrlo često koristiti za upotrebu zajedno.

Funkcija poligona () također prihvaća opcionalno ključna riječ Da biste ispunili, koja može biti ili nulrod ili ravnomet. Definiše kako će se presijecati područja u poligonu. Pogledajte svojstvo SVG-a za popunjavanje za detalje.

Definisanje cifline pomoću slike

Da biste postavili figuru pomoću slike, alfa kanal mora biti prisutan na slici, iz kojeg će pretraživač izdvojiti sliku.

Slika se određuje pikselima čija je alfa vrijednost veća od određenog praga. Zadana vrijednost praga je u redu (potpuno prozirna) ili ga možete odrediti izravno pomoću imovine praga i slike slike. Dakle, bilo koji neprozirni piksel može se koristiti kao dio slike definirane slike.

BUDUĆE CSS brojke mogu omogućiti prebacivanje na upotrebu podataka svjetline slike umjesto alfa kanala. Ako se to dogodi, prag slike-imat će se proširiti na prag ili za svjetlinu ili za alfa kanal, ovisno o stabilizaciji prekidača.

Sljedeća slika koristimo kako bismo odredili figuru elementa i prisilite tekst da biste je prikazali:

); Oblik - margina: 15px; Oblik - slika - prag: 0,5; Pozadina: # 009966 URL (staza / do / pozadina-image.jpg); Slika maske: URL (list.png); )

Naravno, ako ste primijenili pozadinu u element, pozadina će trebati podrezati izvan navedene figure. Nekretnina s slikama maske (s odgovarajućim prefiksima) iz modula maska \u200b\u200bmože vam pomoći u tome, jer svojstvo Clip-Path ne prihvaća alfa kanalsku vrijednost kao vrijednost. Rezultat izgleda ovako:

Ako stvorite složene brojke, možda ćete biti prikladni za postavljanje slike pomoću slike. Ovo će omogućiti upotrebu alfa slike u Photoshopu, umjesto da ručno postavljate točke.

Također ćete biti prikladni za upotrebu slike umjesto funkcije figure kada imate puno plutajućih elemenata ili iznimka i iznimka i izleta u elementu - jer ovaj trenutak Ne postoji mogućnost proglašenja nekoliko brojki u jedan element. Ali ako slika sadrži nekoliko područja, pregledač će ukloniti ove prostore i koristiti ih.

CSS figure u odgovornoj dizajnu

Mogu li CSS brojke dođu na reagisan dizajn? Trenutna specifikacija za oblikovanje uključuje ovaj trenutak, jer vam omogućava podešavanje veličine elementa ili u postotak, ili u jedinicama, a točke koje definiraju lik (parametri figure) mogu se također odrediti (parametri figure) kao procenat. To znači da element s određenim oblikom vani može biti u potpunosti odgovoran, kao i bilo koji plutajući element s dimenzijama navedenim u procentima.

Nekretnina u obliku oblika još nije odgovorna, ali je zato što je premještena na modul nivoa 2. Mnoge od njegovih trenutnih ograničenja proći će na sljedećem nivou.

Alati za stvaranje figura

Stvaranje složenih figura koje koriste funkcije može biti dugotrajan zadatak, posebno ako kreirate figuru sa mnoštvom bodova i koordinata pomoću poligona (). Srećom, tim web platforme Adobe radi na proizvodnji interaktivnih alata kako bi ovaj proces učinio mnogo lakšim. Bear Travis je stvorio zbirku alata za stvaranje figura koji nam omogućavaju vizualno stvaranje poligonalnih figura. Alat stvara funkciju slike. Može biti korisno, ali ima svoja ograničenja ako krenete da biste stvorili brojku na osnovu određene slike, jer alat ne pruža takvu priliku.

Napredniji i interaktivni alat razvio je Adobe Web platforma. Alat je nedavno objavljen kao produžetak za besplatan urednik zagrada. Omogućuje vam vizualizaciju i uređivanje oblika pravo u pretraživač, a ima mogućnost internetskog pregleda, koji ažurira vrijednosti oblika u tablici u stilu kada ih promijenite na stranici. Daje trenutni vizual povratne informacije Vaše promjene, omogućujući vam da vidite kako figure komuniciraju s drugim elementima na stranici.

Uređivanje poligonalne figure u pregledniku pomoću načina pregleda u zagradama. Unos zaslona Razvan Calinman.

Ovaj alat će postati neophodan, jer olakšava stvaranje, uređivanje i uklanjanje podataka. Razvan Caliman, koji objašnjava kako nazvati urednik oblika u zagradama i počnite ga koristiti.

Budućnost: CSS izuzeci

CSS specifikacija figura bila je specifikacija posvećena CSS brojevima i izuzecima, ali je podijeljena. Iako CSS figura određuje svojstva u obliku oblika i oblikovanja, izuzetak CSS definira svojstva koja uzrokuju sadržaj kojim se na primjer kontiduira ne-plutajuće elemente, na primjer, sa apsolutnim pozicioniranjem. Oni omogućuju ojačati cijelu figuru sa sadržajem s različitih strana, kao što je prikazano na slici ispod.

Ubuduće, Excepts CSS omogućit će sadržaj da takvu cifru izdržava kao rez, kao što je prikazano na prijelazu časopisa. Bakar se takođe može zaobići, a tekst će ga takođe dodirnuti..

Novi nivo figura

Trenutna CSS specifikacija figura je samo prvi korak. Ubrzo će nam nove mogućnosti dati više kontrola. Potrebno je kreirati i jačati sadržaj, tako da će nam biti lakše pretvoriti izgled u životnom dizajnu uz pomoć samo nekoliko linija koda. Do danas su urednici specifikacije fokusirani na završetak oblika izvana, a možda ćete vidjeti podršku CSS brojki velika količina Preglednici do kraja 2014. godine.

Podaci možete koristiti danas u sklopu progresivne strategije za unapređenje, znajući da imaju prihvatljivu zamjenu u nepodržanim preglednicima. Nedavno sam ih počeo primijeniti na svojoj web stranici i zamjena izgleda prilično prihvatljivo. Za složeniji dizajn možete koristiti skriptu za provjeru podrške pretraživača i pružiti nikakvu zamjenu ako nema podrške. Možete koristiti i moderniZR testove pomoću ove skripte za provjeru je li se održava nekretnina iz oblika ili preuzme vlastiti sklop koji uključuje ovaj test.

CSS brojke omogućavaju nam da stvorimo još jedan most između štampanja i web dizajna. Primjeri u ovom članku su jednostavni, ali trebali bi vam dati osnovu za kreiranje dizajna uporediv sa časopisom ili posterom, bez brige o tome možete li ga ponovo zabrinuti na ekranu. Tako ste proučavali - od ne-pravokutnih oznaka do animacije brojki - sada vrijeme eksperimenata.

Vlad Merzehevich

Na web lokacijama, trouglovi se uopće primjenjuju i zatvaraju kao dio dizajnerskih elemenata, na primjer, služe kao pokazivač na neki objekt, režirajući pažnju čitatelja na pravo mjesto. Također, trouglovi izvode ukrasne funkcije, čineći blokove u kojima se koriste, elegantniji i moderniji. Na slici. 1 prikazuje primjer korištenja trokuta u dizajnu.

Sl. 1. Trouglovi u web dizajnu

Direktno napravite trokut cSS alati Nemoguće je, tako da dvije metode omogućuju vam dodavanje na granicu i transformaciju.

Koristeći granicu.

Iako su granice stvorene kroz graničnu imovinu nisu izravno povezane sa trouglovima, to je granica koja će se najčešće koristiti. Ako postavite nultu širinu i visinu elementa, kao i instalirajte dovoljno debelu granicu, vidjet ćemo set od četiri trougla (Sl. 2). Za jasnoću, granice na svim stranama postavljaju se različite boje.

Sl. 2. Dodavanje obruba na stavku

Ostavljajući samo željenu obrub, a ostalo radeći transparentno, dobivamo trokut željene boje (Sl. 3).

Sl. 3. Element sa prozirnim granicama

Primjer 1 prikazuje dodavanje trokuta do bloka kroz pseudo-element: zaplijenje.

Primjer 1. Blokirajte trokut

Za apsolutno postavljene elemente, nulta širina i visina nisu potrebni.

Zbog kombinacije granica, možete dobiti još četiri vrste trouglova, što u kombinaciji sa već spomenutim, daje nam osam opcija. Njihov izgled i potreban kôd prikazan je u tablici. jedan.

Stol. 1. Moguće vrste trouglova

Pogled	Stil
	granica: 20px solidna transparentna; Granični top: 20px čvrsto zeleno;
	granica: 20px solidna transparentna; Granično-desno: 20px čvrsto zeleno;
	granica: 20px solidna transparentna; Granično dno: 20px čvrsto zeleno;
	granica: 20px solidna transparentna; Ground-lijevo: 20px čvrsto zeleno;
	granica: 20px solidna transparentna; Granični top: 20px čvrsto zeleno; Granično-desno: 20px čvrsto zeleno;
	granica: 20px solidna transparentna; Granično-desno: 20px čvrsto zeleno; Granično dno: 20px čvrsto zeleno;
	granica: 20px solidna transparentna; Granično dno: 20px čvrsto zeleno; Ground-lijevo: 20px čvrsto zeleno;
	granica: 20px solidna transparentna; Ground-lijevo: 20px čvrsto zeleno; Granični top: 20px čvrsto zeleno;

Iz tabele se vidi da nevidljive granice zauzimaju mjesto, razmotrite ga kada stavke pozicioniraju. Stil, takođe, potrebno je dodati nultu širinu i visinu ili koristiti svojstvo pozicije, kao što je to učinjeno u primjeru 1.

Trokut se može obaviti drugim oblikom, ako postavite različitu debljinu granica. Dakle, kod za stvaranje bloka prikazanog na slici. 4 Daje se u primjeru 2.

Sl. 4. Akutni trokut

Primjer 2. Oštro trougao

Sa obrubom, trokut čvrstih boja, za stvaranje okvira prikazanog na slici. 5 Moram ići na lukavstvo i nametnuti jedan element na drugi s malo pomak. Opet će nam pseudo-elementi pomoći: Prije i: nakon (primjer 3).

Sl. 5. Okvir sa kutom

Primjer 3. Prekrivanje trouglova

Zbog činjenice da primenjujemo jedan jedini element na drugi, ova metoda je pogodna samo za monotono puni i nije pogodan za gradijente ili pozadinske slike.

Upotreba transformacije

Uz pomoć transformacije možemo zakretati kvadratni element za 45 ° i izvući romb iz nje. Ovo nije trokut kao takav, pa moramo ostaviti izbočeni dio nama, a ostatak sakrivanja nakon drugog elementa (primjer 4).

Primjer 3. Transformacija

Rezultat ovog primjera prikazan je na slici. 6.

Sl. 6. Trokut sa sjenom

Online CSS3 generator za stvaranje strma grafičkih efekata i dobivanje svog CSS koda. Možete zasebno promijeniti stilove za različite države kao što su: lebdeći :: Aktivni, itd. Vaše ruke dobivaju sučelje za stvaranje složenih sjena, gradijenata, 3D efekata, efekata sa tekstom i još mnogo toga. Projekt ima vlastite efekte galerije iz kojeg možete započeti svoj razvoj. Izrazina karakteristika projekta je u tome što možete dobiti stilove odvojeni elementNa primjer, za hladovinu ili gradijent.

Kada prvi put uđete na stranicu, nudimo nam da stvorimo prazan za polje za unos, tipke, blok ili odaberemo gotovi uzorak iz projektne galerije. Započnimo s nečim jednostavnim, na primjer, iz galerije geometrijskih figura. Odaberite iz galerije potpisu yin-yang i kliknite "Dobijte kod" u gornjem desnom uglu:

Bit će prikazani gotovi CSS za tekući razvoj, kao i primjer HTML-a Šifra. Galerija projekta ima još više od 20 praznina za različite FSS brojke i, naravno, možete stvoriti svoje.

Korak po odjeljku galerije vidimo tipke, tekstualna polja, Efekti direktno za tekst, gore navedene brojke i skupove gradijenata. Igramo se sa efektima teksta:

web lokacija - wow 3d!

Treba primijetiti da su CSS generirani iznenađujuće vrlo čist i čitljiv, što je vrlo zadovoljno. Pogledajmo neku vrstu slatkog gumba:

cool dugme stranica.

Dodatne karakteristike uključuju uštedu vašeg stanja u pretraživaču Localstorage. Ako ste slučajno zatvorili karticu, sljedeći put kad prijeđete na web mjesto, sve promjene će ostati s vama.

Kada koristite nestandardne fontove sa Google fontovi. Enjoycss automatski dodaje ih kao primjer HTML-a. U mom slučaju, za tekst i tipke izgleda ovako:

Završni CSS je prilično glomazan, pa ga donosim samo na kraju članka:

Yin-yang (
Plovak: lijevo;
Širina: 96px;
Visina: 48px;
Pozicija: Relativna;
Granica: 2px Solid # F81;
Granična donja širina: 50px;
-Webkit-granični radijus: 100%;
Bordij-polumjer: 100%;
Boja: RGBA (0,0,1);
-O-text-preliv: isječak;
Tekst-preliv: Clip;
-Webkit-transformacija: rotatez (-45deg) skalax (1) skala (1) bela (1);
Transformacija: Rotatez (-45deg) Scaxx (1) Scaley (1) Scalez (1);
Transformatorsko porijeklo: 50% 50% 0;

Yin-yang :: prije (
Širina: 12px;
Visina: 12px;
Pozicija: Apsolutni;
Sadržaj: "";
Vrh: 50%;
lijevo: 0;
Granica: 18px Solid # F81;
-Webkit-granični radijus: 100%;
Bordij-polumjer: 100%;
Font: Normalna normalna normalna 100% / normalna Arial, Helvetica, Sans-Serif;
Boja: RGBA (0,0,1);
-O-text-preliv: isječak;
Tekst-preliv: Clip;
Pozadina: RGBA (255,255,255,1);
Tekst-senka: Nema;

-Webkit-transformator-porijeklo: 50% 50% 0;
Transformatorsko porijeklo: 50% 50% 0;
}

Yin-yang :: poslije (
Širina: 12px;
Visina: 12px;
Pozicija: Apsolutni;
Sadržaj: "";
Vrh: 50%;
Lijevo: 50%;
Granica: 18px Solid RGBA (255,255,25,1);
-Webkit-granični radijus: 100%;
Bordij-polumjer: 100%;
Font: Normalna normalna normalna 100% / normalna Arial, Helvetica, Sans-Serif;
Boja: RGBA (0,0,1);
-O-text-preliv: isječak;
Tekst-preliv: Clip;
Pozadina: # F81;
Tekst-senka: Nema;
-Webkit-transformacija: skalax (1) skala (1) belac (1);
Transformacija: Scaxx (1) Scaxy (1) Scalez (1);
-Webkit-transformator-porijeklo: 50% 50% 0;
Transformatorsko porijeklo: 50% 50% 0;
}

Uživajte-CSS-3DTEXT (
Kursor: pokazivač;
Granica: nema;
Font: Normalna normalna normalna 72px / normalna "Passerona", Helvetica, Sans-Serif;
Boja: RGBA (255,255,255,1);
Poravnavanje teksta: Centar;
-O-text-preliv: isječak;
Tekst-preliv: Clip;
Tekst-sjena: 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 (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.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.14902);
-Webkit-tranzicija: sva 300ms kubična bezier (0,42, 0, 0,58, 1);
-Moz-tranzicija: sva 300ms kubična bezier (0,42, 0, 0,58, 1);
-O-tranzicija: sva 300ms kubična bezier (0,42, 0, 0,58, 1);
Tranzicija: sva 300ms kubična bezier (0,42, 0, 0,58, 1);
-Webkit-transformacija: skalax (1) skala (1) belac (1);
Transformacija: Scaxx (1) Scaxy (1) Scalez (1);
-Webkit-transformator-porijeklo: 50% 50% 0;
Transformatorsko porijeklo: 50% 50% 0;
}

Uživajte u CSS-3DTEXT: Zadržite pokazivač (
Boja: RGBA (169,214,169,1);
Tekst-sjena: 0 1px 0 RGBA (255,255,255,1), 0 2px 0 RgBA (255,255,25,1,1), 0 3px 0 RGBA (255,255,25,1,1), 0 4px 0 RGBA (255,255,25) , 1,1,25,2,25,22,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.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);
-Webkit-tranzicija: Sve 200ms kubic-bezier (0,42, 0, 0,58, 1) 10ms;
-Moz-Transition: Sve 200ms kubični bezier (0,42, 0, 0,58, 1) 10ms;
-O-tranzicija: sva 200ms kubična bezier (0,42, 0, 0,58, 1) 10ms;
Tranzicija: Sve 200ms kubic-bezier (0,42, 0, 0,58, 1) 10ms;
}

Dugme za povratne informacije (
Prikaz: Inline-Block;
Plovak: lijevo;
Pozicija: Relativna;
Kursor: pokazivač;
Marža: 0 2% 0 0;
Padding: 12px 22px;
Preliv: skriven;
Granica: nema;
Font: Normalna normalna podebljana 1,6Em / normalna "sinkopata", Helvetica, Sans-Serif;
Boja: # ECF0F1;
-O-text-preliv: isječak;
Tekst-preliv: Clip;


-Webkit-
Poređenje pozadine: Box-kutija;
Pozadinski klip: pogranična kutija;
Veličina pozadine: Auto Automatski;
-Webkit-box-sjena: 0 10px 0 0 RGBA (178,49,49,1);
Kutija-sjena: 0 10px 0 0 RGBA (178,49,49,1);
Tekst-sjena: 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.0819608), 10px 10px 0 RGBA (196.80,78, 0.8), 11px 11px 0 RGBA (196.80,78,0780392), 12px 12px 0 Rgba (196.80,78,0,760784), 13px 13px 0 RGBA (196,80,78,0,0,0, 0,0,741,11,80,78,0,0,044,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,0558824), 18px 18px 0 RGBA (196,80,78,0,0439216), 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,0580392), 22px 22px 0 RGBA (196.80,78,0,78,0784), 23px 23px 0 RGBA (196.80,78,0,041176), 24px 24px 0 RGBA (196.80,78,0521569), 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,196863), 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);
-Webkit-transformacija: skalax (1) skala (1) belac (1);
Transformacija: Scaxx (1) Scaxy (1) Scalez (1);
-Webkit-transformator-porijeklo: 50% 50% 0;
Transformatorsko porijeklo: 50% 50% 0;
}

Dugme za povratne informacije: Zadržite lebdeće (
Poravnavanje teksta: Centar;
Pozadina: -webkit-linearni gradijent (-90deg, # CE6161 0, # EF6664 100%);
Pozadina: -Moz-linearni gradijent (180DEG, # CE6161 0, # EF6664 100%);
Pozadina: linearni gradijent (180deg, # CE6161 0, # EF6664 100%);
Pozicija pozadine: 50% 50%;
Poređenje pozadine: Box-kutija;
-Webkit-pozadina-Clip: pogranični okvir;
Pozadinski klip: pogranična kutija;
-Večit-pozadina: Auto automatski;
Veličina pozadine: Auto Automatski;
}

Dugme za povratne informacije: Aktivno (
Vrh: 5px;
Pozadina: -webkit-linearni gradijent (-90deg, # FF8583 0, # FF5350 100%);
Pozadina: -Moz-linearni gradijent (180DEG, # FF8583 0, # FF5350 100%);
Pozadina: linearni gradijent (180deg, # FF8583 0, # FF5350 100%);
Pozicija pozadine: 50% 50%;
-Webkit-pozadina-porijeklo: okvir za oblaganje;
Poređenje pozadine: Box-kutija;
-Webkit-pozadina-Clip: pogranični okvir;
Pozadinski klip: pogranična kutija;
-Večit-pozadina: Auto automatski;
Veličina pozadine: Auto Automatski;
-Webkit-box-sjena: 0 5px 0 0 RGBA (178,49,49,1);
Box-Shadow: 0 5px 0 0 RGBA (178,49,49,1);