Dimensiunile de control - un subiect important, și să se utilizeze la maximum posibilitățile SVG, aveți nevoie de o bună înțelegere a modului în care funcționează lucrurile.
Voi începe de departe. Nu cu mult timp în urmă, m-am alăturat Academiei de HTML ca un mentor. Pe lângă faptul că ajută la organizarea mentorat cunoștințele, stimulează în mod miraculos dezvoltarea diferitelor piese de util, deoarece în procesul există sarcini interesante care pot fi automatizate convenabil.
Vă interesează întrebarea: cea mai bună modalitate de a impune logo-urile de pe site? Cum și de ce? Imagine, sau fundal? Deoarece logo-ul va arăta atunci când sunt imprimate? Cum pentru a asigura accesibilitatea pentru cititoarele de ecran și cum să facă sugestii pentru motoarele de căutare?
model - este un element care poate fi utilizat în umplere kachectve sau accident vascular cerebral. Conținutul modelului pot fi foarte diferite: figurile, simboluri, texte sau bitmap - în orice combinație.
Joc cu coduri găsite surprinzătoare: apare în proprietate CSS fundal puteți utiliza celelalte proprietăți CSS, de exemplu, box-umbra. schiță. transforma și chiar un alt fundal.
Sincer, am bășici aproape accidental, atunci când am nevoie pentru a studia un gradient și am experimentat cu capacitățile lor. Eu însumi încă nu înțeleg cu adevărat cum sa întâmplat, folosind doar SVG - format vectorial - face un balon fără greutate.
SVG nu funcționează obișnuite CSS-fundaluri pentru umpluturi există unele modele: pentru gradienții elementelor și linearGradient radialGradient - liniare și radiale gradientilor, respectiv.
Recent, am avut de a depana un scenariu foarte capricioasă, în care sentimentele, au existat unele paranormal. Pentru a găsi problema, a fost obligată să se retragă o cantitate mare de informații de depanare în consola de browser.
SVG-masca - acesta este un subiect foarte bogat. În SVG există două moduri de a decupa un element cu altul: clip-calea și masca. Clip-cale de cultură utilizează doar contururile figurilor, ignorându-umplere și accident vascular cerebral, cu măști, totul este mult mai interesant: acestea iau în considerare și umple și accident vascular cerebral, precum și luminozitatea conținutului.
În Firefox, începând cu versiunea 39th proprietăți interesante au apărut-CSS care vă permit să controleze comportamentul conținutului de derulare.
tehnologie uimitoare SVG, nu în ultimul rând datorită capcanele sale originale. Dacă începeți să lucrați cu SVG - nu va fi plictisit sigur.
Un cuplu de probleme proaspete au fost detectate atunci când interacționează cu SVG unghiulară, și au apărut doar în Firefox. Am decis să descrie problemele și soluțiile lor aici: ca amintire, celălalt bun.
In postul anterior au fost toate un pic neclar: de ce nu definesc metodele existente de browser și ce să abandoneze JS-biblioteci? Întrebările sunt legitime, dar am avut un motiv să caute o modalitate de a face SVG-folbek fără dependențe externe: avea nevoie de o soluție pentru geamăt-plugin.
Cumva am dat peste o întrebare interesantă. Există o soluție pentru a înlocui inlaynovogo SVG pe imaginea de fundal în browser-ul, în cazul în care SVG inlaynovy nu este acceptată. Acesta este construit pe ipoteza că pagina are o corectă .ie8 noastră de clasă. în care imaginile de fundal sunt incluse elemente-SVG.
Dezavantajul evident al acestei metode constă în faptul că trebuie să luăm separat grijă de acea clasă a fost necesară pentru a ne - pentru a genera o pagină de pe server sau Javascript folosind JS.
Nu atât de mult timp în urmă, în Firefox 32 a inclus suport mix-amestec-mode. o în Chrome 37 - forme CSS. este posibil să se controleze forma, în care textul va încheia în jurul elementului. Ambele tehnologii arata foarte interesant, așa că am decis să le încerce în acțiune, în același timp a afla cum va arăta pagina într-un browser, în cazul în care acestea nu sunt acceptate.
Încă o dată sa întâlnit cu aceeași greblă, am decis încă să descrie esența problemei și modalitatea de rezolvare. Este vorba despre modul de a face browsere mai vechi să înțeleagă și să afișeze elementele-SVG - chiar și un bloc gol de dimensiuni specificate.
Într-o zi înainte de noi (eu si colegii mei) a fost o sarcină de a procesa un număr mare de SVG-icoane. Context: Trei duzini incolore SVG-imagini (culorile lor sunt specificate apoi prin CSS), iar sarcina de a le face PNG + CSS folbek pentru browsere mai vechi.
In timpul experimentelor cu animate SVG-măști. A trebuit să se ocupe în mod corespunzător cu algoritmi CSS-animație.
In ultimul articol, am considerat ciudat SVG-accident vascular cerebral, precum și posibilitatea de a face o masca animat.
Deoarece transformarea bărbați mascați care nu sunt animate în Firefox (versiunea ca a acestei a 31-scriere), am continuat experimentele mele cu accidente vasculare cerebrale.
Experimentarea cu SVG, puteți găsi o mulțime de lucruri ciudate. Ia-ciudat atunci când manipulați scalarea încă într-un fel de așteptat, dar surpriza a fost o proprietate brusca-accident vascular cerebral lățime.
prezentare inspiratoare de Dmitry Baranovsky. Tu nu știi SVG.
În căutarea de ce altceva să facă acest lucru a condus, am vrut să fac preloaders pe SVG.
Sa dovedit mare, deși rezultatul nu este încă foarte potrivit pentru utilizarea în viața reală.
decizia anterioară am pare încă oarecum redundant, iar apoi a ajuns la un cap un alt mod, de data aceasta - cu pseudo și gradul de opacitate.
În această săptămână în Firefox 30 a fost activată de proprietate implicit de fundal amestec-mode. Astfel, Firefox a devenit al treilea browser care acceptă această caracteristică (celelalte două - Opera și Chrome). Safari va sprijini această caracteristică în versiunea următoare, nu am putut găsi nimic despre planurile IE.
interes într-o varietate de moduri de a face icoane Continuând, a decis să caute ceva despre sprijin pentru @ font-face pe dispozitive mobile.
Este cunoscut faptul că fonturi personalizate pot lucra în moduri neașteptate. Dacă acestea nu sunt acceptate de browser-ul sau dispozitivul, în loc de caractere pot să apară ceva. Într-un ideal - nu va fi nimic, dar pot exista și alte opțiuni, până când pictogramele de culoare de conținut imprevizibil.
Aspect SVG-elemente pot fi setate atât prin CSS și SVG folosind filtre, gradienți și modele - pot prescrie elementele corecte în codul sau setat ca prin intermediul CSS.
Stiluri și script-uri pot fi setate în SVG-fișier, dar dacă vrem să vedem aceeași imagine în diferite condiții arată în multe feluri - în stiluri de fișiere nu funcționează - aveți nevoie pentru a vector de conținut accesibil stiluri externe.
Există mai multe moduri de a decupa element de pe masca. Unele dintre acestea sunt susținute de toate browserele moderne sunt susținute de alte foarte rău, și nu le puteți utiliza încă. În unele metode, masca poate fi text.
nth-copil - una dintre selecțiile mele preferate, deoarece cu el puteți face bucăți destul de colorate pentru a colecta o listă de elemente în grupuri de lungime arbitrară, și de a face cu ei diverse lucruri interesante de la masa cu dungi în sus desene întregi multi-colorate, toate fără a fi nevoie de a cere clase suplimentare sau într-un fel schimba aspectul.
Stivele - este un alt mod de organizare SVG. Ca sprite, doar mai bine - ca și cum am putea folosi utilizarea în CSS.
Din păcate, metoda este susținută foarte inegal de browserele moderne.
Design receptivă - Subiect fierbinte. Ecranele au trecut de mult rezoluțiile standard și site-uri pot vedea pe un dispozitiv de mărimea unui palmier, și pe monitoare mari. Site-ul ar trebui să apară la fel de bine, indiferent de dimensiunea aparatului și densitatea pixelilor. Pentru a adapta designul și conținutul, există mai multe tehnici și tehnologii diferite. Vector Graphics, SVG, în opinia mea, una dintre cele mai interesante subiecte în această direcție.
Umplutura SVG și accident vascular cerebral au o mulțime de opțiuni interesante, care oferă posibilitatea de mult mai largă decât ceea ce este în CSS.
cale - o linie versiune mai complexă. Utilizați-l pentru a trage o linie. polilinie. poligon. cerc și RECT. pruflink.
Spre deosebire de poligon. cifra nu se închide de la sine, dar se poate face cu un parametru suplimentar.
SVG piese pot fi grupate fișiere pentru a structurat în mod convenabil. În acest scop, există mai multe tag-uri: g. defs și simbol. Elemente, grupuri de elemente și simboluri pot fi refolosite.
Scrierea SVG este destul de simplu. cifra utilizată: RECT. poligon. cerc. elipsă. și linia. polilinie și calea. Am stabilit forma selectată este determinată de mărimea și locația, apoi adăugați fundal și accident vascular cerebral.
SVG - este un format vectorial, bazat pe XML.
SVG are multe avantaje față de bitmap-uri.
După ce m-am întrebat dacă este posibil să se facă o stele animate de la folosind CSS (pentru a fi exact - Sass). Sa dovedit că este posibil, și în funcție de setările, rezultatul poate fi, de asemenea, similar cu splash Windows „prin univers“.
Combinația de CSS-animații, transformări și degradeuri pot da rezultate destul de uimitoare. Nu sunt sigur că acest lucru poate fi utilizat în proiecte reale, dar se pare destul de impresionant.
În procesul de a studia JS a decis să scrie Risovalka CSS-animații bazate pe box-shadow. Am primit o mulțime de distracție și am învățat foarte mult.
Dintr-o dată fascinat de obiectul CSS-modele și a făcut unele noi. M-am întrebat: Este posibil să se facă o valuri netede și spirale, în cazul în care va imita modelul de hârtie colorată, și cum să facă o ștampilă fără a utiliza imagini.
Am fost mult timp utilizate pentru jsbin.com lor demo. Se pare folosit prea activ. La un moment dat în procesul de cod Jsbin de editare, în general, a încetat să mai fie deschise.
Posibilitatea de gestionare back-end, prin intermediul CSS Prin urmare, o combinație într-un gradient de a da oportunități absolut incredibile. Gradienții pot desena aproape orice, de la simple celule, aluneca și cercuri la un modele suficient de complexe. Puteți juca la nesfârșit.
gradienți radiale sunt desenate în mod diferit decât liniară. Dacă o culoare liniară sunt dispuse perpendicular pe o linie care definește direcția, culorile radiale diferă de la un anumit centru, iar gradientul poate lua forma unui cerc sau elipsă.
CSS-gradienti permit să facă fundalul a două sau mai multe culori, trecerea lin de la unul la altul. Ei au fost cu noi pentru o lungă perioadă de timp, și au un suport destul de bun pentru browsere. Cele mai multe browsere moderne, fără a le înțelege prefixe pentru IE9 si mai mari au filtru Gradient. De asemenea, pentru IE9 pot folosi SVG.
Am vrut să fac efectul razelor divergente asupra CSS pur, fără imagini.
O versiune ciudată a jocului.
Border-imagine - o proprietate care vă permite să setați imaginea de fundal pentru cadrul elementului. Proprietatea umple cadrul specificat imaginea prin distribuirea părți ale imaginii, astfel încât porțiunile de colț situate la colțurile cadrului, iar spațiul dintre ele este umplut restul imaginii.
Această caracteristică face ușor de a face lucruri incredibile, care anterior necesare de la 3 până la 8 imagini și manipula marcajul.
Cu informative și de divertisment pentru a face ceas digital.
Afișează ora curentă, își schimbă culoarea, în măsură să fie adaptate la dimensiunea ferestrei browser-ului.
Cred că am reușit să fac o mai bună soluție a problemei cu privire la jocul de Go.
În comparație cu versiunea anterioară, schimba culoarea de pietre, unul câte unul, iar la partea superioară a plăcii arată următoarea culoarea pietrei.
Toate CSS-selectori au propria lor greutate, care definește modul de a interacționa cu aceleași proprietăți stabilite în diferite părți ale codului la același element.
Unicode interesat, am vrut să văd ce caractere sunt în ea, și într-un fel de la sine a transformat pagina pe care o puteți vedea cele mai multe dintre caractere Unicode: yoksel.github.io/unicode-table.
Utilizarea CSS la pagina pe care se poate adăuga elemente care nu există în pagina de markup. Acest lucru se face folosind pseudo: înainte și: după. dar un rol la fel de important în acest sens este proprietatea de conținut.
Este cunoscut faptul că gradienții nu le place să fie animate.
În post sunt unele efecte bazate pe text-shadow.
text-shadow - aceasta este o proprietate care descrie umbra exprimate de text.
Într-un fel am nevoie pentru a face o vizualizare ierarhică a structurii proiectului pentru a pune în aplicare Css a fost selectat.
În CSS există suficiente modalități de a se referi la elementul dorit.
În fiecare nouă specificație CSS adaugă ceva nou, iar acum avem o mulțime de diferite selectoare.
În acest weekend, site-ul a înlocuit nu numai de design, dar, de asemenea, motorul. Acum este Jekyll - generator de pagini statice.
Dacă utilizați z-index pentru a schimba ordinea de stivuire a elementelor pe fiecare parte, în unele cazuri, pot apărea probleme din cauza proprietăților, crearea unui nou context de suprapunere.
O pereche de piese frumoase, cu Codepen.io.
Codul Lecție pentru SASS, am încercat să-l simplu CSS și folosind mai puține elemente fac.
Există două moduri de a face efectul ca și în cazul în care elementul este cusută pe mașina de cusut: folosind pseudo și de a folosi conturul.
box-dimensionare proprietate vă permite să specificați comportamentul de mărimea blocului, în prezența cadrelor și câmpuri. Aplicat la elemente a căror mărime este specificată.
Îmi place foarte mult posibilitatea de a seta codul de culoare în mai multe moduri diferite, în funcție de utilizarea prevăzută. Toate aceste metode 7.
Problema: dacă setați fundalul elementului de linie, se pare ca acest lucru
Atunci când devine necesar pentru a face celulele dintr-un caiet de școală fără a utiliza o imagine, primul lucru vine în minte gradienți.
proprietate box-shadow vă permite să adăugați unul sau mai multe elemente ale umbrelor.