a CSS

méretei ellenőrzés - fontos téma, és hogy maximálisan kihasználja a SVG lehetőségeket, szükség van egy jó megértése, hogyan működnek a dolgok.

Elkezdem messziről. Nem is olyan régen, én csatlakozott az Academy of HTML, mint mentor. Amellett, hogy a mentori segít megszervezni a tudás, hogy csodával határos módon serkenti a fejlesztés különböző darab azért hasznos, mert a folyamat vannak érdekes feladatok, melyek kényelmesen lehet automatizálni.

Érdekelt a kérdés: hogyan lehet a legjobban, hogy döntsön a logók az oldalon? Hogyan és miért? Kép, vagy a háttérben? Mivel a logó fog kinézni kinyomtatva? Hogyan biztosítható hozzáférhetőség képernyőolvasó és hogyan javaslatokat tesz a keresőkben?

minta - ez egy olyan elem, amely felhasználható a kachectve kitöltés vagy a stroke. A tartalmát a minta nagyon eltérő lehet: a számok, szimbólumok, szövegek vagy logók - bármilyen kombinációban.

Játék kódok talált meglepő: úgy tűnik, a CSS tulajdonság háttérben akkor a többi CSS-tulajdonságok, például box-árnyék. vázlat. átalakítsa és még egy másik háttérben.

Őszintén szólva, kaptam hólyagok szinte véletlenül, amikor kellett, hogy tanulmányozza a gradiens és kísérleteztek képességeiket. Én magam még mindig nem igazán értem, hogyan történt, kizárólag az SVG - vektoros formátumban -, hogy egy súlytalan buborék.

Az SVG nem működik a szokásos CSS-hátterű tömések vannak tervek: a színátmenetek az elemek és LinearGradient RadialGradient - lineáris és radiális színátmeneteket, ill.

Nemrég volt a hibakeresés nagyon szeszélyes forgatókönyvet, amelyben az érzések, volt néhány paranormális. Ahhoz, hogy megtalálja a problémát, szükséges volt, hogy visszavonja a nagy mennyiségű hibakeresési információ a böngésző konzolon.

SVG-maszk - ez egy nagyon gazdag téma. Az SVG kétféleképpen vágni egy elemnek egy másik: a klip-út és a maszkot. Clip-út a növény használja csak a kontúrok a számok, figyelmen kívül hagyva a kitöltés és a stroke, a maszkok, minden sokkal érdekesebb: ha figyelembe veszik, és töltse ki és a stroke, a fényerő, a tartalom.

A Firefox, kezdve a 39. változat a CSS-megjelent érdekes tulajdonságokkal, amelyek lehetővé teszik, hogy ellenőrizzék a viselkedését a görgetés tartalom.

SVG elképesztő technológia, ami nagymértékben köszönhető az eredeti buktatókat. Ha elkezd dolgozni SVG - nem fogunk unatkozni, az biztos.

Egy pár friss problémák merültek fel, amikor kölcsönhatásba SVG szögletes, és ők meg csak a Firefox. Úgy döntöttem, hogy leírja a problémákat és azok megoldásait itt: emlékbe, a többi jó.

Az előző bejegyzésben mind egy kicsit homályos, hogy miért nem határozza meg a böngésző a meglévő módszerek és mit hagyjon JS-könyvtárak? Kérdések jogszerű, de volt egy ok arra, hogy keresse meg a módját, hogy az SVG-folbek nélkül külső függőségek: szükség van egy megoldás röfögés-plugin.

Valahogy rábukkantam egy érdekes kérdés. Van egy megoldás helyett inlaynovogo SVG a háttérképet a böngészőben, ahol inlaynovy SVG nem támogatott. Ez arra a feltételezésre épülnek, hogy az oldal egy helyes mi osztály .ie8. ahol háttérképeket tartalmazza SVG-elemek.

A nyilvánvaló hátránya ennek a módszernek abban a tényben rejlik, hogy meg kell külön gondoskodni, hogy az osztály volt szükség, hogy nekünk -, hogy létrehoz egy oldalt a szerveren, vagy a JavaScript segítségével JS.

Nem is olyan régen, a Firefox 32 része támogatást mix blend-módban. a Chrome 37 - CSS formák. lehetséges, hogy ellenőrizzék a forma, amelyben a szöveg körbe a tételt. Mindkét technológia meg nagyon érdekes, ezért úgy döntöttem, hogy megpróbálja őket akcióban, ugyanakkor kideríteni, hogyan fog megjelenni az oldal a böngészőben, ha azok nem támogatott.

Ismét találkozott ugyanazzal a rake, még mindig úgy döntött, hogy leírja a probléma lényegét, és hogyan oldja meg. Arról van szó, hogy hogyan lehet a régebbi böngészők megérteni és megjeleníteni az SVG-elemek - akár egy üres blokk megadott méretben.

Egy nap áll előttünk (én és a kollégáim) volt az a feladat, hogy feldolgozza a nagyszámú SVG-ikonok. Háttér: Három tucat színtelen SVG-képek (színük van megadva, akkor a CSS) és a feladat, hogy azok PNG + CSS folbek régebbi böngészők.

Kísérletek során animált SVG-maszkokat. Volt, hogy megfelelően kezelni a CSS-animációk algoritmusok.

Az utolsó cikket, azt tartják furcsának SVG-stroke, valamint a lehetőséget, hogy egy animációs maszk.

Mivel az átalakulás a maszkos férfi nem animált Firefox (31. változat, mint az írás), folytattam a kísérleteket mozdulatokkal.

Kísérletezés SVG megtalálja a sok furcsa dolgot. Kap furcsa kezelésekor a beosztási mégis valahogy várható volt, de a meglepetés volt, hirtelen szélütés-width tulajdonság.

Inspiráló előadása Dmitry Baranovsky. You Do not Know SVG.

A kereső a mi mást tehetnék ezt vezettem, azt akartam, hogy előfeszítő SVG.

Kiderült nagy, de az eredmény még nem nagyon alkalmas a valós életben.

Előző döntés még mindig úgy tűnik, kissé felesleges, majd jött a feje egy másik utat, ezúttal - a pszeudo és átlátszóságát.

Ezen a héten a Firefox 30 már alapértelmezés szerint bekapcsolt ingatlan háttér-blend-módban. Így Firefox lett a harmadik böngészőt, amely támogatja ezt a funkciót (a másik kettő - Opera és a Chrome). Safari támogatja ezt a funkciót a következő változat, nem találtam semmit IE terveket.

Folytatva érdeklődés a különböző módon, hogy ikonok, úgy döntött, hogy keres valami körülbelül támogatását @ font-face a mobileszközökön.

Köztudott, hogy az egyéni betűtípusokat működhet váratlan módon. Ha ők nem támogatja a böngésző vagy az eszköz, hanem a karakterek jelenhetnek meg semmit. Egy ideális - nem lesz semmi, de lehet más lehetőség, amíg a színes ikonokat kiszámíthatatlan tartalmat.

Megjelenése SVG-elemek beállíthatók mind a CSS segítségével, és az SVG-szűrők használatával, színátmenetek és minták - ezek írja elő a megfelelő elemeket a kódot, vagy állítsa a CSS-en keresztül.

Stílusok és szkriptek lehet állítani az SVG-fájl, de ha azt akarjuk, hogy ugyanazt a képet a különböző körülmények között úgy néz ki, sok szempontból - a fájlon belül stílus nem működik - meg kell vektortartalmakat hozzáférhető külső stílusokat.

Számos módja van, hogy vágja elemet a maszkot. Néhány támogatja az összes modern böngésző által támogatott másik nagyon rossz, és nem tudja használni őket még. Néhány módszer a maszk lehet szöveget.

n-ed gyermek - az egyik kedvenc választás, mert vele lehet, hogy nem elég színes darabot összegyűjteni elemek listáját a csoport tetszőleges hosszúságú, és velük csinálni különböző érdekességeket csíkos táblát teljes többszínű minták, minden, anélkül, hogy kérje további osztályok vagy valamilyen módon változtatni az elrendezés.

Stacks - egy másik módja az SVG szervezet. Mivel a Sprite, csak jobb - mintha tudnánk használni felhasználásra CSS.

Sajnos a módszer nagyon egyenlőtlenül támogatja a modern böngészők.

Az adaptív tervezés - Hot Topic. A képernyők már régóta túllépett a standard határozatok, valamint az oldalak látható eszköz akkora, mint egy tenyér, és nagy monitorok. Az oldalon meg kell jelennie egyformán jól méretétől függetlenül a berendezés és a pixelsűrűség. Ahhoz, hogy alkalmazkodjanak a tervezés és a tartalom, sok különböző technikák és technológiák. Vector Graphics, SVG, véleményem szerint, az egyik legérdekesebb téma ebben az irányban.

Az SVG kitöltése és körvonala van egy csomó érdekes lehetőség, hogy lehetőséget nyújt a sokkal szélesebb, mint mi van CSS.

ösvény - egy bonyolultabb változata vonalon. Használd, hogy rajzoljon egy vonalat. vonallánc. sokszög. kör és len. pruflink.

Ezzel szemben a sokszög. A szám nem zárja önmagában, de lehet tenni egy további paramétert.

SVG-darabokat lehet csoportosítani, hogy kényelmesen strukturált fájlt. Ezekre a célokra, több címkék: g. defs és jelképe. Elements, csoportok és szimbólumok újra fel lehet használni.

Írja SVG meglehetősen egyszerű. Az ábrán használt: RECT. sokszög. kört. ellipszis. és a vonal. vonallánc és az útvonal. Mi meg a kiválasztott alakja határozza meg a méretét és helyét, majd adjuk hozzá a háttér és a stroke.

SVG - a vektoros formátum, XML-alapú.

SVG számos előnye van a bitmap.

Egyszer vajon ez lehetséges, hogy egy animált csillag a CSS (pontosabban - Sass). Kiderült, hogy ez lehetséges, és attól függően, hogy a beállítások, az eredmény is hasonló a Windows splash „Through the Universe”.

A kombináció a CSS-animációk, átalakulások és a színátmeneteket adhat egészen elképesztő eredményeket. Nem vagyok benne biztos, hogy ezt fel lehet használni a valós projektek, de úgy néz ki, elég meggyőző.

A folyamat során a tanuló JS döntött, hogy írjon risovalka CSS-animációk alapuló box-árnyék. Kaptam egy nagyon szórakoztató, és sokat tanultam.

Hirtelen lenyűgözte tárgyát CSS-minták és tett néhány új. Azon tűnődtem: lehetséges, hogy a sima hullámok és spirálok ha utánozza a minta színes papír és hogyan lehet egy pecsét használata nélkül a képeket.

Azt már régóta használják a demo jsbin.com. Úgy tűnik, túl aktívan használják. Egy bizonyos ponton a folyamat Jsbin kód szerkesztése általában megszűnt kell nyitni.

Az a lehetőség, back-end gazdálkodási CSS segítségével tehát egy kombináció gradiens így hihetetlen lehetőségeket. Színátmenetek levonhatjuk szinte semmit az egyszerű sejtek kombiné és körök egy elég bonyolult mintákat. Ön tudja játszani a végtelenségig.

Radiális gradiensek dolgozzák másképp, mint a lineáris. Ha lineáris színes vannak elrendezve merőlegesen meghatározó vonal irányába, a radiális színek különböznek egy adott központ, és gradiens formáját öltheti egy kör vagy ellipszis.

CSS-színátmenetek teszi, hogy a háttérben a két vagy több szín, egyenletes átmenet az egyik a másikra. Ők már velünk egy hosszú idő, és van egy nagyon jó támogatást böngészők. A legtöbb modern böngésző érti őket anélkül prefixumokat IE9 és idősebb Gradiens szűrő. is IE9 használhatja SVG.

Azt akartam, hogy a hatás a széttartó sugarak tiszta CSS, kép nincs.

Egy furcsa változata a játék.

Border-image - a tulajdonságot, amely lehetővé teszi, hogy a háttérképet az elem keretben. Az ingatlan kitölti a keretet megadott kép elosztásával a kép egy része úgy, hogy a sarok rész sarkainál a keret, és a tér között töltjük fel a többi képet.

Ez a funkció megkönnyíti csinálni hihetetlen dolgokat, melyeket korábban 3-8 képek és manipulálni a jelölést.

Az informatív és szórakoztató, hogy a digitális órát.

Mutatja az aktuális időt, színe megváltozik, képes kell igazítani a méret a böngésző ablakot.

Azt hiszem, sikerült jobban a probléma megoldása a játék a Go.

Összehasonlítva az előző verzió, változtatni a színét a kő egy-egy, és a tetején a tábla mutatja a következő szín a kő.

Minden CSS-választókat saját tömeg, amely meghatározza, hogyan befolyásolja az azonos tulajdonságokkal meghatározott különböző részein kódot az azonos elem.

Unicode érdekelt, szerettem volna látni, hogy milyen karakterek vannak benne, és valahogy magától fordult az oldalon, amelyen látható a legtöbb Unicode karakterek: yoksel.github.io/unicode-table.

CSS segítségével az oldalt felveheti elemeket, amelyek nem léteznek a lap kódja. Ezt használja ál: before és: after. de ugyanilyen fontos szerepet játszik ebben a tartalom tulajdonság.

Köztudott, hogy a színátmenetek nem tetszik, hogy animált.

A poszt néhány hatásai alapján szöveges árnyék.

text-shadow - ez egy olyan tulajdonság, amely leírja a árnyékából a szövegben.

Valahogy szükség, hogy a hierarchikus véve a projekt struktúra megvalósítása Css lett kiválasztva.

A CSS-ben van elég módon utalnak a kívánt elemet.
Minden új CSS specifikáció valami újat, és most van egy csomó más szelektor.

Ezen a hétvégén, a helyszín váltotta nem csak a design, hanem a motort. Most már Jekyll - statikus oldalak generátor.

Ha a z-index változtatni a takarási sorrendjét az elemek egymásra, egyes esetekben problémák merülhetnek fel, mivel a tulajdonságok, ami egy új overlay kontextusban.

Egy pár szép darab Codepen.io.

Lecke kódot SASS, megpróbáltam, hogy egyszerű CSS és használata kevesebb elemet.

Kétféle módon, hogy a hatás, mintha az elem varrott a varrógépet: a pszeudo és használja a vázlat.

doboz-méretezés tulajdonság lehetővé teszi, hogy meghatározza a viselkedést a blokk mérete jelenlétében keretek és a mezők. Alkalmazva elemek, amelyek mérete van megadva.

Nagyon szeretem a képességét, hogy a színkódot számos különböző módon, attól függően, hogy a rendeltetésszerű használat. Minden ilyen módszer 7.

A probléma: ha a háttér a sor elem kiderül, mint ez

Amennyiben szükségessé válik, hogy a sejteket egy iskolai notebook használata nélkül egy képet, az első dolog, ami eszébe jut színátmenetek.

box-shadow tulajdonság lehetővé teszi, hogy egy vagy több elemet az árnyékból.